Vue模版语法

简介

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

文本

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

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

原始HTML

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

Using v-html directive:

使用javaScript表达式

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

 {{ number + 1 }}      

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

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

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

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


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

你可能感兴趣的:(Vue模版语法)