一.插值
什么是插值
在Vue中，插值是一种用于将数据绑定到模板中的表达方式。Vue使用双大括号({{}})作为插值的语法，允许将Vue实例中的数据动态地显示在模板中。
使用插值可以在模板中嵌入Vue实例中的数据，如以下示例所示：
<div> <p>{{ message }}</p> <span>{{ count }}</span> </div>
上述示例中，
{{ message }}和{{ count }}分别是Vue实例中的message和count属性的插值展示。当Vue实例中的message和count属性的值发生变化时，对应的插值内容也会自动更新。插值不仅可以展示简单的变量，还可以进行表达式运算。例如：
<div> <p>{{ message.toUpperCase() }}</p> <span>{{ count * 2 }}</span> </div>
在上述示例中，
message.toUpperCase()将调用Vue实例中message属性的toUpperCase()方法来将字符串转为大写形式，而count * 2将对Vue实例中的count属性进行乘法运算。需要注意的是，插值仅能用于HTML文本内容中，而不能用于HTML属性中。Vue提供了指令(
v-bind)来将数据绑定到HTML属性上。总之，Vue的插值是一种非常方便的语法，可以将Vue实例中的数据动态地显示在模板中，实现数据和界面的绑定。
建立一个html来编写插值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 1.导入依赖 --> <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> <title>插值</title> <style type="text/css"> .f30{ font-size: 30px; } </style> </head> <body> <!-- 2.定义vue所管理的边界，有且只有一个根节点 --> <div id="app"> <p>文本</p> {{msg}} <p>html解析</p> {{msg2}} <br> <b :class="msg3" v-html="msg2"></b> <p>表达式</p> {{num+1}} {{warn.substr(2,3)}} <input v-model="ok" /> {{ok==1 ? '很漂亮' : '上不上，看上了'}} </div> <script type="text/javascript"> // 构建vue实例并绑定边界 new Vue({ // el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 el:"#app", // Vue 实例的数据对象，用于给 View 提供数据 data(){ return{ msg:'放下屠刀', msg2:'<span style="color:yellow">放下屠刀</span>', msg3:'f30', num:6, warn:'来美美了', ok:1 } } }) </script> </body> </html>
输出结果
二.指令
什么是指令
vue的指令是一种特殊的HTML属性，用于在Vue实例中对DOM元素进行操作和控制。根据用途的不同，vue的指令可以分为以下几类：内容渲染指令、属性绑定指令、事件绑定指令、双向绑定指令、条件渲染指令和列表渲染指令。
内容渲染指令用于将数据动态地渲染到DOM中，常见的内容渲染指令有v-text、v-html和v-show。
属性绑定指令用于将数据绑定到DOM元素的属性上，常见的属性绑定指令有v-bind。
事件绑定指令用于监听DOM元素的事件，并在事件触发时执行相应的操作，常见的事件绑定指令有v-on。
双向绑定指令用于实现数据的双向绑定，即数据的改变会自动更新到DOM中，DOM的改变也会自动更新到数据中，常见的双向绑定指令有v-model。
条件渲染指令用于根据条件来渲染或隐藏DOM元素，常见的条件渲染指令有v-if、v-else-if和v-else。
列表渲染指令用于根据数组或对象的数据来渲染列表，常见的列表渲染指令有v-for。
以上是关于vue的指令的概念和分类的简要介绍。
建立一个html来编写指令
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 1.导入依赖 --> <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> <title>指令</title> </head> <body> <!-- 2.定义vue所管理的边界，有且只有一个根节点 --> <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-if="score >= 60 && score <70">及格</b> <b v-if="score >= 70 && score <80">一般</b> <b v-if="score >= 80 && score <90">良好</b> <b v-if="">优秀</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> </div> <script type="text/javascript"> // 构建vue实例并绑定边界 new Vue({ // el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 el:"#app", // Vue 实例的数据对象，用于给 View 提供数据 data(){ return{ score:60, isshow:false, arr:[1,2,3,4], users:[{ name:'jj', id:1 },{ name:'dd', id:2 },{ name:'kk', id:3 },{ name:'oo', id:4 }], hobby:[{ name:'打篮球', id:1 },{ name:'rap', id:2 },{ name:'唱歌', id:3 },{ name:'跳舞', id:4 }] } } }) </script> </body> </html>
输出结果
动态参数
<div id="app"> <p>动态参数</p> <input v-model="evname"/> <button v-on:[evname]="test" >点我</button> </div> <script type="text/javascript"> // 构建vue实例并绑定边界 new Vue({ // el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 el:"#app", // Vue 实例的数据对象，用于给 View 提供数据 data(){ return{ evname:'click' } }, methods:{ test(){ //单击事件,双击事件 alert('快来快来'); } } }) </script>
输出结果
三.过滤器
什么是过滤器
过滤器是一种常用的设计模式，用于在处理请求或响应时对数据进行过滤或修改。在Java中，过滤器通常用于Web开发中的请求过滤和响应处理。通过将多个过滤器链接在一起形成一个过滤器链（FilterChain），请求或响应可以按照一定顺序经过多个过滤器的处理，直到达到最终的目标资源。过滤器链的每个过滤器都可以在处理请求或响应时进行相关的操作或修改。FilterChain接口定义了过滤器链的基本方法，其中包括doFilter()方法，用于执行下一个过滤器或目标资源的处理。
建立一个html来编写过滤器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 1.导入依赖 --> <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> <script src="date.js" type="text/javascript" charset="utf-8"></script> <title>过滤器</title> </head> <body> <!-- 2.定义vue所管理的边界，有且只有一个根节点 --> <div id="app"> <p>局部过滤器基本应用</p> {{msg}}<br /> {{msg | filterA}} <p>局部过滤器串行使用</p> {{msg}}<br /> {{msg | filterA}}<br /> {{msg | filterA | filterB}} <p>局部过滤器传参</p> {{msg | filterC(3,10)}}<br /> <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(v){ return v.substring(0,6); }, 'filterB':function(v){ return v.substring(2,5); }, '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(); };
输出结果
4.计算属性&监听属性
什么是计算属性监听属性
计算属性是Vue的一个特性，它具有计算能力，相当于一个函数。它可以将计算结果缓存作为一个属性使用。计算属性需要在
methods或者computed中以方法（函数）的形式定义。之后可以直接使用属性名代替重复的计算，实现代码复用。计算属性会自动重新求值，只要计算原理数据任何一项发生了变化，计算属性就会立即更新，实现动态计算。计算属性支持缓存，当数据源发生变化时，会重新计算。然而，计算属性不支持异步，无法监听异步操作导致的数据变化。如果一个属性是由其他属性计算而来，可以使用计算属性实现一对一或多对一的关系。监听属性是当被监听的属性发生变化时，回调函数会自动调用，进行相关操作。被监听的属性必须存在，才能进行监听。Vue中的
watch默认不会检测对象内部值的改变，只会检测一层的改变。但是通过配置deep:true，可以监听对象内部值的多层改变。计算属性是单向影响
监听属性是双向影响
建立一个html来编写 计算属性&监听属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 1.导入依赖 --> <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> <title>计算属性监听属性</title> </head> <body> <!-- 2.定义vue所管理的边界，有且只有一个根节点 --> <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:88, 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>
输出结果
五.购物车案例
使用HTML编写购物车
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 1.导入依赖 --> <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> <title>枪械购物车</title> </head> <body> <div style="margin-left: 400px;"> <template id="app" > <div class="shopping-cart"> <h2>枪械购物车</h2> <table border="1"> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> </tr> </thead> <tbody> <tr v-for="(product, index) in products" :key="index"> <td>{{ product.name }}</td> <td>{{ product.price }}</td> <td> <button @click="decreaseQuantity(index)" :disabled="product.quantity === 1">-</button> {{ product.quantity }} <button @click="increaseQuantity(index)">+</button> </td> <td>{{ product.price * product.quantity }}</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总计</td> <td>{{ total }}</td> </tr> </tfoot> </table> </div> </template> </div> <script> new Vue({ el:'#app', data() { return { products: [ { name: "m416", price: 99, quantity: 1 }, { name: "awm", price: 78, quantity: 1 }, { name: "akm", price: 90, quantity: 1 }, ], }; }, computed: { total() { return this.products.reduce((total, product) => { return total + product.price * product.quantity; }, 0); }, }, methods: { increaseQuantity(index) { this.products[index].quantity++; }, decreaseQuantity(index) { if (this.products[index].quantity > 1) { this.products[index].quantity--; } }, }, }) </script> </body> </html>
测试结果
