> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/vue/04-mo-ban-yu-fa.md).

# 模板语法

## 1. 文本

* 数据对象与DOM中的html值是响应式的，当Vue对象中的值发生改变是对应的DOM也会发生改变；
* v-once关键字可以使得DOM只被数据对象渲染一次

## 2.原始HTML

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

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

最后得到对应的html结构

```markup
<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** 根据表达式的值，来对标签元素进行插入或者移除

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

## 5.动态的参数

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

1. **:warning:在对DOM属性进行填充时要注意，不能含有引号和空格**
2. **不能使用大写的键名，默认会转为小写**

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