插值
1.文本
2.html
3.属性
4.class、style绑定
5.表达式
双大括号插值（Mustache语法）：
双大括号插值是Vue中最常用的插值语法，使用双大括号
{{ }}将表达式包裹起来，表达式将会被求值后显示在HTML中。
{{msg}}
案列
源码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>插值</title> <style type="text/css"> .f30{ font-size: 30px; } </style> </head> <body> <div id="app"> <p>文本</p> {{msg}} <p>thml解析</p> {{msg2}}<br> <b :class="msg3" 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:'沸洋洋你个臭傻逼', msg2:'<span style="color:yellowgreen">我可是懒大王</span>', msg3:'f30', num:5, warn:'靓仔闪亮登场', ok:1 }; } }); </script> </body> </html>
指令
在Vue中，指令是用于将特定行为应用于DOM元素的特殊属性。Vue提供了许多内置指令，可以用于处理常见的DOM操作和数据绑定
v-bind插值：v-bind指令用于在HTML属性中插入动态的数据。可以简写为:。
<img :src="imageSrc">
上述代码中，:src将会把imageSrc变量的值作为src属性的值进行插值。
v-on插值：v-on指令用于在HTML事件处理程序中插入动态的方法。可以简写为@。
<button @click="handleClick">Click Me</button>
上述代码中，@click将会将handleClick方法插入到click事件处理程序中。
v-html插值：v-html指令用于将数据作为原始HTML插入到元素中。
<div v-html="htmlString"></div>
上述代码中，htmlString变量的值将会被作为原始HTML插入到<div>元素之中。
v-text插值：v-text指令用于替代双大括号插值，将指定的数据直接作为文本内容插入到元素中。
<p v-text="message"></p>
上述代码中，message变量的值将会作为<p>元素的文本内容。
源码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>指令</title> </head> <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="">靓仔</b> 60以下 麻花佬 60-70 屌丝 70-80 叼毛 80-90 良好青年 90以上 靓仔 <p>v-show</p> v-if与v-show的区别？<br> <b v-if="isSHow">展示</b> <b v-show="isSHow">展示</b> <p>v-for</p> <i v-for="a in arr">{{a}} </i> <i v-for="i,u in users"> {{i}}</i> <select> <option v-for="h in hobby" :value="h.id">{{h.name}}</option> </select> <div id="" v-for="h in hobby"> <input type="checkbox" name="hobby" :value="h.id" />{{h.name}} </div> <p>动态参数</p> <input v-model="evname" /> <button v-on:[evname]="test">点我</button> </div> <body> <script type="text/javascript"> new Vue({ el:"#app", data(){ return { score:88, isSHow:false, arr: [1, 2, 3, 4], users: [{ name: 'sz', id: 1 },{ name: 'sd', id: 2 },{ name: 'sn', id: 3 },{ name: 'sb', id: 4 }], hobby:[{ name: '喜羊羊', id: 1 },{ name: '美羊羊', id: 2 },{ name: '沸羊羊', id: 3 },{ name: '懒大王', id: 4 }], evname:'click' }; } ,methods:{ test(){ //单击事件，双击事件 alert('点我你试试！！！') } } }); </script> </body> </html>
过滤器
在Vue.js中，过滤器（Filters）是一种用于格式化文本输出的特殊函数。它可以应用于绑定表达式中的数据，在渲染过程中将数据转换为所需的格式。
源码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <script src="date.js" type="text/javascript" charset="utf-8"></script> <title>过滤</title> </head> <div id="app"> <P>局部过滤器基本应用</P> {{msg}}<br /> {{msg | filterA}} <P>局部过滤器串行使用</P> {{msg}}<br /> {{msg | filterB}} <P>局部过滤器传参</P> {{msg | filterC(3,10)}}<br /> <p>全局过滤器</p> {{time}}<br /> {{time | fmtDateFilter}} </div> <body> <script type="text/javascript"> Vue.filter('fmtDateFilter', function (value) { return fmtDate(value); }); new Vue({ el:'#app', filters:{ 'filterA':function(v){ return v.substring(0,6); }, 'filterB':function(v){ return v.substring(3,8); }, 'filterC':function(v,begin,end){ return v.substring(begin,end); } }, data(){ return { msg: '沸羊羊你个臭傻逼，俺可是懒大王', time:new Date() }; } ,methods:{ test(){ //单击事件，双击事件 alert('点我你试试！！！') } } }); </script> </body> </html>
date.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(); };
计算属性和监听属性
计算属性（Computed）：计算属性是根据其他属性的值计算得出的属性，它会根据依赖的属性自动更新。
监听属性（Watch）：监听属性允许你在某个属性发生变化时执行自定义的逻辑。
源码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>计算属性监听属性</title> </head> <body> <div id="app"> <p>计算属性</p> 单价：<input v-model="price"> 数量：<input v-model="num"> 小计：{{count}} <p>监听属性</p> 千米：<input v-model="km" /><br /> 米：<input v-model="m" /> </div> <script type="text/javascript"> new Vue({ el:"#app", data(){ return { price:66, num:1, m:1000, km:1 }; }, computed:{ count:function(){ return this.price * this.num; } }, watch:{ km:function(v){ //v指的是被监听的属性是，是km this.m = parseInt(v) * 1000; }, m:function(v){ //v指的是被监听的属性是，是m this.km = parseInt(v) / 1000; } } }); </script> </body> </html>
计算属性跟监听属性的区别
计算属性和监听属性是Vue中用于处理数据变化的两种方法，它们的主要区别如下：
- 计算属性：
- 计算属性是Vue中的一个特殊属性，用于定义一个依赖其他属性计算得来的属性。
- 计算属性会根据它所依赖的属性的变化而自动重新计算，只有当依赖属性发生变化时，计算属性才会重新求值。
- 计算属性的值会被缓存起来，只有当依赖的属性发生变化时，才会重新计算。
- 监听属性：
- 监听属性是通过
watch选项来定义的，用于监听某个属性的变化，并在属性变化时执行特定的逻辑。- 监听属性需要显式地定义监听函数，并在函数中处理属性变化时的逻辑。
- 监听属性适用于需要监听并处理属性变化的情况，可以执行更复杂的逻辑，如异步操作或调用其他方法。
总结来说，计算属性适用于通过其他属性计算得到的属性值，而监听属性适用于需要监听并处理属性变化的情况。计算属性会自动计算并缓存值，而监听属性需要显式地定义监听函数来处理属性变化。
Vue购物车结算案列
结合我们当前学的内容简单的写一个结算
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <title>购物车</title> </head> <body> <div id="app"> <!-- 购物车内容 --> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> </tr> </thead> <tbody> <tr v-for="(item, index) in cartItems" :key="index"> <td>{{ item.name }}</td> <td>{{ item.price }}</td> <td> <button @click="decrement(index)">-</button> {{ item.quantity }} <button @click="increment(index)">+</button> </td> <td>{{ calculateSubtotal(item) }}</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总计：</td> <td>{{ calculateTotal() }}</td> </tr> </tfoot> </table> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { cartItems: [], // 购物车商品列表 }, methods: { // 减少数量 decrement(index) { if (this.cartItems[index].quantity > 1) { this.cartItems[index].quantity--; } }, // 增加数量 increment(index) { this.cartItems[index].quantity++; }, // 计算小计 calculateSubtotal(item) { return item.price * item.quantity; }, // 计算总计 calculateTotal() { let total = 0; for (let i = 0; i < this.cartItems.length; i++) { total += this.cartItems[i].price * this.cartItems[i].quantity; } return total; } }, mounted() { // 初始化购物车商品列表 // 可以根据实际情况从后端获取数据，并将数据赋值给cartItems this.cartItems = [ { name: 'ddv', price: 888, quantity: 1 }, { name: '鹤顶红', price: 1888, quantity: 2 }, { name: '奥里给', price: 8888, quantity: 3 }, ]; } }); </script> </body> </html>
