vue的指令
1.v-if判断
2.v-for循环
3.v-model数据的双向绑定
v-on事件属性
实例演示
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title> --><!-- 导入vue --><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body><div id="app"><p v-bind:style="style1,style2">{{site}}</p><p v-html="messgae"></p><p v-text="text1"></p><!-- 不会改变因为页面已经加载了一次显示了1所以无论在改变也不会改变其值 --><p v-once>{{one}}</p><!-- 会改变 --><p>{{one}}</p><!-- @click是v-on:click的简称代表点击事件 --><button v-on:click="btn">按钮</button><input type="text" v-model="one" name=""/><!-- v-for循环 --><!-- key自定义键属性，主要功能是干扰diff算法 --><!-- 遍历数组--><p v-for="(index,item) in dogs" :key="index">{{index}}{{item}}</p><!-- 遍历对象 --><p v-for="(index,prop,item) in users" :key="index">{{index}}{{prop}}{{item}}</p><!-- 遍历对象数组 --><p v-for="(index,prop,item) in users" :key="index">{{index}}{{prop}}{{item}}</p><!-- 单分支判断 --><p v-if="flag">{{message}}</p><button v-on:click="flag=!flag" v-text="tips=flag?'隐藏':'显示'" ></button><!-- 多分支判断 --><p v-if="point>=1000&&point<2000">{{grade[0]}}</p><p v-else-if="point>=200&&point<100">{{grade[1]}}</p><p v-else-if="point>100&&point<50">{{grade[2]}}</p><p v-else="point>0&&point<50">{{grade[3]}}</p></div><script type="text/javascript">new Vue({el:"#app",data(){return{site:"我是vue",style1:"color:red",style2:"background:green",messgae:"<h2>我是message</h2>",text1:"我是text1",one:"1",//金牌会员point:1000,//默认显示，默认隐藏falseflag:true,//数组dogs:['jaas','dfkjd'],//对象users:{name:"xom",age:18,id:1},//对象数组users:[{id:1,name:"xom",age:18},{id:2,name:"ming",age:18},{id:3,name:"xiaod",age:18},{id:4,name:"jing",age:18},]}},methods:{btn:function(){alert(this.site);}}})</script></body></html>
计算属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>计算属性computed</title><!-- 导入vue --><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head><body><div id="app"><p>数量:<input type="number" v-model="num" style="width:300px;" min="0" max="10"/></p><p>单价:{{price}}元</p><p>金额:{{amount}}</p></div><script type="text/javascript">let vm=new Vue({el:"#app",data(){return{num:0,price:50,res:0,};},computed:{amount:{// 访问器get属性get(){return this.num*this.price;},// 访问器set属性value代表的是amount的值。set(value){console.log(value);if(value>=500){this.price=40;};},},},});vm.amount=500;</script></body></html>
侦听器属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>watch侦听器属性</title><!-- 导入vue --><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body><div id="app"><p>数量:<input type="number" v-model="num" style="width:300px;" min="0" :max="max"/></p><p>单价:{{price}}元</p><p>金额:{{res}}</p></div><script type="text/javascript">let vm=new Vue({el:"#app",data(){return{num:0,price:50,res:0,max:100,};},//侦听器属性//用来监听某一个属性值的变化，属性名要和data字段中的变量名称相同。//例如我要监听num变量的变化//num（新的值，旧的值）watch:{num(newVal,oldVue){console.log(newVal,oldVue);// this.res=this.num*this.price;// this.num--->newVal, this.price;this.res=newVal*this.price;if(newVal>=20){this.max=newVal;alert("库存不足");},},},});</script></body></html>