Vue基础语法知识
在这篇文章中，我们将介绍Vue.js的基础语法知识。Vue.js是一种用于构建用户界面的现代JavaScript框架，它采用了MVVM（Model-View-ViewModel）的设计模式。本文将详细讨论以下主题：
一、插值
1.1 文本
在Vue中，我们可以使用双大括号{{}}来进行文本插值。例如，{{ message }}可以将message变量的值显示在页面上。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <style type="text/css"> .f30{ font-size: 30px; } </style> </head> <body> <div id="app"> <p>文本</p> {{msg}} </div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { msg:'hello', }; } }); </script> </body> </html>
1.2 v-html
如果需要在页面中渲染HTML代码，可以使用v-html指令。通过将数据属性中的HTML代码绑定到元素上，Vue会将其解析并渲染出来。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <style type="text/css"> .f30{ font-size: 30px; } </style> </head> <body> <div id="app"> <p>文本</p> {{msg}} <b :class="msg2" v-html="msg1"></b> </div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { msg:'hello', msg1:'<span style="color:yellow"> hello 小b</span>' }; } }); </script> </body> </html>
1.3数据双向绑定(v-model)
- 绑定多个复选框
如果需要绑定多个复选框的选中状态，可以将一个数组作为v-model的值，并使用value属性指定每个复选框的值。
绑定下拉框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <P>v-if/v-else-if/v-else/</P> <input v-model="score"/><br> <option v-for="h in hobby" :value="h.id">{{h.name}}</option> </div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { score:69, isShow:false, arr: [1, 2, 3, 4], likes: [{name:'lb',id:1}, {name:'lx',id:2}, {name:'ld',id:3}], hobby:[{name:'洗浴',id:1}, {name:'洗头',id:2}, {name:'大保健',id:3}], evname:'click', }; } ,methoed:{ test(){ alert('点我试试') } } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <div v-for="h in hobby"> <input type="checkbox"/ name="hobby":value="h.id">{{h.name}} </div> </div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { score:69, isShow:false, arr: [1, 2, 3, 4], likes: [{name:'lb',id:1}, {name:'lx',id:2}, {name:'ld',id:3}], hobby:[{name:'洗浴',id:1}, {name:'洗头',id:2}, {name:'大保健',id:3}], evname:'click', }; } ,methoed:{ test(){ alert('点我试试') } } }); </script> </body> </html>
二、指令
2.1 v-if|v-else|v-else-if
通过v-if、v-else和v-else-if指令，我们可以根据条件来控制元素的显示和隐藏。根据不同的条件，只会渲染符合条件的元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </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="">优秀</b> <b v-if="isShow">展示</b> <b v-show="isShow">展示</b> </div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { score:69, isShow:false, arr: [1, 2, 3, 4], likes: [{name:'lb',id:1}, {name:'lx',id:2}, {name:'ld',id:3}], hobby:[{name:'洗浴',id:1}, {name:'洗头',id:2}, {name:'大保健',id:3}], evname:'click', }; } ,methoed:{ test(){ alert('点我试试') } } }); </script> </body> </html>
2.2 v-show
与v-if类似，v-show指令也可以根据条件来控制元素的显示和隐藏。不同之处在于，使用v-show时，元素始终会被渲染到页面中，只是通过CSS的display属性控制其可见性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <P>v-if/v-else-if/v-else/</P> <b v-if="isShow">展示</b> <b v-show="isShow">展示</b> </div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { score:69, isShow:false, arr: [1, 2, 3, 4], likes: [{name:'lb',id:1}, {name:'lx',id:2}, {name:'ld',id:3}], hobby:[{name:'洗浴',id:1}, {name:'洗头',id:2}, {name:'大保健',id:3}], evname:'click', }; } ,methoed:{ test(){ alert('点我试试') } } }); </script> </body> </html>
2.3 v-for
通过v-for指令，我们可以遍历数组或对象，并为每个元素生成相应的内容。可以使用v-for="(item, index) in items"的语法，来获取遍历的项和索引。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <br> <option v-for="h in hobby" :value="h.id">{{h.name}}</option> <div v-for="h in hobby"> <input type="checkbox"/ name="hobby":value="h.id">{{h.name}} </div> </div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { score:69, isShow:false, arr: [1, 2, 3, 4], likes: [{name:'lb',id:1}, {name:'lx',id:2}, {name:'ld',id:3}], hobby:[{name:'洗浴',id:1}, {name:'洗头',id:2}, {name:'大保健',id:3}], evname:'click', }; } ,methoed:{ test(){ alert('点我试试') } } }); </script> </body> </html>
2.4 动态参数
Vue的指令中，可以使用动态参数来传递变量或表达式。通过使用方括号将指令参数括起来，可以动态地绑定不同的值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> </div> <input v-model="evname"/> <button v-on:[evname]="test">点我</button> </div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { score:69, isShow:false, arr: [1, 2, 3, 4], likes: [{name:'lb',id:1}, {name:'lx',id:2}, {name:'ld',id:3}], hobby:[{name:'洗浴',id:1}, {name:'洗头',id:2}, {name:'大保健',id:3}], evname:'click', }; } ,methoed:{ test(){ alert('点我试试') } } }); </script> </body> </html>
三、过滤器
3.1 局部过滤器
Vue允许我们定义局部过滤器，用于对数据进行格式化和处理。通过在Vue实例中定义filters对象，我们可以创建自定义的过滤器函数，并在模板中使用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <script src="date.js"></script> <script src="jquery.js"></script> </head> <body> <div id="app"> <P>v-if/v-else-if/v-else/</P> {{msg}} <br> {{msg|fa}} <br> {{msg|fa|fb}} <br> {{msg|fc(3,10)}} </div> <script type="text/javascript"> Vue.filter('filterName', function (value) { return fmtDate(value) }); new Vue ({ el:'#app', filters:{ 'fa':function(v){ return v.substring(0,6); }, 'fb':function(v){ return v.substring(2,4); }, 'fc':function(v,begin,end){ return v.substring(begin,end); }, }, data(){ return { msg:'你的小狗没有了，你真的该死，本地的大部分。。。', time:new Date(), }; } }); </script> </body> </html>
3.2 全局过滤器
除了局部过滤器之外，Vue还提供了全局过滤器的功能。通过在Vue实例的filters属性中定义过滤器函数，可以在整个应用程序范围内使用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <script src="date.js"></script> <script src="jquery.js"></script> </head> <body> <div id="app"> <br> {{time}} {{time|filterName}} </div> <script type="text/javascript"> Vue.filter('filterName', function (value) { return fmtDate(value) }); new Vue ({ el:'#app', filters:{ 'fa':function(v){ return v.substring(0,6); }, 'fb':function(v){ return v.substring(2,4); }, 'fc':function(v,begin,end){ return v.substring(begin,end); }, }, data(){ return { msg:'你的小狗没有了，你真的该死，本地的大部分。。。', time:new Date(), }; } }); </script> </body> </html>
四、计算属性&监听属性
4.1 计算属性
计算属性是一种利用已有的数据生成新数据的方式。通过在Vue实例中定义计算属性，我们可以根据需要对数据进行处理，并在模板中使用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> {{score}} 单价：<input v-model="price"> 数量：<input v-model="num"> 小计{{count}} </div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { price:79, num:1, m:1000, km:1 }; }, computed:{ count:function(){ return this.price*this.num; } }, watch:{ km:function(v){ this.m=parseInt(v)*1000; }, m:function(v){ this.km=parseInt(v)/1000; } , } }); </script> </body> </html>
4.2 监听属性
当我们需要在数据发生变化时执行一些额外的逻辑时，可以使用监听属性。通过在Vue实例中定义watch属性，我们可以监视数据的变化，并在变化时执行相应的操作。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <br> 千米：<input v-model="km"> <br> 米：<input v-model="m"> </div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { price:79, num:1, m:1000, km:1 }; }, computed:{ count:function(){ return this.price*this.num; } }, watch:{ km:function(v){ this.m=parseInt(v)*1000; }, m:function(v){ this.km=parseInt(v)/1000; } , } }); </script> </body> </html>
五、案例实操
5.1 购物车案例
通过以上所学的Vue基础知识，我们可以创建一个简单的购物车页面。在这个案例中，我们将使用插值、指令、过滤器等技术来实现购物车列表的展示、商品数量的增加和减少，以及总价的计算。
<!DOCTYPE html> <html> <head> <title>购物车</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <style> /* 添加样式表 */ body { font-family: Arial, sans-serif; background-color: #f7f7f7; } #app { margin: 20px; } h1 { text-align: center; color: #333; margin-bottom: 20px; } table { border-collapse: collapse; width: 100%; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } th, td { padding: 10px; text-align: left; } th { background-color: #f7f7f7; } tr:nth-child(even) { background-color: #f2f2f2; } input[type="number"] { width: 50px; padding: 5px; } button { background-color: #4caf50; color: #fff; border: none; padding: 8px 16px; cursor: pointer; } button:hover { background-color: #45a049; } </style> </head> <body> <div id="app"> <h1>购物车</h1> <table> <thead> <tr> <th>商品</th> <th>价格</th> <th>数量</th> <th>小计</th> </tr> </thead> <tbody> <tr v-for="(item, index) in cartItems"> <td>{{ item.name }}</td> <td>{{ item.price }}</td> <td> <input type="number" v-model="item.shu" min="0" @input="updateSubtotal(item)"> </td> <td>{{ item.subtotal }}</td> <td> <button @click="increaseshu(item)">增加</button> <button @click="decreaseshu(item)">减少</button> </td> </tr> </tbody> <tr> <td colspan="3">总计</td> <td>{{ total }}</td> </tr> </table> </div> <script> new Vue({ el: '#app', data: { cartItems: [ { name: '娃娃', price: 10, shu: 1, subtotal: 10 }, { name: '小熊', price: 20, shu: 2, subtotal: 40 }, { name: '大熊', price: 30, shu: 3, subtotal: 90 } ] }, computed: { total: function() { return this.cartItems.reduce((sum, item) => sum + item.subtotal, 0); } }, methods: { updateSubtotal: function(item) { item.subtotal = item.price * item.shu; }, increaseshu: function(item) { item.shu++; this.updateSubtotal(item); }, decreaseshu: function(item) { if (item.shu > 0) { item.shu--; this.updateSubtotal(item); } } } }); </script> </body> </html>
