「Vue 学习笔记 3」Vue 实例、数据与方法、实例生命周期钩子、文本 & 原始 HTML 插值代码及实现效果

前言

• 跟着官方文档的例子学习一些基础用法，包括 Vue 实例、数据与方法、实例生命周期钩子、文本 & 原始 HTML 插值；
• 创建 index.html 文件 index.js 文件和 index.css 文件，这里暂时未用到 index.css 文件。
  

各部分代码及实现效果

声明式渲染

1. 声明式渲染
   index.html 文件：

     <!-- test-1 声明式渲染-->
    <div id="app-1">
        {{ message }}
    </div>
   

   index.js 文件：

   // test-1
   var app1 = new Vue ({
       el: '#app-1',
       data: {
           message: 'Hello Vue!'
       }
   });
   

   实现效果如下：

   

   控制台输入app1.message = ‘I have changed the data!’;

2. index.html 文件：

   <!-- test-2 -->
       <!-- 除了文本插值，还可以这样绑定元素 -->
       <div id="app-2">
         <span v-bind:title = "message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
     </div>
   

   index.js 文件：

   // test-2
   var app2 = new Vue ({
       el: '#app-2',
       data: {
           message: '页面加载于' + new Date().toLocaleString()
       }
   });
   

   

条件与循环

3. index.html 文件：

    <!-- test-3 条件与循环，if 条件-->
       <div id="app-3">
           <span v-if = "seen">Now you see me.</span>
       </div>
   

   index.js 文件：

   // test-3
   var app3 = new Vue ({
       el: '#app-3',
       data: {
           seen: true
       }
   });
   

   

   

4. index.html 文件：

   <!-- test-4 条件与循环，for 循环-->
       <div id="app-4">
         <ol>
           <li v-for="todo in todos">
            {{ todo.text }}
          </li>
         </ol>
       </div>
   

   index.js 文件：

   // test-4
   var app4 = new Vue ({
       el: '#app-4',
       data: {
           todos: [
              { text: '学习 JavaScript' },
               { text: '学习 Vue' },
              { text: '整个牛项目' }
          ]
       }
   })
   // 控制台输入 app4.todos.push({ text: '新项目' }) 页面最后添加了一个新项目
   

   
   

处理用户输入

5. index.html 文件：

     <!-- test-5 处理用户输入 -->
       <div id="app-5">
         <p>{{ message }}</p>
         <button v-on:click="reverseMessage">反转消息</button>
       </div>
   

   index.js 文件：

   // test-5
   var app5 = new Vue ({
       el: '#app-5',
       data: {
           message: 'Hello Vue.js!'
       },
       methods: {
           reverseMessage: function () {
               this.message = this.message.split('').reverse().join('')
           }
       }
   })
   

   

   

6. index.html 文件：

      <!-- test-6 处理用户输入-->
       <div id="app-6">
         <p>{{ message }}</p>
         <input v-model="message">
       </div>
   

   index.js 文件：

   // test-6
   var app6 = new Vue ({
       el: '#app-6',
       data: {
          message: 'Hello Vue!'
       }
   })
   

   
   

组件化应用构建

7. index.html 文件：

   <!-- test-7 组件化应用构建 -->
       <!--  使用 v-bind 指令将待办项传到循环输出的每个组件中 -->
       <div id = app-7>
         <ol>
           <!-- 现在我们为每个 todo-item 提供 todo 对象，todo 对象是变量，
             即其内容可以是动态的，我们也需要为每个组件提供一个 “key” -->
           <todo-item v-for="item in groceryList" 
                      v-bind:todo="item" 
                      v-bind:key="item.id">
           </todo-item>
         </ol>
       </div>
   

   index.js 文件：

   // test-7
   // 定义名为 todo-item 的新组件
   Vue.component('todo-item',{
       // todo-item 组件现在接受一个
       // “prop”,类似于一个自定义 attribute
       // 这个 prop 名为 todo
       props: ['todo'],
       template: '<li>{{ todo.text }}</li>'
   })
   
   var app7 = new Vue ({
       el: '#app-7',
       data: {
           groceryList: [
               { id: 0, text: '蔬菜' },
               { id: 1, text: '奶酪' },
               { id: 2, text: '随便其它什么人吃的东西' }
           ]
       }
   })
   

   

数据与方法

