Vue模板语法有两大类：
1、插值语法：
功能：用来解析标签体内容。
写法：{{xxx}}，xxx是js表达式，可以直接读取data里面的属性。
2、指令语法：
功能：用来解析标签（包括：标签属性、标签体内容、绑定事件......）
写法：v-bind：href='xxx' 或者简写成 :href = 'xxx'，里面的xxx同样也是js表达式，也可以读取data里面的属性。
备注：Vue里面指令很多，形式都是v-???，并不是所有简写都和v-bind一样。
hello,{{name}}
baidu,{{address.name}}
Vue里面有两种数据绑定：
1、单向绑定（v-bind）：数据只能从data流向页面。
2、双向绑定（v-model）：数据不仅可以从data流向页面，还可以从页面流向data。
备注：
1、双向绑定一般用于表单类元素（如：input、select...）
2、v-model：value 可以简写为 v-model（因为v-model默认收集就是value值）
data和el两种写法：
1、el的两种写法：
（1）new Vue时候配置el属性
（2）先创建Vue实例，然后通过vm.$mount('.root')指向el的值。
2、data的两种写法：
（1）对象式（就是之前写的那样）
（2）函数式（注意：data用函数式，return后面必须是对象）
如何选择：现在两种写法都可以，但是用到组件时，必须用函数式，否则报错。
data: function () {//data用来存储数据
return {
name: '阿胜',
url: 'https://www.baidu.com',
address: {
name: 'China'
}
}
}3、原则：
由Vue管理的函数，一定不能写箭头函数，箭头函数this指向window，如果写了，this就不再是Vue实例了。
1、M：模型（model）：data中的数据；
2、V：视图（view）：模板代码；
3、VM：视图模型（viewmodel）：Vue实例
观察发现：
1、data中的属性，最后都会出现在VM身上
2、VM身上的属性以及Vue实例中的属性，在Vue模板（代码）中都可以直接使用
object.defineproperty（对象名，对象属性，值）
Object.defineProperty(v,'age',{
// value:18;
// enumerable:true,//控制属性是否可以枚举，也就是遍历，默认false
// writable:true,//控制属性是否可以修改，默认false
// configurable:true,//控制属性是否可以被删除，默认false
get(){//当读取时，get函数就被调佣
console.log('有人读取age属性');
return number;
},
set(value){//当修改时，set函数就被调用
console.log('修改属性');
number = value
}
})object.keys(对象名)：可以将对象转换成数组
Vue中的数据代理
1、Vue中数据代理：
通过VM对象来代理data对象中属性的操作（读/写）
2、Vue中数据代理的好处：
更加方便操作data中数据
3、基本原理：
通过object.defineproperty（）把data对象中所有属性添加到VM中，并且给每一个属性添加getter和setter方法，在getter/setter内部去操作（读/写）data中对应的属性。
{{name}}
事件的基本使用：
1、使用v-on：xxx 或@xxx绑定事件。其中xxx是事件名；
2、事件的回调写在methods对象中，最终会在vm中；
3、methods中配置的函数，不要用箭头函数！！！否者this就不是vm了；
4、methods中的函数，都是Vue所管理的函数，this指向vm 或组件实例对象；
5、@click=“demo” 和@click=“demo（$event）”效果一致，但是后者传参。
6、@xxx="yyy",yyy可以写简单的语句
Vue中的事件修饰符：
1、prevent：阻止默认事件（常用）；
2、stop：阻止事件冒泡（常用）；
3、once：事件只触发一次（常用）；
4、capture：使用事件的捕获模式；
5、self：只有event.target是当前操作的元素时才触发事件；
6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；（一般用来优化，移动端用的较多）
7、修饰符可以连着写！！！例如：@click.prevent.stop（阻止默认行为而且阻止冒泡）
1、Vue中常用的键盘别名：
回车 => enter
删除 => delete（捕获“删除”和‘退格’键）
退出 => esc
空格 => space
换行 => tab（特殊，必须配合keydown去使用）
上 => up
下=> down
左 => left
右 => right
2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意转为kebab-case（短横线命名）
3、系统修饰键（用法特殊）：Ctrl、Alt、shift、meta（win键）
（1）配合keyup使用：按下修饰键的同时，还得按下其他键，随后释放其他键，事件才触发。
（2）配合keydown使用：正常触发
（3）如果想ctrl + y 触发，可以写@keyup.ctrl.y
4、可以使用keycode去指定具体按键（不推荐，以后弃用）
5、Vue.config.keyCodes.自定义键名 = 建码。可以定制按键别名
hello,{{name}}
计算属性：
1、定义：要用的属性不存在，通过已有的属性计算得来。
2、原理：底层借助了object.defineproperty方法提供的getter和setter。
3、get函数什么时候执行？
（1）初次读取时执行一次
（2）当依赖的数据发生变化时会被再次调用
4、优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
5、备注：
1、计算属性最终出现在vm上，直接读取使用即可
2、如果计算属性要被修改，那必须的写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。
姓：
名：
全名：{{firstname + '-'+ lastname}}
全名：{{fullname}}
当不需要进行修改，只读取时，可以省略set，如下
computed:{
// 详细
// fullname:{
// get(){
// return this.firstname + this.lastname
// },
// set(value){
// const arr = value.split('-')
// this.firstname = arr[0];
// this.lastname = arr[1];
// }
// }
// 简写
fullname(){
return this.firstname + this.lastname
}
}监视属性watch:
1、当被监视的属性变化时，回调函数自动调用，进行相关操作。
2、监视的属性必须存在，才能进行监视！！
3、监视的两种写法：
（1）new Vue时传入watch配置
（2）通过vm.$watch监视
今天天气很{{info}}
本节讲了watch属性里面的这两个属性和方法，immediate和handler
深度监视：
（1）Vue中的watch默认不监视对象内部值得改变（一层）。
（2）配置deep：true可以监视对象内部值得改变（多层）。
备注：
（1）Vue自身可以监视对象内部值的改变，但是Vue提供的watch默认不可以！
（2）使用watch时根据数据的具体结构，决定是否深度监视。
简写：
watch: {
// 正常写法
// isHot: {
// immediate: true,//初始化时让handle调用一下
// handler(newValue, oldValue) {
// console.log('isHot被修改', newValue, oldValue);
// }
// }
// 简写
isHot(newValue, oldValue){
console.log('isHot被修改', newValue, oldValue);
}
},
})
// 正常写法
// vm.$watch('isHot',{
// immediate: true,//初始化时让handle调用一下
// handler(newValue, oldValue) {
// console.log('isHot被修改', newValue, oldValue);
// }
// })
// 简写
vm.$watch('isHot',function (newValue, oldValue) {
console.log('isHot被修改', newValue, oldValue);
})computed和watch之间的区别：
1、computed能完成的功能，watch都可以完成
2、watch能完成的，computed不一定可以完成，例如：watch可以进行异步操作（函数的回调）
两个重要的小原则：
1、被Vue管理的函数，最好写成普通函数function（）{}，这样this就指向Vue或组件实例对象
2、所有不被Vue管理的函数（定时器回调函数，ajax的回调函数、promise的回调函数等），最好写成箭头函数（）=>{}，这样this的指向才是vm 或者组件实例对象。
绑定样式：
1. class样式
写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2. style样式
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
绑定样式
{{name}}
{{name}}
{{name}}
{{name}}
{{name}}