🎬 艳艳耶✌️：个人主页
🔥 个人专栏 ：《Spring与Mybatis集成整合》《springMvc使用》
⛺️ 生活的理想，为了不断更新自己 !
1.插值
1.1 文本
插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"
语法：
{{ 变量名/对象.属性名 }}
<p>文本</p> {{msg}} <br/>
<script type="text/javascript"> new Vue({ el:'#app', data(){ return{ msg:'hello a', } } }) </script>
结果：
1.2 v-v-html
v-html专门用来展示数据, 其作用和插值表达式类似但可以避免插值闪烁问题。
当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。
插值闪烁: 在数据未加载完成时，页面会显示出原始的{{}}, 过一会才会展示正常数据.
语法：
<p>html解析</p> {{msg2}}<br/>
区别：
v-text/{{变量名/对象.属性名}}：把数据当作纯文本显示.v-html：遇到html标签,会正常解析
1.3 数据双向绑定数据(v-model)
Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.
注意：
双向绑定, 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等
文本框/单选按钮/textarea, 绑定的数据是字符串类型
单个复选框, 绑定的是boolean类型
多个复选框, 绑定的是数组
select单选对应字符串，多选对应也是数组
1.4 属性（v-bind）
HTML属性中的值应使用v-bind指令
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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: 50px; } </style> </head> <body> <div id="app"> <!-- <p>文本</p> {{msg}} <br/> --> <p>html解析</p> {{msg2}}<br/> <b :class="msg3" v-html="msg2"></b> <!-- <p>表达式</p> {{num+1}} {{warn.substr(0,6)}} <input v-model="ok"/> {{ok==1? '闪开' :'不闪开'}} --> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return{ // msg:'hello a', msg2:'<span style="color:pink">玛卡玛卡，我是个小聪明</span>', msg3:'f30', // num:6, // warn:'公主驾到通通闪开', // ok:1 } } }) </script> </body> </html>
结果：
1.5 表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
代码：
<p>表达式</p> {{num+1}} {{warn.substr(0,6)}} <input v-model="ok"/> {{ok==1? '闪开' :'不闪开'}} num:6, warn:'公主驾到通通闪开', ok:1
结果：
1.6 class绑定
使用方式：v-bind:class="expression"
expression的类型：字符串、数组、对象
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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: 50px; } </style> </head> <body> <div id="app"> <!-- <p>文本</p> {{msg}} <br/> --> <p>html解析</p> {{msg2}}<br/> <b :class="msg3" v-html="msg2"></b> <!-- <p>表达式</p> {{num+1}} {{warn.substr(0,6)}} <input v-model="ok"/> {{ok==1? '闪开' :'不闪开'}} --> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return{ // msg:'hello a', msg2:'<span style="color:pink">玛卡玛卡，我是个小聪明</span>', msg3:'f30', // num:6, // warn:'公主驾到通通闪开', // ok:1 } } }) </script> </body> </html>
结果：
1.7 style绑定
v-bind:style="expression"
expression的类型：字符串、数组、对象
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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: 50px; } </style> </head> <body> <div id="app"> <!-- <p>文本</p> {{msg}} <br/> --> <p>html解析</p> {{msg2}}<br/> <b :class="msg3" v-html="msg2"></b> <!-- <p>表达式</p> {{num+1}} {{warn.substr(0,6)}} <input v-model="ok"/> {{ok==1? '闪开' :'不闪开'}} --> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return{ // msg:'hello a', msg2:'<span style="color:pink">玛卡玛卡，我是个小聪明</span>', msg3:'f30', // num:6, // warn:'公主驾到通通闪开', // ok:1 } } }) </script> </body> </html>
结果：
1.8复选框
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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 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-100优秀： --> <!-- <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="a,u in users">{{a.name}} </i> --> <!-- <p>下拉框</p> <select> <option v-for="h in hobby" :value="h.id">{{h.name}}</option> </select> --> <p>多选框</p> <div id="" v-for="h in hobby"> <input type="checkbox" name="hobby" :value="h.id"/>{{h.name}} </div> <!-- <p>动态参数</p> <input v-model="click"/> <button v-on:[evname]="test">点我</button> --> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return{ score:88, isShow:false, // arr:[1,2,3,4], users:[{ name:'游乐场',id:1 },{ name:'水上世界',id:2 },{ name:'k歌',id:3 },{ name:'动物园',id:4 }], hobby:[{ name:'吃汉堡',id:1 },{ name:'吃炸鸡',id:2 },{ name:'喝可乐',id:3 },{ name:'吃薯条',id:4 }], evname:'click' } } ,methods:{ test(){ // 单击事件 alert("公主驾到通通闪开") } } }) </script> </body> </html>
结果：
1.9下拉框
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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 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-100优秀： --> <!-- <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="a,u in users">{{a.name}} </i> --> <p>下拉框</p> <select> <option v-for="h in hobby" :value="h.id">{{h.name}}</option> </select> <!-- <p>多选框</p> <div id="" v-for="h in hobby"> <input type="checkbox" name="hobby" :value="h.id"/>{{h.name}} --> </div> <!-- <p>动态参数</p> <input v-model="click"/> <button v-on:[evname]="test">点我</button> --> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return{ score:88, isShow:false, // arr:[1,2,3,4], users:[{ name:'游乐场',id:1 },{ name:'水上世界',id:2 },{ name:'k歌',id:3 },{ name:'动物园',id:4 }], hobby:[{ name:'吃汉堡',id:1 },{ name:'吃炸鸡',id:2 },{ name:'喝可乐',id:3 },{ name:'吃薯条',id:4 }], evname:'click' } } ,methods:{ test(){ // 单击事件 alert("公主驾到通通闪开") } } }) </script> </body> </html>
结果：
2.指令
2.1 v-if|v-else|v-else-if
根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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 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-100优秀： --> <!-- <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">{{u.name}} ;{{i}}</i> <p>下拉框</p> <select> <option v-for="h in hobby" :value="h.id">{{h.name}}</option> </select> --> <!-- <p>多选框</p> <div id="" v-for="h in hobby"> <input type="checkbox" name="hobby" :value="h.id"/>{{h.name}} </div> --> <!-- <p>动态参数</p> <input v-model="click"/> <button v-on:[evname]="test">点我</button> --> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return{ score:88, isShow:false, arr:[1,2,3,4], users:[{ name:'huahua',id:1 },{ name:'xiaomei',id:2 },{ name:'yanyan',id:3 },{ name:'heihei',id:4 }], hobby:[{ name:'吃汉堡',id:1 },{ name:'吃炸鸡',id:2 },{ name:'喝可乐',id:3 },{ name:'吃薯条',id:4 }], evname:'click' } } ,methods:{ test(){ // 单击事件 alert("公主驾到通通闪开") } } }) </script> </body> </html>
结果：
2.2 v-show
v-show指令与v-if指令类似，用于根据表达式的值来控制元素的显示和隐藏。当v-show指令的表达式的值为false时，元素会被渲染为不可见状态，并且会添加CSS样式"display:none"。这意味着该元素在页面上不会占据空间，并且不会显示给用户。
然而，v-show指令与加载出页面是不同的。当使用v-if指令时，如果条件为false，对应的元素将从DOM中完全移除，并且不会加载到页面上。
代码：
<b v-if="isShow">展示</b> <b v-show="isShow">展示</b>
2.3 v-for
类似JS的遍历
遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标
语法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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 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-100优秀： --> <!-- <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="a,u in users">{{a.name}} </i> <!-- <p>下拉框</p> <select> <option v-for="h in hobby" :value="h.id">{{h.name}}</option> </select> <p>多选框</p> <div id="" v-for="h in hobby"> <input type="checkbox" name="hobby" :value="h.id"/>{{h.name}} </div> --> <!-- <p>动态参数</p> <input v-model="click"/> <button v-on:[evname]="test">点我</button> --> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return{ score:88, isShow:false, arr:[1,2,3,4], users:[{ name:'游乐场',id:1 },{ name:'水上世界',id:2 },{ name:'k歌',id:3 },{ name:'动物园',id:4 }], hobby:[{ name:'吃汉堡',id:1 },{ name:'吃炸鸡',id:2 },{ name:'喝可乐',id:3 },{ name:'吃薯条',id:4 }], evname:'click' } } ,methods:{ test(){ // 单击事件 alert("公主驾到通通闪开") } } }) </script> </body> </html>
结果：
2.4 动态参数
从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数
<a v-bind:[attrname]="url"> ... </a>
同样地，你可以使用动态参数为一个动态的事件名绑定处理函数
<a v-on:[evname]="doSomething"> ... </a>
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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 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-100优秀： --> <!-- <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="a,u in users">{{a.name}} </i> --> <!-- <p>下拉框</p> <select> <option v-for="h in hobby" :value="h.id">{{h.name}}</option> </select> <p>多选框</p> <div id="" v-for="h in hobby"> <input type="checkbox" name="hobby" :value="h.id"/>{{h.name}} </div> --> <p>动态参数</p> <input v-model="click"/> <button v-on:[evname]="test">点我</button> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return{ score:88, isShow:false, // arr:[1,2,3,4], users:[{ name:'游乐场',id:1 },{ name:'水上世界',id:2 },{ name:'k歌',id:3 },{ name:'动物园',id:4 }], hobby:[{ name:'吃汉堡',id:1 },{ name:'吃炸鸡',id:2 },{ name:'喝可乐',id:3 },{ name:'吃薯条',id:4 }], evname:'click' } } ,methods:{ test(){ // 单击事件 alert("公主驾到通通闪开") } } }) </script> </body> </html>
结果：
3.过滤器
3.1.局部过滤器
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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> <div id="app"> <p>局部过滤器基本应用</p> {{msg}}<br /> {{msg | filterA}} <!-- <p>局部过滤器串行使用</p> {{msg}}<br /> {{msg | filterA| filterB}} <p>局部过滤器传参</p> {{msg | filterC(1,4)}}<br /> --> <p>全局过滤器</p> {{time}}<br /> {{time | fmtDateFilter}} </div> <script type="text/javascript"> Vue.filter('fmtDateFilter',function(value) { // value表示过滤的内容 return fmtDate(value); }); new Vue({ el:'#app', filters:{ 'filterA':function(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:'公主驾到通通闪开', time:new Date() }; } ,methods:{ test(){ // 单击事件 alert("公主驾到通通闪开") } } }) </script> </body> </html>
结果：
注意：
- 过滤器函数接受表达式的值作为第一个参数
- 过滤器可以串联
{{ message | filterA | filterB }}- 过滤器是JavaScript函数，因此可以接受参数：
{{ message | filterA(arg1, arg2) }}- js定义一个类
function Stu(){};
Stu.prototype.add(a,b){};//添加一个新的实例方法
Stu.update(a,b){};//添加一个新的类方法
3.2.全局过滤器
代码：
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.计算属性&监听属性
4.1.计算属性
计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用
代码：
{<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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 id="app"> <p>计算属性</p> 单价：<input v-model="price"/> 数量：<input v-model="num"/> 小计：{{count}} </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return{ price:88, num:1 }; }, computed:{ count:function(){ return this.price * this.num; } } }) </script> </body> </html>
结果：
4.2.监听属性
watch可以监听简单属性值及其对象中属性值的变化
watch类似于onchange事件,可以在属性值修改的时候,执行某些操作
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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 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>
结果：
5.购物车案列（简单版本）
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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 id="app"> <h1 style="text-align: center;">购物车</h1> <table border="1" style="width: 100%; height: 80px;text-align: center;" > <thead> <tr> <th>商品</th> <th>单价</th> <th>数量</th> <th>小计</th> </tr> </thead> <tbody> <tr> <td>炸鸡</td> <td>{{priceA}}</td> <td> <button @click="gooddelA">-</button> {{numA}} <button @click="goodaddA">+</button> </td> <td>{{countA}}</td> </tr> <tr> <td>炸薯条</td> <td>{{priceB}}</td> <td> <button @click="gooddelB">-</button> {{numB}} <button @click="goodaddB">+</button> </td> <td>{{countB}}</td> </tr> <tr> <td>汉堡</td> <td>{{priceC}}</td> <td> <button @click="gooddelC">-</button> {{numC}} <button @click="goodaddC">+</button> </td> <td>{{countC}}</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总价：</td> <td>{{total}}</td> </tr> </tfoot> </table> </div> <script> new Vue({ el: '#app', data: { priceA:30, priceB:10, priceC:20, numA:1, numB:1, numC:1 }, computed: { countA:function(){ return this.priceA * this.numA; }, countB:function(){ return this.priceB * this.numB; }, countC:function(){ return this.priceC * this.numC; }, total:function(){ return this.countA + this.countB +this.countC; } }, methods: { goodaddA: function() { return this.numA++; }, goodaddB: function() { return this.numB++; }, goodaddC: function() { return this.numC++; }, gooddelA: function() { if(this.numA>1){ return this.numA--; } }, gooddelB: function() { if(this.numB>1){ return this.numB--; } }, gooddelC: function() { if(this.numC>1){ return this.numC--; } }, } }); </script> </body> </html>
结果：
今日分享就结束！！！
