vue.js

2018-06-25 0条评论 144次阅读 0人点赞

介绍

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
        <script>
            window.onload=function (){
                //声明式渲染
                app = new Vue({
                  el: '#app',
                  data: {
                    message: 'Hello Vue!'
                  }
                })
                
                //v-bind:title给标签动态绑定提示
                app2 = new Vue({
                  el: '#app-2',
                  data: {
                    message: '页面加载于 ' + new Date().toLocaleString()
                  }
                })
                
                //v-if条件
                app3 = new Vue({
                  el: '#app-3',
                  data: {
                    seen: true
                  }
                })
                
                //v-for循环
                app4 = new Vue({
                  el: '#app-4',
                  data: {
                    todos: [
                      { text: '学习 JavaScript' },
                      { text: '学习 Vue' },
                      { text: '整个牛项目' }
                    ]
                  }
                })
                
                //v-on:click点击事件
                app5 = new Vue({
                  el: '#app-5',
                  data: {
                    message: 'Hello Vue.js!'
                  },
                  methods: {
                    reverseMessage: function () {
                      this.message = this.message.split('').reverse().join('')
                    }
                  }
                })
                
                //v-model双向绑定
                app6 = new Vue({
                  el: '#app-6',
                  data: {
                    message: 'Hello Vue!'
                  }
                })
                
            }
        script>
    head>
    
    <body>
        
        <div id="app">{{ message }}div>
        
        
        <div id="app-2">
          <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
          span>
        div>
        
        
        <div id="app-3">
          <p v-if="seen">现在你看到我了p>
        div>
        
        
        <div id="app-4">
          <ol>
            <li v-for="todo in todos">
              {{ todo.text }}
            li>
          ol>
        div>
        
        
        <div id="app-5">
          <p>{{ message }}p>
          <button v-on:click="reverseMessage">逆转消息button>
        div>
        
        
        <div id="app-6">
          <p>{{ message }}p>
          <input v-model="message">
        div>
        
    body>
html>

组件

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

第一要写在最后，并且组件也要声明

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    head>
    <body>
        <ol id="app">
          
          <todo-item>todo-item>
        ol>
        
        <script>
            // 定义名为 todo-item 的新组件,tagName为todo-item(html中直接使用)
            Vue.component('todo-item', { 
              template: '这是个待办项'
            });
            
            //声明式渲染不能少
            new Vue({
              el: '#app'
            })
        script>
    body>
html>