4.vue 中的插值语法、事件处理、事件修饰符。

1.插值语法：

• 1-1.{{ xx }} 中的 xx 要写 js 表达式，xx 可以自动读取到 data 中的所有属性。用于解析标签体内容（指标签内书写插值语法）
• 1-1.vm 身上所有的属性及 Vue 原型上所有属性，在 Vue模板（插值语法）中都可以直接使用。

2.指令语法：

• 2-1.动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。用于解析标签(包括：标签属性、标签体内容、绑定事件…)

3.区分js表达式和js代码（语句）：

• 3-1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。
  • ①变量：a;
  • ②变量与变量之间的四则运算：a+b;
  • ③方法调用：Math.random();
  • ④三目运算符：0.1+0.2 === 0.3 ? true : false;
• 3-2.js代码(语句)：只做逻辑的判断。
  • ①if() {}
  • ②for() {}

4.事件处理：

• 4-1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名；
• 4-2.事件的回调需要配置在methods对象中，最终会在vm上。注意，方法如果放在data中也能用，但是会做数据代理，但方法实际不需要展示，会耗费vue的性能。
• 4-3.@click="demo"和@click = "demo($event)"效果一致，后者可以传递除默认参数外的的参数，其中默认参数是事件对象。

5.vue中的事件修饰符：可以连续写。

• 5-1.prevent：阻止默认事件(常用)；示例a标签的默认跳转事件。
• 5-2.stop：阻止事件冒泡（常用）；
• 5-3.once：事件只触发一次（常用）；
• 5-4.capture：使用事件的捕获模式。即若想在捕获阶段就触发事件。
• 5-5.self：只有event.target是当前操作的元素时才会触发事件。
• 5-6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕。
  • ①mousewheel滚轮事件，当滚动条已经到底既不能动时，会先执行绑定的滚轮事件然后再执行默认移动滚动条事件。若滚轮事件操作较为耗时时，会影响默认事件，使用修饰符passive即可处理。移动端用的多。

6.键盘事件：

• 6-1.Vue中常用的按键别名：
  回车=>.enter;
  删除=>.delete（捕获“删除”和“退格”键）；
  退出=>.esc；
  空格=>.space；
  换行=>.tab;（必须配合keydown使用）tab元素有一个功能，切换焦点。当使用keyup键按下时，焦点已离开绑定的元素导致键盘事件失效。
  上=>.up;
  下=>.down;
  左=>.left;
  右=>.right；
• 6.2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但是注意要转为kebab-case（短横线命名）。@keyup.delete=showInfo"。

7.系统修饰键（用法特殊）：ctrl、alt、shift、mata（win键）

• 7-1.配合keyup使用，按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。示例：@keyup.ctrl.y= “showInfo”
• 7-2.配合keydown使用：正常触发事件。