一、模板语法

1.1 v-on (事件绑定)

1.1.1 写法

• @XXX （语法糖重点掌握）如@click、@mousemove
• 修饰符例如 .left、.middle 等
• 绑定多个事件，可用@=""(空格)@="" 写法，也可以传入一个对象@={key:value}

v-on:click="counter++"，引号中的内容也可以是表达式，但不常用、不推荐

1.1.2 传递参数

• 默认event
• 自定义参数
  • name，age，$event

<button @click="btn3Click('why', age, $event)">按钮3</button>

1.啥参数都不写，默认传递event对象
2.外面用双引，里面若用字符串记得用单引
3.单引起来表示字符串，未用''表示引用的是变量

1.2 v-if/v-show (条件渲染)

1.2.1 v-if/else/else-if

1.2.2 template作用

• 代替div包裹元素
• 不会被渲染到浏览器上

配合v-if、v-for等指令

类似于小程序中的block

1.2.3 v-show

①与v-if的本质区别：

• v-show的元素对应的dom实际是存在的，只是通过display:none 将其隐藏
• 而 v-if 条件为false时，元素不会被渲染到dom中

②用法：

• 不能和v-else配合
• 也不能和template配合

③开发中的选择

• 如果我们的原生需要在显示和隐藏之间频繁的切换，那么使用v-show；
• 如果不会频繁的发生切换，那么使用v-if；

1.3 ★v-for (列表渲染)

1.3.1 用法

• item in 数组/对象/数字/可迭代对象(字符串)
• (item, index) in 数组/对象/数字/可迭代对象(字符串)
• (item, index) of 数组/对象/数字/可迭代对象(字符串)

1.(value, key, index) in obj
2.item in 10
......

1.3.2 v-for绑定key属性

①理解VNode/虚拟DOM

• Vnode
• 虚拟DOM作用之一：
  • 跨平台

②key的作用

• 有key的操作:

  • 根据key找到之前的VNode进行复用;
  • 没有VNode可以复用, 再创建新的VNode

• 没有key的操作:

  • diff算法, 后续VNode复用性就不强

③key绑定id

二、Options

2.1 computed (计算属性)

2.1.1 作用

• 用于响应式数据的'计算'
• 代替插值语法
  • 插值语法用于计算会造成1.模板重难维护 2.代码重复
• 代替methods
  • computed底层会缓存, 性能更高(获取属，函数只执行一次，而methods获取一次，执行一次)

2.1.2 用法

computed: { fullname() {} }

2.1.3 完整写法get/set

2.2 watch (侦听器)

2.2.1. 基本侦听watch

• watch: { message(newValue, oldValue) {} }
• 注意: 对象类型
  • Proxy对象 -> Vue.toRaw(newValue)

2.2.2. 侦听的选项

• deep
• immediate

2.2.3. 其他的写法

• "info.name"
• 别的写法
• created -> this.$watch()