VUE
概述
Vue是一套用于构建用户界面的渐进式框架
Vue.js 是前端的主流框架之一
优点
1、体积小 压缩后 33K
2、更高的运行效率
3、双向数据绑定,简化 Dom 操作
基本指令
v-bind
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/v2.6.10/vue.min.js"></script><style>.active{color: #00aa00;}</style></head><body><!-- v-bind：属性名='变量名' 一旦被v-bind修饰，该值就是一个在data中定义的变量还可简写为 :变量名--><div id="app"><img v-bind:src="imgurl[index]" :title="array[index]"/><div v-bind:class="{active: isActive}">asdfghjkl</div><input type="button" @click="oper" value="哈哈"/></div><script>var app=new Vue({el:'#app',data:{imgurl:["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"],array:["苹果","华为","三星","小米","魅族"],isActive:true,index:0},methods:{oper(){if(this.index==this.imgurl.length-1){this.index=-1;}this.index++;this.isActive=!this.isActive;}}})</script></body>
</html>v-for
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/v2.6.10/vue.min.js"></script></head><body><div id="app"><ul><li v-for="user in users">姓名：{{user.name}},年龄：{{user.age}},性别：{{user.sex}}</li></ul></div><script>var app=new Vue({el:'#app',data:{users:[{name:"tom",age:20,sex:"男"},{name:"jing",age:20,sex:"女"},{name:"sb",age:20,sex:"男"}]}})</script></body>
</html>v-html和v-text
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue.js --><script src="js/v2.6.10/vue.min.js"></script></head><body><!-- {{ message }} 插入一个值，不影响标签中的其他信息v-html="message" v-text="message" 会覆盖其他内容{{ message }} v-text="message" 不能解析内容中的html标签v-html="message" 可以解析内容中的html标签--><div id="app"><p>{{ message }}</p><p v-html="message"></p><p v-text="message"></p></div><script>// vue对象var app=new Vue({el:'#app',data:{message:'<b>hello Vue!</b>'}})</script></body>
</html>
v-model
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue.js --><script src="js/v2.6.10/vue.min.js"></script></head><body><div id="app">{{ message }}{{name}}<!-- {{}} 差值表达式，可以获取data中的数据 --><input v-model="name"/></div><script>// vue对象var app=new Vue({el:'#app',//绑定挂载点，可以使用其他选择器，但建议id选择器，不能使用body和html标签与vue绑定//定义多个数据data:{message:'hello Vue!',name:'sb',}})</script></body>
</html>
v-on
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/v2.6.10/vue.min.js"></script></head><body><div id="app"><input type="button" value="按钮" v-on:click="test(1,2)" /><input type="button" value="按钮" @click="test" /></div><script>var app=new Vue({el:'#app',data:{},methods:{test(a,b){alert(a);}}})</script></body>
</html>v-show和v-if
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/v2.6.10/vue.min.js"></script><style>img{width: 100px;height: 100px;}</style></head><body><!-- v-show='布尔值' true-显示 false-隐藏v-if='布尔值' true-显示 false-隐藏(删除了标签)v-if可以和 v-else联合使用，但必须紧挨--><div id="app"><img v-show="isShow" src="img/1.jpg"/><img v-show="age>18" src="img/2.jpg"/><img v-if="isShow" src="img/3.jpg"/><img v-if="age>18" src="img/4.jpg"/><img v-else src="img/5.jpg"/><input type="button" @click="oper" value="哈哈"/></div><script>var app=new Vue({el:'#app',data:{isShow:true,age:19},methods:{oper(){this.isShow=!this.isShow;this.age=15;}}})</script></body>
</html>