Vue 学习笔记 （一）

Vue入门文档地址：https://cn.vuejs.org/v2/guide/syntax.html
基础盘点：

var vm = new Vue({
     el: '#example',               //容器ID
     data: {                            //data表示要绑定的数据
        message: 'Hello',
        firstName:'zhangsan',
        lastName:'lisi',
        fullName:'hahahah'
     },
     methods:{                      //表示@click等事件触发后所执行的方法

     },
     watch: {                        //watch属性是一种命令是的监听属性 （较繁琐一般用计算属性可以替代）
           firstName: function (val) {       //这里的val表示 firstName  
                  this.fullName = val + ' ' + this.lastName
           },
      },
 //notes:不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
//这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
     computed: {          //表示计算属性，用法为：计算后的信息: "{{ reversedMessage }}" 
    
     // 计算属性的 getter
    reversedMessage: function () {    
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    },
    fullName: {
                // getter  用法：vm.fullName
                get: function () {
                    return this.firstName + ' ' + this.lastName
                },
                // setter(可以赋值了)，用法：vm.fullName = 'John Doe';
                set: function (newValue) {
                    var names = newValue.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[names.length - 1]
                }
            }
      }
})

知识点1：
Vue.js在用{{}}模板时，既提供了可以绑定简单的属性键值，又提供了完全的javaScript表达式支持：
例1：{{ ok ? 'YES' : 'NO' }}；{{ message.split('').reverse().join('') }}
例2：<div v-bind:id="'list-' + id"></div>
知识点2：指令盘点
1、v-bind:多在a标签中使用（缩写为:）v-bind 指令可以用于响应式地更新 HTML 特性
例3：
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
2、v-on:绑定事件（缩写为@） v-on 指令，它用于监听 DOM 事件
例4：
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
3、v-model指令 限制在<input>、<select>、<textarea>、components中使用，修饰符.lazy(取代 input 监听 change 事件)、.number(输入字符串转为有效的数字)、.trim(输入首尾空格过滤)。它其实是一个语法糖