8. index.js 文件：

   // test-8
   // 数据对象
   // 当一个 Vue 实例被创建时，
   // 它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。
   // 当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
   var data = { a: 1 }
   
   // 该对象被加入到一个 Vue 实例中
   var vm = new Vue ({
       data: data
   })
   
   // 获得这个实例上的 property
   // 返回源数据中对应的字段
   vm.a == data.a  // => true
   console.log(vm.a == data.a )
   
   // 设置 property 也会影响到原始数据
   vm.a = 2
   data.a // => 2
   console.log(data.a)
   
   // ......反之亦然
   data.a = 3
   vm.a // => 3
   console.log(vm.a)
   
   // 添加一个新的 property，b 的改动不会触发任何视图的更新
   vm.b = 'hi'
   
   // 设置一些初始值，为将要用的时候做准备
   // data: {
   //     newTodoText: '',
   //     visitCount: 0,
   //     hideCompletedTodos: false,
   //     todos: [],
   //     error: null
   // }
   

   

9. index.html 文件：

   <!-- test-9 -->
       <div id="app">
         <p>{{ foo }}</p>
         <!-- 这里的 ‘foo’ 不会更新！ -->
         <button v-on:click="foo = 'baz'">Change it!</button>
       </div>
    
   

   index.js 文件：

   // test-9
   // 使用 Object.freeze(),阻止修改现有的 property,响应系统无法再追踪变化
   var obj = {
       foo: 'bar'
   }
   
   Object.freeze(obj)
   
   new Vue({
       el: '#app-9',
       data: obj
   })
   
   

   

   

10. index.html 文件：

     <!-- test-10 -->
        <div id="app-10">
          {{a}}
        </div>
    

    index.js 文件：

    // test-10
    // 除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。
    // 它们都有前缀 $，以便与用户定义的 property 区分开来。
    var vm = new Vue ({
        el: '#app-10',
        data: data
    })
    
    vm.$data === data // => true
    console.log(vm2.$data === data)
    vm.$el ===document.getElementById('app-10') // => true
    console.log(vm.$el ===document.getElementById('app-10'))
    
    // $watch 是一个实例方法
    vm.$watch('a',function(newValue,oldValue) {
        // 这个回调将在'vm.a'改变后调用 
    })
    

    

实例生命周期钩子

11. index.html 文件：

       <!-- test-11 生命周期 -->
    

    index.js 文件：

    // test-11 实例生命周期钩子
    new Vue ({
        data: {
            a: 1
        },
        created: function (){
            // 'this'指向 vm 实例
            // console.log('Test-11 a is：' + this.a)
        }
    })
    // => "a is: 1"
    

    

插值

12. 文本插值 & 原始 HTML 插值
    index.html 文件：

    <!-- test-12 -->
        <div id="app-12">
          <!-- 控制台输入app12.msg='改变'，上面那个改变了，下面那个没有改变 -->
          <span>Message: {{ msg }}</span>
          <span v-once>这个将不会改变： {{ msg }}<span></span>
    
          <p>Using mustaches: {{ rawHtml }}</p>
          <p>Using v-html directive: <span v-html="rawHtml"></span></p>
        </div>
    

    index.js 文件：

    // test-12
    // 单引号！
    var app12 = new Vue ({
        el: '#app-12',
        data: {
            msg: '文本插值',
            rawHtml: '<span style="color:red">This should be red.</span>'
        }
    })
    

    
    

    

完整代码

• index.html 文件：

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="stylesheet" href="index.css">
       <!-- 开发环境版本，包含了有帮助的命令行警告 -->
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <title>mytestvue</title>
    </head>
    <body>
  
  <!-- test-1 声明式渲染-->
  <div id="app-1">
      {{ message }}
  </div>
  
  
  <!-- test-2 -->
  <!-- 除了文本插值，还可以这样绑定元素 -->
  <div id="app-2">
    <span v-bind:title = "message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
  </div>
  
  
  <!-- test-3 条件与循环，if 条件-->
  <div id="app-3">
      <span v-if = "seen">Now you see me.</span>
  </div>
  
  
  <!-- test-4 条件与循环，for 循环-->
  <div id="app-4">
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>
  
  
  <!-- test-5 处理用户输入 -->
  <div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
  </div>
  
  
  <!-- test-6 处理用户输入-->
  <div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
  </div>
  
  
  <!-- test-7 组件化应用构建 -->
  <!--  使用 v-bind 指令将待办项传到循环输出的每个组件中 -->
  <div id = app-7>
    <ol>
      <!-- 现在我们为每个 todo-item 提供 todo 对象，todo 对象是变量，
        即其内容可以是动态的，我们也需要为每个组件提供一个 “key” -->
      <todo-item v-for="item in groceryList" 
                 v-bind:todo="item" 
                 v-bind:key="item.id">
      </todo-item>
    </ol>
  </div>
  
  
  <!-- test-8 -->
  
  
  <!-- test-9 -->
  <div id="app-9">
    <p>{{ foo }}</p>
    <!-- 这里的 ‘foo’ 不会更新！ -->
    <button v-on:click="foo = 'baz'">Change it!</button>
  </div>
  
  
  <!-- test-10 -->
  <div id="app-10">
    {{a}}
  </div>
  
  
  <!-- test-11 生命周期 -->
  
  
  <!-- test-12 -->
  <div id="app-12">
    <!-- 控制台输入app12.msg='改变'，上面那个改变了，下面那个没有改变 -->
    <span>Message: {{ msg }}</span>
    <br>
    <span v-once>这个将不会改变： {{ msg }}<span></span>
    
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
  </div>
  
  <script src="index.js"></script>
  </body>
  </html>
  

