vue 模板语法

概述1. 要点 Vue.js 使用了基于 HTML 的模板语法 也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法   2. 细节点 2.1 插值 2.1.1 文本      “Mustache”语法 (双大括号)           {{ msg }} <span>Message: {{ msg }}</span> 2.1.2 html       v-html 指令   

1. 要点

Vue.Js 使用了基于 HTML 的模板语法

也可以不用模板，直接写渲染 (render) 函数，使用可选的 JsX 语法

 

2. 细节点

2.1 插值

2.1.1 文本     

“Mustache”语法 (双大括号)           {{ msg }}

<span>Message: {{ msg }}</span>

2.1.2 HTML      

v-HTML 指令        v-HTML="rawHTML"                     不能使用 v-HTML 来复合局部模板，因为 Vue 不是基于字符串的模板引擎

<span v-HTML="rawHTML"></span>

2.1.3 特性（属性）

v-bind 指令    v-bind:ID="dynamicID"     

<div v-bind:ID="dynamicID"></div>

 

2.1.4 Js 表达式

{{ number + 1 }}
{{ ok ? ‘YES‘ : ‘NO‘ }}
{{ message.split(‘‘).reverse().join(‘‘) }}
<div v-bind:ID="‘List-‘ + ID"></div>

有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

 

2.2 指令   指令 (Directives) 是带有 v- 前缀的特殊特性

<p v-if="seen">现在你看到我了</p>

 

 

2.3 缩写

 

3. 代码

 

4. 参考网址

总结

以上是内存溢出为你收集整理的vue 模板语法全部内容，希望文章能够帮你解决vue 模板语法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。