Vue模版语法

简介

        Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

文本

        数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：<span>Message: {{ msg }}</span>

        通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：<span v-once>这个将不会改变: {{ msg }}</span>

原始HTML

        双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：<p>Using v-html directive:<span v-html="rawHtml"></span></p>

使用javaScript表达式

            迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。  

 {{ number + 1 }}      

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

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

{{ var a = 1 }} //这是语句，不是表达式

{{ if (ok) { return message } }} //流控制也不会生效，请使用三元表达式

                                                     不积跬步无以至千里,不积小流无以成江海