【Vue】二：Vue核心处理---模板语法

1.模板语法—插值

{{可以写什么}}
（1）在data中声明的变量，函数
（2）常量
（3）合法的javascript表达式
（4）模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math, Date

2.模板语法—指令语法

Vue中所有指令都是以HTML标签当中的属性存在的。

（1）指令的位置

<HTML标签 指令的位置>{{插值语法的位置}}HTML标签>
1

<HTML标签 v-标签名:参数="表达式">{{xxx}}HTML标签>
1

（2）指令的语法规则
v-标签名:参数=“表达式”
其中表达式，之前在插值语法中{{这里可以写什么}}，那么指令当中的表达式就可以写什么。

（3）注意
有的指令，不需要参数，也不需要表达式：v-once
有的指令，不需要参数，但是需要表达式：v-if=“表达式”
有的指令，即需要参数，又需要表达式：v-bind:参数=“表达式”

2.1v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

• v-if = “表达式”
  表达式的结果是一个布尔值，true,则这个指令所在标签，会被渲染到浏览器当中，false,则这个指令所在标签，不会渲染到浏览器当中。

2.2 v-bind

作用：可以让HTML标签的某个属性的值产生动态的效果。

语法格式：

编译原理：
编译前
编译后

注意：
编译的时候，参数名会被编译为HTML的属性名。
表达式会关联data。

简写：

区别插值：
凡是标签体当中的内容想要改变，则使用插值语法，凡是标签中的属性想要改变，则使用指令语法

2.3 v-model

与v-bind的区别：
v-bind是单向绑定 （数据–>视图）
v-model是双向绑定 （数据<–>视图）

简写：
简写为：

2.4 v-on

• 语法格式：
  <标签 v-on: 事件名="表达式">

• 表达式的内容
  常量 JS表达式 Vue实例所管理的

• 事件关联回调函数
  当所有事件所关联的回调函数，需要在Vue实例的配置项methods中定义。
  methods是一个对象：{}，在这个methods对象中可以定义多个回调函数。

• 简写

v-on:click                 @click
v-on:keydown               @keydown
v-on:mouserover            @mouserover
1
2
3

• 绑定的回调函数，如果函数调用时不需要传递任何参数，则（）可以省略。
• Vue在调用回调函数的时候，会自动给回调函数传递一个对象，这个对象是：当前发生的事件对象。
• 在绑定回调函数的时候，可以在回调函数的参数上使用$event占位符，Vue框架看到这个$event占位符，会自动将当前事件以对象的形式传递过去。

3.MVVM

4.事件回调函数中的this

上例中回调函数中的this指向的是Vue实例。
但是上例中的函数不能写成箭头函数，如果写成箭头函数，则this指向的是window。