前言
在前面的一期的博客中，由博主我带各位老铁初步的认识了解了一下有关Vue的一些基本知识点，今天还是由博主继续带各位老铁继续在Vue的领域中探索新的知识与大家分享学习。今天给大家带来的是Vue——模版语法，将从以下几个方面讲述：插值、指令、过滤器、计算属性与监听属性。
一、了解模版语法
1. 什么是模版语法
Vue模板语法是一种用于在Vue.js框架中编写动态HTML模板的语法。它结合了普通文本和Vue实例中的数据，让开发者可以轻松地编写界面的逻辑和展示。
其中包括以下几个方面：
- 插值：使用双花括号
{{ }}将Vue实例中的数据绑定到模板中。例如：<div>{{ message }}</div>- 表达式：在插值的基础上，可以使用JavaScript表达式进行更复杂的计算。例如：
<div>{{ count * 2 }}</div>- 指令：以
v-开头的特殊属性，用于响应式地操作DOM元素或给元素添加事件监听器。常见的指令有v-if、v-for、v-on等。- 过滤器：使用管道符
|将一个表达式通过过滤器进行处理，用于格式化文本显示或数据转换。例如：{{ message | capitalize }}- 缩写：Vue提供了一些缩写语法，使模板写起来更加简洁，如
@代替v-on、:代替v-bind等。当然除此之外，Vue模板语法还支持条件渲染、列表渲染、绑定CSS类和样式、计算属性等功能，以及自定义指令和组件的使用。其实Vue模板语法与普通的HTML语法类似，但具有更多的动态性和扩展性。它使开发者能够更方便地操作数据和UI，并有效地实现响应式的界面交互。
2. 应用场景
Vue模版语法的应用场景
| 场景 | 说明 |
| 数据绑定 | Vue模板语法可以通过双花括号（Mustache语法）将数据动态地插入到HTML模板中，实现数据的实时更新。这使得开发者可以在模板中直接引用组件实例的数据，而无需手动操作DOM。 |
| 条件渲染 | Vue模板语法提供了v-if和v-show指令，可以根据条件来控制DOM元素的显示与隐藏。这使得开发者可以根据应用程序的状态来决定哪些DOM元素应该显示，从而实现条件渲染的逻辑。 |
| 列表渲染 | Vue模板语法提供了v-for指令，可以根据数据源动态地渲染列表。开发者可以通过v-for指令遍历数组或对象，生成对应的DOM元素，实现列表渲染的功能。 |
| 事件处理 | Vue模板语法可以通过v-on指令来绑定事件处理函数。开发者可以在模板中使用v-on指令监听DOM事件，然后调用组件实例中相应的方法来处理事件。这使得开发者可以方便地在模板中处理用户交互。 |
| 表单输入绑定 | Vue模板语法可以通过v-model指令实现表单输入元素与组件实例数据的双向绑定。这使得开发者可以方便地处理表单输入，并实时更新组件实例的数据。 |
3. 对开发的作用
- 数据驱动视图：Vue模板语法允许将数据动态地绑定到HTML模板中，实现数据驱动视图的效果。开发者只需关注数据的变化，而无需手动操作DOM，大大简化了视图层的代码编写。
- 简化DOM操作：Vue模板语法使得开发者可以通过简单的指令和表达式来操作DOM，如条件渲染、列表渲染、样式绑定等。开发者可以直观地在模板中表达视图的逻辑，而不需要手动操作DOM元素。
- 提高代码可维护性：使用Vue模板语法可以将视图逻辑与业务逻辑进行分离，使代码结构更加清晰。模板语法的声明性和组件化特性，使得开发者可以更好地组织和管理代码，提高代码的可维护性和可读性。
- 加速开发速度：Vue模板语法提供了一种快速构建界面的方式，开发者可以通过简单的模板语法来快速实现视图层的功能。这有助于加速开发速度，减少开发工作量。
- 支持响应式更新：Vue模板语法中的数据绑定和计算属性机制，使得数据的变化能够实时反映在视图上。开发者只需更新数据，视图会自动更新，从而提供了响应式的用户体验。
二、插值
1. 文本
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 导入js依赖文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>Vue-插值</title> </head> <body> <div id="app"> <p>文本</p> {{msg}} </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return { msg:'hello 君易' } } }); </script> </body> </html>
效果
2. HTMLj解析
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 导入js依赖文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>Vue-插值</title> </head> <body> <div id="app"> <p>HTML解析</p> <b v-html="msg2"></b> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return { msg:'hello 君易',//文本 msg2:'<span style="color:red">你好，君易-鑨<span>' } } }); </script> </body> </html>
效果
3. 表达式
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 导入js依赖文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>Vue-插值</title> </head> <body> <div id="app"> <p>文本</p> {{msg}} <p>HTML解析</p> <b v-html="msg2"></b> <p>表达式</p> {{num+1}} {{warn.substr(0,2)}} <input v-model="ok"/> {{ok==1?'学习':'摆烂'}} </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return { msg:'hello 君易',//文本 msg2:'<span style="color:red">你好，君易-鑨<span>', num:1, warn:'木易你好', ok:1 } } }); </script> </body> </html>
效果
注：
三、指令
1. v-if/v-else-if/v-else的使用
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>Vue-指令</title> </head> <body> <div id="app"> <p>v-if/v-else-if/v-else的使用</p> <input v-model="score"/><br/> <b v-if="score <60 ">不及格</b> <b v-else-if="score>=60 && score<70">及格</b> <b v-else-if="score>=70 && score<80">一般</b> <b v-else-if="score>=80 && score<90">良好</b> <b v-else="score>=90">优秀</b> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return { score:69 } } }); </script> </body> </html>
效果
会根据输入框输入的值，然后进入到判断语句语句中进行判断，输出显示对应的语句及文字
2. v-show
v-show与v-if的区别
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>Vue-指令</title> </head> <body> <div id="app"> <!-- <p>v-if/v-else-if/v-else的使用</p> <input v-model="score"/><br/> <b v-if="score <60 ">不及格</b> <b v-else-if="score>=60 && score<70">及格</b> <b v-else-if="score>=70 && score<80">一般</b> <b v-else-if="score>=80 && score<90">良好</b> <b v-else="score>=90">优秀</b> --> <p>v-show的使用</p> <p>v-show和v-if的区别</p> <b v-if="name">君易-鑨</b> <b v-show="name">君易-鑨</b> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return { score:69, name:false } } }); </script> </body> </html>
效果
因为属性name的值为false所以不在页面上展示，将属性值改为true就可以在页面上展示出来了。我们按F12进入到网页控制台查看。
由此我们可以知道v-show与v-if的区别所在了。
3. v-for
v-for的使用
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>Vue-指令</title> </head> <body> <div id="app"> <p>v-for的使用</p> <i v-for="a in arr">{{a}} </i><br /> <i v-for="i,u in list"> {{i}}</i> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return { arr:[1,2,3,4], list:[{ name:'君易',id: 1 },{ name:'木易',id: 1 },{ name:'曦曦',id:1 }] } } }); </script> </body> </html>
效果
扩展（下拉框）
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>Vue-指令</title> </head> <body> <div id="app"> <p>下拉框</p> <select> <option v-for = "h in hobby" value="h.id">{{h.name}}</option> </select> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return { score:69, name:false, arr:[1,2,3,4], list:[{ name:'君易',id: 1 },{ name:'木易',id: 1 },{ name:'曦曦',id:1 }], hobby:[{ name:'洗浴',id: 1 },{ name:'按摩',id: 2 },{ name:'SPA',id:3 }] } } }); </script> </body> </html>
效果
因此，像复选框也可以类似实现。
四、动态传参
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>Vue-指令</title> </head> <body> <div id="app"> <p>动态参数</p> <input v-model="evname"/> <button v-on:[evname]="test" >点击</button> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return { score:69, name:false, arr:[1,2,3,4], list:[{ name:'君易',id: 1 },{ name:'木易',id: 1 },{ name:'曦曦',id:1 }], hobby:[{ name:'洗浴',id: 1 },{ name:'按摩',id: 2 },{ name:'SPA',id:3 }], evname:'click' }; },methods:{ test(){ alert("嘻嘻，你好啊"); } } }); </script> </body> </html>
效果
会根据你输入框内的字段判断是那个事件并执行该事件的效果
五、过滤器
1. 局部过滤器
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>Vue-过滤器</title> </head> <body> <div id="app"> <p>局部过滤器</p> 未使用： {{msg}} <br /> 使用后：{{msg | filterA}} </div> <script type="text/javascript"> new Vue({ el:'#app', filters:{ 'filterA':function(x){ return x.substring(0,6); } }, data(){ return { msg:"木易与曦曦，愿相伴于一生" }; } }); </script> </body> </html>
效果
2.局部过滤器串联使用
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>Vue-过滤器</title> </head> <body> <div id="app"> <p>局部过滤器串联使用</p> 未使用： {{msg}} <br /> 使用后：{{msg | filterA | filterB}} </div> <script type="text/javascript"> new Vue({ el:'#app', filters:{ 'filterA':function(x){ return x.substring(0,6); }, 'filterB':function(x){ return x.substring(2,5); } }, data(){ return { msg:"木易与曦曦，愿相伴于一生" }; } }); </script> </body> </html>
效果
3. 局部过滤器传参
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>Vue-过滤器</title> </head> <body> <div id="app"> <p>局部过滤器传参</p> 未使用： {{msg}} <br /> 使用后：{{msg | filterC(3,10)}} </div> <script type="text/javascript"> new Vue({ el:'#app', filters:{ 'filterA':function(x){ return x.substring(0,6); }, 'filterB':function(x){ return x.substring(2,5); }, 'filterC':function(x,begin,end){ return x.substring(begin,end); } }, data(){ return { msg:"木易与曦曦，愿相伴于一生" }; } }); </script> </body> </html>
效果
4. 全局过滤器
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <script type="text/javascript" src="date.js" charset="utf-8"></script> <title>Vue-过滤器</title> </head> <body> <div id="app"> <p>全局过滤器使用</p> 未使用： {{time}} <br /> 使用后：{{time | fmtDateFilter}} </div> <script type="text/javascript"> Vue.filter('fmtDateFilter',function(value){ return fmtDate(value); }) new Vue({ el:'#app', filters:{ 'filterA':function(x){ return x.substring(0,6); }, 'filterB':function(x){ return x.substring(2,5); }, 'filterC':function(x,begin,end){ return x.substring(begin,end); } }, data(){ return { msg:"木易与曦曦，愿相伴于一生", time:new Date() }; } }); </script> </body> </html>
效果
六、计算属性及监听属性
1. 计算属性
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <script type="text/javascript" src="date.js" charset="utf-8"></script> <title>Vue-过滤器</title> </head> <body> <div id="app"> <p>计算属性</p> 价格：<input v-model="price" /> 数量：<input v-model="count" /> 总额:¥{{sum}} </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return { price:88, count:5 }; }, computed:{ sum:function(){ return this.price*this.count; } } }); </script> </body> </html>
效果
2. 监听属性
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <script type="text/javascript" src="date.js" charset="utf-8"></script> <title>Vue-过滤器</title> </head> <body> <div id="app"> <p>监听属性</p> 千米:<input v-model="km"/><br /> 米： <input v-model="m"/> <br /> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return { km:1, m:1000 }; }, watch:{ km:function(v){ this.m=parseInt(v)*1000; }, m:function(v){ this.km=parseInt(v)/1000; } } }); </script> </body> </html>
效果
注：
计算属性是单方面一方影响另一方；而监听属性是双方影响双方，一方数据发生改动则另一方也发生改动。
七、模拟购物车案例
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 导入js依赖文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>君易商城</title> <style> table{ border:1px solid darkseagreen; border-collapse: collapse; /* 合并边框 */ } td { border: 1px solid black; /* 设置边框样式、宽度和颜色 */ } </style> </head> <body style="text-align: center;"> <h1>君易商城购物车</h1> <div id="app"> <table cellpadding=0 style="width: 100%;"> <thead> <tr> <th>商品名</th> <th>商品价格</th> <th>数量</th> <th>小计</th> </tr> </thead> <tbody> <tr> <td>机械革命键盘</td> <td>{{jppri}}</td> <td> <input type="text" v-model="jp"/> </td> <td>{{jpsum}}</td> </tr> <tr> <td>雷蛇鼠标</td> <td>{{sbpri}}</td> <td> <input type="text" v-model="sb"> </td> <td>{{sbsum}}</td> </tr> <tr> <td>雷神911</td> <td>{{lspri}}</td> <td> <input type="text" v-model="ls"> </td> <td>{{lssum}}</td> </tr> <tr> <td colspan="3" style="text-align: right;">总计</td> <td>¥{{ssum}}</td> </tr> </tbody> </table> </div> </body> <script type="text/javascript"> new Vue({ el:'#app', data(){ return { jppri: 299, sbpri: 99, lspri: 19999, jp: 2, sb: 2, ls: 1, } }, computed:{ jpsum:function(){ return this.jppri*this.jp; }, sbsum:function(){ return this.sbpri*this.sb; }, lssum:function(){ return this.lspri*this.ls; }, ssum:function(){ return this.jpsum+this.sbsum+this.lssum; } }, }); </script> </body> </html>
效果
本期的分享到此结束，希望老铁三连支持一波
