# 模板语法

使用了基于HTML的模板语法，允许开发者声明式的将DOM与底层Vue实例数据进行绑定。

# 插值

文本插值，也叫Mustache语法。
功能：Mustanche标签在解析时，会被替换为数据对象中对应所绑定属性的值，并且，当所绑定的数据属性值变动，插值处的内容也会更改。

注意

如果使之不改变有几种方法：

使用Object.freeze()冻结绑定的数据
利用v-once指令

写法：

直接取值

<div id="app">
    <!-- 简单变量 -->
     <h2>{{ msg }}</h2>
     <!-- 对象取值 -->
     <h2>{{ obj.name }}</h2>
</div>

1
2
3
4
5
6

使用JavaScript表达式

    <!-- 数学运算 -->
    <h2>{{ number + 1 }}</h2>
    <!-- 调用原生JS的API -->
    <h2>{{ arr.reverse().join('-') }}</h2>
    <!-- 三元运算符 -->
    <h2>{{ number > 10 ? 'PASS' : 'GO AWAY'}}</h2>

1
2
3
4
5
6

注意

该文本插值方法，无法解析HTML标签 ==> 使用v-html指令
不能作用于标签属性上 ==> 使用v-bind指令
文本插值{{}}内部可以使用JS表达式，但是：不能使用JS语句，比如If for。并且只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。当逻辑过重时，使用文本插值语法显然难以维护，可读性也很差 ==> 使用计算属性

# 指令

是Vue中添加的带有 v- 前缀标签属性

功能：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
常规写法：指令名：参数 = "预期值"
- 指令名：这个必须存在，用来区分不同的指令，可单独使用，如：v-once
- 参数：一些指令能够接收一个“参数”，在指令名称之后加上冒号表示，比如v-bind后面参数为绑定的标签属性类型
- 预期值：单个JS表达式
- 修饰符：有些指令可以加修饰符，写法上是用 . 指明的特殊后缀。如: .trim 去除首位空格, .stop 阻止冒泡, .prevent 阻止默认行为
缩写：
- v-bind ==> :
- v-on ==> @

<!-- v-bind指令这里有指令名，参数，预期值 -->
<!-- v-once指令只有指令名 -->
<img v-bind:src="imgSrc" v-once>

1
2
3