一.插值⭐
1.1 文本插值
<head> <meta charset="utf-8"> <title>插值</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </head> <body> <!-- 定义边界 --> <div id="contect"> {{msg}} </div> <script type="text/javascript"> new Vue({ el:"#contect", data(){ return{ msg:"hello CSDN" } } }) </script> </body>
效果:
1.2 html
html文本需要使用 v-html来实现效果
<body> <!-- 定义边界 --> <div id="contect"> 文本: {{msg}} <br> html解析:<b v-html="msg2"></b> </div> <script type="text/javascript"> new Vue({ el:"#contect", data(){ return{ msg:"hello CSDN", msg2:"<span style='color: deeppink'> 我是佩奇</span>" } } }) </script> </body>
效果:
1.3 属性
属性要借用 :Class来实现属性的转换
<style type="text/css"> .f30{ font-size: 30px; } </style> </head> <body> <!-- 定义边界 --> <div id="contect"> 文本: {{msg}} <br> html解析:<b v-html="msg2"></b> <br> 属性:<b :class="msg3" v-html="msg2"></b> <br> </div> <script type="text/javascript"> new Vue({ el:"#contect", data(){ return{ msg:"hello CSDN", msg2:"<span style='color: deeppink'> 我是佩奇</span>", msg3:"f30" } } }) </script>
效果:
1.4 表达式
有计算,截取字段,以及三元运算符
<body> <!-- 定义边界 --> <div id="contect"> 文本: {{msg}} <br> html解析:<b v-html="msg2"></b> <br> 属性:<b :class="msg3" v-html="msg2"></b> <br> 表达式:{{num+1}} <br> 截取:{{warn.substr(0,2)}}<br> <input v-model="ok"/> {{ok==1?"我是乔治":"我是佩奇"}} </div> <script type="text/javascript"> new Vue({ el:"#contect", data(){ return{ msg:"hello CSDN", msg2:"<span style='color: deeppink'> 我是佩奇</span>", msg3:"f30", num:6, warn:"你好,我是乔治", ok:1 } } }) </script>
效果:
二.指令⭐
2.1 v-if/v-else-if/v-else的使用
相当于以前的 if...else..
<!-- 定义边界 --> <div id="contect"> <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="">成功啦!你真棒!</b><br > 小于60 不及格(落后了哦~🙂)<br > 60-70 及格(加油!!💪)<br > 70-80 一般(还差一点哦~)<br > 80-90 良好(就只有一点点啦!💪)<br > 大于90 优秀(成功啦!你真棒!)<br > </div>
效果:
2.2 v-if 与v-show的区别
v-if 是"条件渲染"的指令,它会根据条件的真假来动态地添加或删除元素及其对应的组件
v-show 是"条件显示"的指令,它会根据条件的真假来显示或隐藏元素。无论条件是真是假,元素始终存在于 DOM 中,只是通过 CSS 控制其显示状态。
2.3 v-for的使用
<!-- 定义边界 --> <div id="contect"> <p> v-for的使用</p> <i v-for="u in users ">{{u}} </i> </div> <script type="text/javascript"> new Vue({ el:"#contect", data(){ return{ users:[{ name:"佩奇",id:1 },{ name:"乔治",id:2 },{ name:"珊迪",id:3 }] } } }) </script>
效果:
2.4 下拉框的使用
<body> <!-- 定义边界 --> <div id="contect"> <p> 下拉框的使用</p> <select> <option v-for=" u in users" :value="u.id"> {{u.name}} </option> </select> </div> <script type="text/javascript"> new Vue({ el:"#contect", data(){ return{ users:[{ name:"佩奇",id:1 },{ name:"乔治",id:2 },{ name:"珊迪",id:3 }] } } }) </script> </body>
效果:
2.5 复选框的使用
<body> <!-- 定义边界 --> <div id="contect"> <p>复选框的使用</p> <div v-for="u in users" > <input type="checkbox" name="users" :value="u.id"/>{{u.name}} </div> </div> <script type="text/javascript"> new Vue({ el:"#contect", data(){ return{ users:[{ name:"佩奇",id:1 },{ name:"乔治",id:2 },{ name:"珊迪",id:3 }] } } }) </script> </body>
效果:
2.6 动态参数 --双击与单击
它们的不同就是下面圈出来的
效果:第一个按钮是单击,第二个是双击
三.过滤器
3.1 局部过滤器
局部过滤器是在组件内部定义的过滤器,只在该组件的模板中可用。
以下代码中有三个局部过滤器的使用,基本上的作用是差不多的,我觉得可以用数学中的交集并集来理解,或者是用来截取其中一段文字来理解
<!-- 定义边界 --> <div id="contect"> <p>局部过滤器基本应用</p> {{msg | filterA}} <p>局部过滤器串行使用</p> {{msg}}<br> {{msg | filterA}}<br> {{msg | filterA|filterB}}<br> <p>局部过滤器传参</p> {{msg | filterC(2,6)}} </div> <script type="text/javascript"> new Vue({ el:"#contect", filters:{ 'filterA':function(v){//v表示要过滤的内容 return v.substring(0,6); }, 'filterB':function(v){ return v.substring(2,4); }, 'filterC':function(v,begin,end){ return v.substring(begin,end); } }, data(){ return{ msg:"这是我的弟弟乔治" } } }) </script>
效果:
3.2 全局过滤器
全局过滤器是在 Vue 实例化之前定义的过滤器,它可以在所有组件的模板中使用。
下面主要是一个时间的处理, 首先写一个时间的js---data.js
//给Date类添加了一个新的实例方法format Date.prototype.format = function (fmt) { //debugger; var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; }; function fmtDate(date, pattern) { var ts = date.getTime(); var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss"); if (pattern) { d = new Date(ts).format(pattern); } return d.toLocaleString(); };
接着将其引入我们的项目中
<!-- 定义边界 --> <div id="contect"> <p>全局过滤器</p> {{time}}<br /> {{time|fmtDataFilter}} </div> <script type="text/javascript"> Vue.filter('fmtDataFilter',function(value){ return fmtDate(value); }); new Vue({ el:"#contect", data(){ return{ msg:"这是我的弟弟乔治", time:new Date() } } }) </script>
效果:
四.计算属性和监听器(监听属性)⭐
计算属性是单方影响,而监听属性是双方影响
4.1 计算属性
<body> <!-- 定义边界 --> <div id="contect"> <!-- 单方影响 --> 计算属性: 单价:<input v-model="price"/> 数量:<input v-model="num"/> 小计:{{count}}<br /> </div> <script type="text/javascript"> new Vue({ el:"#contect", data(){ return{ price:99, num:1, m:1000, km:1 }; }, computed:{//computed计算属性 count:function(){ return this.price * this.num } } }) </script> </body>
效果:
4.2 监听属性
<body> <!-- 定义边界 --> <div id="contect"> <!-- 双方影响 --> 监听属性:<br /> 千米:<input v-model="km" /><br /> 米:<input v-model="m"/> </div> <script type="text/javascript"> new Vue({ el:"#contect", data(){ return{ m:1000, km:1 }; }, watch:{//watch监听属性 km:function(v){ //v是被监听的属性 km this.m=parseInt(v)*1000 }, m:function(v){ //v是被监听的属性 m this.km=parseInt(v)/1000 } } }) </script> </body>
效果:
五.购物车案例
运用上面的知识搭建一个简单的购物车界面,并实现单价数量以及总价的改变
下面是一个界面,用了三个<tr>
<div id="contect"> <h2>购物车</h2> <table border="1"> <thead> <tr> <th>商品</th> <th>单价</th> <th>数量</th> <th>小计</th> </tr> </thead> <tbody> <tr> <td>怡宝</td> <td>{{price1 }}</td> <td> <button @click="gooddel1">-</button> {{num1}} <button @click="goodadd1">+</button> </td> <td>{{count1}}</td> </tr> <tr> <td>百岁山</td> <td>{{price2 }}</td> <td> <button @click="gooddel2">-</button> {{ num2}} <button @click="goodadd2">+</button> </td> <td>{{count2}}</td> </tr> <tr> <td>农夫山泉</td> <td>{{price3 }}</td> <td> <button @click="gooddel3">-</button> {{ num3}} <button @click="goodadd3">+</button> </td> <td>{{count3}}</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总价:</td> <td>{{total}}</td> </tr> </tfoot> </table> </div>
接下来,写方法实现:
把价格和数量首先是定死的,为了演示,接着写加号的点击事件,和减号的点击事件,以及小计和总计的计算
<script> new Vue({ el: '#contect', data: { price1:30, price2:10, price3:20, num1:1, num2:1, num3:1 }, computed: { count1:function(){ return this.price1 * this.num1; }, count2:function(){ return this.price2 * this.num2; }, count3:function(){ return this.price3 * this.num3; }, total:function(){ return this.count1 + this.count2 +this.count3; } }, methods: { goodadd1: function() { return this.num1++; }, goodadd2: function() { return this.num2++; }, goodadd3: function() { return this.num3++; }, gooddel1: function() { if(this.num1>1){ return this.num1--; } }, gooddel2: function() { if(this.num2>1){ return this.num2--; } }, gooddel3: function() { if(this.num3>1){ return this.num3--; } }, } }); </script>
现在来看效果吧!!