Vue2模板语法

Vue 使用基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

插值语法:

        最基本的数据绑定形式是插值语法，直接使用 { {}} 在双大括号里面写内容就可以直接被vue解析，然后渲染在DOM上。

<span>{
   
   { msg }}</span> // msg是在data中定义的变量

原始HTML:

        直接渲染标签，使用指令v-html 这种渲染方法是非常危险的，非常容易造成XSS泄露。仅在内容确定安全可信的时候使用。使用v-html渲染的内容会完全替换原标签的内容，甚至原标签也会被替换。

<span v-html='html'>{
   
   { msg }}</span>

动态数据绑定：

        动态数据绑定v-bind。比如在使用循环时，需要书写id唯一值，用作diff比对。所以在写id的时候，如果不使用v-bind，那么会当做字符串渲染。使用v-bind绑定的数据会变成响应式的。动态数据绑定的使用频率非常高，所以vue提供了v-bind的简写形式，即直接使用 ：进行绑定。

<span v-bind:id='proId'>{
   
   { msg }}</span> // 原始写法
<span :id='proId'>{
   
   { msg }}</span> // 简写

JavaScript表达式:

        如果我们的逻辑非常简单，甚至一句话就可以概括的时候，那么可以直接在{ {}}中书写。

<span v-bind:id='proId'>{
   
   { ok ? 'yes' : 'no' }}</span>