模板语法
Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层组件实例的数据。 在底层实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应性系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。
1.插值
1.文本
数据绑定最常见的形式就是使用“Musatche”语法（双大括号）的文本插值
通过使用v-once指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新，但会影响到该节点上的其他数据绑定
2.原始HTML
双括号会将数据解释为普通文本，而非HTML代码，为了输出真正的HTML，需要使用v-html指令。
不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎
对于用户界面UI，组件更适合作为可重用和可组合的基本单位
在站点上动态渲染任意的HTML是非常危险的，很容易导致XSS攻击。因此只对可信内容使用HTML插值，绝不要将用户提供的内容作为插值。
3.Attribute
Mustache语法不能在HTML attribute中使用，但是可以使用v-bind指令。
如果绑定的值是null或者undefined，那么该attribute将不会被包含在渲染的元素上
对于布尔attribute，它们只要存在就意味着值为true，v-bind工作略有不同
4.使用JavaScript表达式
对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。
这些表达式会在当前活动实例的数据作用域下作为JavaScript被解析
每个绑定都只能包含表达式（语句和流控制不会生效，三元表达式可以）
2.指令
指令（Directives）是带有v-前缀的特殊attribute。指令attribute的值预期是单个JavaScript表达式（v-for和v-on是例外）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
2.1参数
一些指令能接受一个“参数”，在指令名称之后以冒号表示。
v-bind:href="url"，在这里href是参数，告知v-bind指令将该元素的href attribute与表达式url的值绑定
v-on:click="doSomething"，在这里click是参数，用于监听点击事件
2.2动态参数
也可以在指令参数中使用JavaScript表达式，方法是用方括号括起来。
v-bind:[attributeName]="url" ，这里的attributeName会被作为一个JavaScript表达式进行动态求值，求得的值将会作为最终的参数来使用
v-on:[eventName]="doSomething"，同样，这里的eventName会被作为一个动态的事件名绑定处理函数
2.3修饰符
修饰符modifier以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
v-on:submit.prevent="onSubmit"，如示例.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()
v-on和v-for等功能中会有其他修饰符的例子。
3.缩写
v-前缀作为一种视觉提示，用来识别模板中Vue特定的attribute。
对于一些频繁用到的指令来说，v-会感到使用繁琐
在构建由Vue管理所有模板的单页面应用程序（SPA-single page application）时，v-前缀也变得没那么重要了
因此，Vue为v-bind和v-on这两个最常用的指令，提供了特定简写：
v-bind缩写：v-bind:href="url" => :href="url" (:[key]="url")
v-on缩写：v-on:click="doSomething" => @click="doSomething"(@[event]="doSomething")
看起来与普通的HTML略有不同，但:与@对于attribute名来说都是合法字符，在所有支持Vue的浏览器都能被正确地解析，而且不会出现在最终渲染的标记中。
4.注意事项
4.1对动态参数值约定
动态参数预期会求出一个字符串，异常情况下值为null，这个特殊的null值可以被显性地用于移除绑定，任何其他非字符串类型的值都将会触发一个警告。
4.2对动态参数表达式约定
动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在HTML attribute名里时无效的。变通的方法是使用没有空格和引号的表达式，或用计算属性（computed）替代这种复杂表达式。在DOM中使用模板时，还需要避免使用大写字符来命名键名，因为浏览器会把attribute名全部强制转为小写。
4.3JavaScript表达式
模板表达式都被放在沙盒中，只能访问一个受限的列表，如Math和Date，不应该在模板表达式中试图访问用户定义的全局变量。
作者：认真专注自信自律
链接：https://juejin.cn/post/7021937113402703909