模板语法

1. 文本

• 数据对象与DOM中的html值是响应式的，当Vue对象中的值发生改变是对应的DOM也会发生改变；

• v-once关键字可以使得DOM只被数据对象渲染一次

2.原始HTML

​ 双括号包裹起来的数据对象，默认会被解析成字符串，而不是html代码；响应解析成html代码的话需要关键字v-html

//在挂载的容器中，声明字符为html代码
<div v-html="html"></div>
//在Vue数据对象中存储对应的html代码
vm.$data.html='<span style="color:red;">html 代码</span>'

最后得到对应的html结构

<div>
<span style="color:red;">html 代码</span>    
</div>

• 对于html中属性的处理

  不能够直接使用挂载到标签属性上，而要使用v-bind:属性

  ```html

  </div> //当这样做的时候，title属性不能够正常的进行赋值，正确的做法

</div>

#### 3. 使用js表达式

   在对数据进行绑定的时候，不仅仅局限于简单的属性或者html内容的绑定，对于绑定的数据对象可以使用一些简单的表达式进行操作

```javascript
//字符拼接或者数字相加
{{message +1 }}
//判断语句
{{ ok ？‘yes’ : "NO" }}

4. 指令

v-if 根据表达式的值，来对标签元素进行插入或者移除

<p v-if="seen">现在你看到我了</p>

5.动态的参数

使用方括号括起来的部分可以作为javascripte表达式，也就是说可以传递一个动态的数据对象给参数，也就动态的改变了对应标签的参数内容

1. :warning:在对DOM属性进行填充时要注意，不能含有引号和空格

2. 不能使用大写的键名，默认会转为小写

<div v-bind:[attr]="message" v-once>悬停</div>    
//等同于 <div v-bind:[Attr]="message" v-once>悬停</div>
vm.$data.attr="title"