vue模板语法
Posted 街角小七
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue模板语法相关的知识，希望对你有一定的参考价值。
Vue.js 使用了基于 html 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
1、插入纯文本 “Mustache” 语法
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="id"> 10 <span>{{message}}</span><!--绑定数据message对象上的数据改变时插值处的内容也会更新--> 11 <span v-once>{{message}}</span> 12 <!--通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定--> 13 </div> 14 </body> 15 <script> 16 var vm = new Vue({ 17 el: \'#id\', 18 data:{ 19 message:\'插入的是纯文本\' 20 } 21 }) 22 </script> 23 </html>
Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令
<div v-bind:id="dynamicId"></div>
对boolean值同样也有作用，如果判断条件为false，该属性会被移除
<button v-bind:disabled="someDynamicCondition">Button</button>
2、使用 v-html 指令插入html,数据绑定会被忽略
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="id"> 10 <span v-html="message"></span> 11 </div> 12 </body> 13 <script> 14 var vm = new Vue({ 15 el: \'#id\', 16 data:{ 17 message:\'插入的是html\' 18 } 19 }) 20 </script> 21 </html>
3、对于所有数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，每个绑定只能是单个表达式
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="id"> 10 <p>{{message + "-----不信你试试"}}</p></br> 11 <p>{{message.split(\'\').reverse().join(\'\')}}</p></br> 12 <p>{{num + 12}}</p></br> 13 <p>{{ok ? \'ok是true\':\'ok是false\'}}</p> 14 </div> 15 </body> 16 <script> 17 var vm = new Vue({ 18 el: \'#id\', 19 data:{ 20 message:\'Vue.js 都提供了完全的 JavaScript 表达式支持\', 21 num: 12, 22 ok: true 23 } 24 }) 25 </script> 26 </html>
打印结果：
4、部分指令后面还能跟一个参数，指令背后用冒号指明
<a v-bind:href="url"></a> //更新html属性
<a v-on:click="doSomething"> //监听事件
5、过滤器
过滤器只能在 mustache 绑定和 v-bind 表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。过滤器函数总接受表达式的值作为第一个参数。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="id"> 10 <p>{{message|capitalize}}</p></br> 11 <p>{{num|test1}}</p></br> 12 <p>{{num|test1|test2(10,20)}}</p></br><!--过滤器函数总接受表达式的值作为第一个参数--> 13 <!--对于过滤器test2来说，第一个参数是num,第二个参数是10，第三个参数是20--> 14 </div> 15 </body> 16 <script> 17 var vm = new Vue({ 18 el: \'#id\', 19 data:{ 20 message:\'aaabbbccc\', 21 num: 12, 22 ok: true 23 }, 24 filters:{ 25 test1:function(num){ 26 if(num == 0) return 0 27 return num = num * 100 28 }, 29 test2:function(num,arg1,arg2){ 30 if(num == arg1 ) return num 31 return arg2 32 }, 33 capitalize: function (value) { 34 if (!value) return \'\' 35 value = value.toString() 36 return value.charAt(0).toUpperCase() + value.slice(1) 37 } 38 } 39 }) 40 </script> 41 </html>
打印结果：
6、指令缩写格式
<div> <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a> </div>
以上是关于vue模板语法的主要内容，如果未能解决你的问题，请参考以下文章
vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容