Vue的模板语法

Vue.js使用了基于Html的模板语法,允许开发者声明式的将DOM绑定到底层Vue实例的数据,所有的Vue.js的模板都是合法的Html.所以能被遵循规范的浏览器和Html解析器解析

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

插值

文本
数据绑定中最常见的形式就是使用"Mustache"语法,(双大括号)的文本插值

 <span> {{msg}}</span>

插值标签将会被替代为对应数据对象上msg property的值.无论何时,绑定的数据对象上 msg property发生了改变,插值处的内容都会更新.
tips:通过使用v-once指令,你能执行一次性的插值,当数据改变时,插值处 的内容不会更新.

<span v-once>{{msg}}</span>

原始Html
双大括号会将数据解释为普通文本,而非HTML代码.为了输出真正的HTML,需要使用== v-html==指令:

  <p v-html> <s </p>

Attribue

Mustache语法不能作用在Html Attribute上,遇到这种情况应该使用v-bind指令:

<a v-bind:href="" />

对于布尔attribue(它们存在就意味true),v-bind指令有所区别,

<button v-bind:disable="isButtonDiabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 元素中。

使用JavaScript表达式

模板中不仅可以绑定简单的data中的property键值,实际上对于所有的数据绑定,vue.js都提供了完全的javaScript表达式支持

   {{ok?'yes':'no'}}
   {{message.split('').reverse().join('')}}

tips:
模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如Date,Math.不应该在模板表达式中试图访问用户定义的全局变量

指令

指令(Directives)是带有v-前缀的特殊attribue.指令attribue的值预期是单个javaScript表达式(v-for例外),指令的职责是,当表达式的值发生改变时候,将其产生的连带影响,响应式的作用于DOM.

<p v-if="seen"> you can see me now</p>

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

元素。

参数

一些指令能够接受一个参数,在指令名称后用冒号表示.

<a v-bind:href="url">...</a>

这里的url是参数,告知v-bind指令将该元素href属性与表达式url进行绑定.

另一个例子是v-on指令用于监听事件

<a v-on:click="dosomething"></a>

这里的参数是监听事件名称

动态参数

既然属性值可以动态的改变,那么属性名也可以尝试下.vue2.6新增了动态参数,可以用方括号括起来的javascript表达式作为一个指令的参数.

<a v-bind:[attributeName]="url">... </a>
<a v-on:[eventName]="doSomething"> ... </a>

tips:
1.[]里面填写的不是字符串
2. 事件案例报错(因为浏览器将eventName全部强制转化为小写,所以无法读取到事件名称)
4. []变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式

修饰符

修饰符(modifier)是半圆角句号.指明的特殊后缀,用于支出一个指令应该以特殊方式绑定.例如.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefalut()

<form>
  <input type="text" v-on:submit.prevent="Onsubmit"/>
</form>

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind缩写

 <a v-bind:href='url'> 2222</a>
 <a :href='url'>222</a>
 /. 动态参数2.6.0+/
 <a  :[attributeName]='url'>....</a>

v-on缩写

  <a v-on:click="doSomething"...</a>
  <a @click="doSomethins">...</a>
  <a @[eventName]="doSomething"> ..</a>