Vue模板详解

Vue模板方法是一种对HTML片段的操作方法，包括了插入属性值、HTML片段、文本、动态属性、表达式、指令等。

根据前端是由BOM+DOM+js组成的来看，vue对DOM的操作是将DOM的整体结构设定为单页面结构，每个组件都有自己的template，这段template模板是可以插入文本、HTML片段、HTML属性、js表达式、动态绑定HTML属性和js组件对象属性、指令、修饰符等。对模板的操作是从以前直接对HTML操作的一种封装。

1、在HTML模板中插入文本

<div>{{ msg }}</div>

2、在HTML模板中插入不经编译处理的HTML片段

模板定义：
shtml:string

<div v-html="shtml"></div>

模板初始化：
shtml="<span id='a'>inner html</span>"

模板解析效果：
<span id="a">inner html</span>

v-html  attribute 被称为一个 指令 。指令由  v-  作为前缀，表明它们是一些由 Vue 提供的特殊 attribute。在使用组件的时候，包含v-html的标签将会解析成包含v-html属性值为innerHtml的标签。因为这种解析过程是直接插入，不会经过Vue的编译过程，容易导致xss攻击。使用v-html标签的时候，要保证v-html属性的值来源于可信的源头。

3、在HTML模板中绑定属性与js对象属性的关联关系

     3.1、绑定的属性，取值范围不是boolean类型时

模板定义：
syncId:string

<div v-bind:id="syncId">bind id attribuute</div>

模板初始化：
syncId="abc"

模板解析效果：
<div id="abc">bind id attribuute</div>

     3.2、绑定的属性，取值范围是boolean类型时

模板定义：
btype:boolean

name:<input type="text" name="name" :disbaled="btype">

模板初始化：
btype='true'

模板解析效果：
<input type="text" name="name" disbaled="true">

也可以动态绑定多个值

4、在HTML模板中使用js表达式

     js表达式在运行完成后必须是一个值，这个值符合属性的要求，如三目运算符、有返回值的函数等。js表达式在模板中时，尽可以访问有限的全局变量。当然，可以在app.config.globalproperties中添加被表达式使用的全局共享变量。

5、在HTML模板中使用指令

    Vue中的指令一般是带有“v-”前缀的属性，如v-bind、v-html等。

     正常使用的模板指令有v-for、v-if/v-else等。

6、在HTML模板中动态绑定属性

      Vue支持动态绑定，即HTML标签上的属性名称是动态指定的，动态属性的值只能是字符串或者null。动态属性名称以表达式生成时，不能使用引号、空格等，会引起编译器警告。在实际使用过程中，动态绑定的属性和属性值都需要组件给出值。

模板定义：
attr:string
tid:string

<div v-bind:[attr]="tid">this is a good test</div>

模板初始化：
attr="id" tid="avalue"

模板解析效果：
<div id="avalue">this is a good test</div>

7、在HTML模板中绑定修饰符

    修饰符是以点开头的特殊后缀，表明指令是以一种特殊的方式被绑定。

<form @submit.prevent="onSubmit">...</form>

   这段代码表示表单的submit事件触发后，先调用event.preventDefault()方法，然后再调用onSubmit函数。