• index.js 文件：

  // test-1
  var app1 = new Vue ({
      el: '#app-1',
      data: {
          message: 'Hello Vue!'
      }
  });
  
  // app1.message = 'I have changed the data!';
  
  
  // test-2
  var app2 = new Vue ({
      el: '#app-2',
      data: {
          message: '页面加载于' + new Date().toLocaleString()
      }
  });
  
  
  // test-3
  var app3 = new Vue ({
      el: '#app-3',
      data: {
          seen: true
      }
  });
  
  // app3.seen = false;
  
  
  // test-4
  var app4 = new Vue ({
      el: '#app-4',
      data: {
          todos: [
              { text: '学习 JavaScript' },
             { text: '学习 Vue' },
            { text: '整个牛项目' }
       ]
     }
  })
  // 控制台输入 app4.todos.push({ text: '新项目' }) 页面最后添加了一个新项目
  
  
  // test-5
  var app5 = new Vue ({
      el: '#app-5',
      data: {
         message: 'Hello Vue.js!'
      },
      methods: {
          reverseMessage: function () {
              this.message = this.message.split('').reverse().join('')
         }
      }
  })
  
  
  // test-6
  var app6 = new Vue ({
      el: '#app-6',
      data: {
          message: 'Hello Vue!'
      }
  })
  
  
  // test-7
  // 定义名为 todo-item 的新组件
  Vue.component('todo-item',{
      // todo-item 组件现在接受一个
      // “prop”,类似于一个自定义 attribute
      // 这个 prop 名为 todo
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
  })
  
  var app7 = new Vue ({
      el: '#app-7',
      data: {
          groceryList: [
              { id: 0, text: '蔬菜' },
              { id: 1, text: '奶酪' },
              { id: 2, text: '随便其它什么人吃的东西' }
          ]
      }
  })
  
  
  // test-8
  // 数据对象
  // 当一个 Vue 实例被创建时，
  // 它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。
  // 当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
  var data = { a: 1 }
  
  // 该对象被加入到一个 Vue 实例中
  var vm = new Vue ({
      data: data
  })
  
  // 获得这个实例上的 property
  // 返回源数据中对应的字段
  vm.a == data.a  // => true
  console.log(vm.a == data.a )
  
  // 设置 property 也会影响到原始数据
  vm.a = 2
  data.a // => 2
  console.log(data.a)
  
  // ......反之亦然
  data.a = 3
  vm.a // => 3
  console.log(vm.a)
  
  // 添加一个新的 property，b 的改动不会触发任何视图的更新
  vm.b = 'hi'
  
  // 设置一些初始值，为将要用的时候做准备
  // data: {
  //     newTodoText: '',
  //     visitCount: 0,
  //     hideCompletedTodos: false,
  //     todos: [],
  //     error: null
  // }
  
  
  // test-9
  // 使用 Object.freeze(),阻止修改现有的 property,响应系统无法再追踪变化
  var obj = {
      foo: 'bar'
  }
  
  Object.freeze(obj)
  
  new Vue({
      el: '#app-9',
      data: obj
  })
  
  
  // test-10
  // 除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。
  // 它们都有前缀 $，以便与用户定义的 property 区分开来。
  var vm = new Vue ({
      el: '#app-10',
      data: data
  })
  
  vm.$data === data // => true
  console.log(vm.$data === data)
  vm.$el ===document.getElementById('app-10') // => true
  console.log(vm.$el ===document.getElementById('app-10'))
  
  // $watch 是一个实例方法
  vm.$watch('a',function(newValue,oldValue) {
      // 这个回调将在'vm.a'改变后调用 
  })
  
  
  // test-11 实例生命周期钩子
  new Vue ({
      data: {
          a: 1
      },
      created: function (){
          // 'this'指向 vm 实例
          console.log('Test-11 a is：' + this.a)
      }
  })
  // => "a is: 1"
  
  
  // test-12
  // 单引号！
  var app12 = new Vue ({
      el: '#app-12',
      data: {
          msg: '文本插值',
          rawHtml: '<span style="color:red">This should be red.</span>'
      }
  })