模板语法

模板语法

Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

插值

---

• 双大括号的文本插值：（msg为一个变量）

插值文本是: {{ msg }}

使用，执行一次性插值（即当数据改变时，插值处的内容不会更新）

这个将不会改变: {{ msg }}

• 
  要输出HTML，需要使用指令：

html常量: {{ rawHtml }}
使用v-html指令: 

//属性申明代码
data() {
    return {
        rawHtml:"我的span",
      }
},

上述代码结果：

html常量: 我的span
使用v-html指令:我的span

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

• 
  模板语法不能作用在HTML的属性上，遇到这种情况应该使用 指令：

动态绑定id

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中。
如果 isButtonDisabled 的值是 null、undefined或 false，则 disabled 属性 甚至不会被包含在渲染出来的 元素中。

Button

• 
  除了绑定属性值，vue还提供了完全的js表达式支持：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

{{ var a = 1 }}


{{ if (ok) { return message } }}

指令

---

指令是带有 v-前缀的特殊属性，指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

现在你看到我了

//数据
data(){
  return{
      seen:true
  }
}

这里，v-if指令将根据表达式seen的值的真假来插入（移除）

元素。

• 
  一些指令能够接受一个“参数”，在指令名称后用冒号表示。

例如：v-bind指令可以用于响应式地更新HTML 的属性

这是个链接

例如：v-on指令，用于监听DOM事件

点击事件

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

 ... 

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。
例如，如果你的 Vue 实例有一个 data property attributeName，其值为 href，那么这个绑定将等价于v-bind:href。

同时，可以使用动态参数为一个动态的事件名绑定处理函数：

 ... 

在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

• 
  修饰符是以半角句号 指明的特殊后缀，用于支出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

...

缩写

---

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。

...


...


 ... 

...


...


 ...