VUE学习小结
构造VUE实例
new VUE({
el:'选择器',
data:{
k1:v1,
k2:v2,
...
},
methods:{
method1(){
...
},
method2(){
...
}
}
})
说明：
VUE构造函数的参数是一个json对象，它主要有3个键：
el表示数据在什么元素内有效，它的值是一个选择器，可以是id选择器，也可以是类选择器，不能是body。
data显示就是数据，是一个json格式，在html双标签内引用如：<h1>{{k1}}</h1>
methods通常定义响应事件的方法，作为html元素的属性引用如：<button @click="method1">确定</button>，@click是v-on:click的缩写。
v-bind
v-bind:class="{样式名:data中布尔型的变量}"
如：v-bind:class="{active:isActive}
说明：active是css样式名(.active)，isActive是data中的一个bool型变量，如果它的值为true，则采用.active样式，否则就不采用。
扩展：
（1）v-bind:class="{ active: isActive, 'text-danger': hasError }"
（2）v-bind:class="classObject" //classObject={ active: isActive, 'text-danger': hasError }
v-bind:class="表达式"
如：v-bind:class="isRed?'red':'green'"
说明：主要根据data中的isRed的值（true还是false）来选择css样式，true的话就采用‘red’，‘false’的话就采用‘green’。'red'和'green'是CSS类选择器的名字，分别是“.red”和“.green”。
v-bind:style="{属性1:值1,属性2:值2}"
如：v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"
说明：值1activeColor和值2fontSize是Data中的键。
综合实例：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> <style type="text/css"> .red { background: red; } .blue { background: blue; } .green { background: green; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">标题</h1> </header> <div class="mui-content"> <ul class="mui-table-view"> <li class="mui-table-view-cell" v-for="(room,index) in rooms" :class="colors[room.status]"> <h4>{{room.id}}</h4> <p>{{index}}</p> <p> {{room.status}} </p> <button type="button" class="mui-btn mui-btn-purple" @click="del(index)">删除</button> </li> </ul> <div :class="isRed?'red':'green'" style="height: 50px;margin-top: 10px;"> <a @click="isRed=!isRed">vip</a> </div> <form class="mui-input-group" style="margin-top: 10px;"> <div class="mui-input-row"> <label for="">房号：</label> <input type="text" v-model="id" /> </div> <div class="mui-input-row"> <label for="">状态：</label> <select name="" id="" v-model="status"> <option value="未到店">未到店</option> <option value="已到店">已到店</option> <option value="消费中">消费中</option> </select> </div> <div class="mui-button-row"> <button type="button" class="mui-btn mui-btn-primary" @click="add2">添加</button> <button type="reset" class="mui-btn mui-btn-danger">取消</button> </div> </form> </div> </div> <script src="../js/mui.min.js"></script> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init(); var rooms = [{ id: '1001', status: '未到店' }, { id: '1002', status: '已到店' }, { id: '1003', status: '消费中' }, ]; var vm = new Vue({ el: '.mui-content', data: { id: '', status: '未到店', isRed: true, rooms: rooms, colors: { '未到店': 'red', '已到店': 'blue', '消费中': 'green' } }, methods: { add1() { var max_id = parseInt(this.rooms[0].id); for(var i = 0; i < this.rooms.length; i++) { if(this.rooms[i].id > max_id) { max_id = this.rooms[i].id; } } var new_id = parseInt(max_id) + 1; var statusArr = ['未到店', '已到店', '消费中']; var new_index = Math.round(Math.random() * 10) % 3; console.log(new_index); var new_status = statusArr[new_index]; this.rooms.push({ id: new_id, status: new_status }); }, add2() { this.rooms.push({ id: this.id, status: this.status }); }, del(index){ this.rooms.splice(index,1); } } }) </script> </body> </html>
v-model
文本框
如：<input type="text" v-model="var1">
说明：表单控件的双向绑定，内存变量var1的值可以改变控件的值（value），同时value也可改变内存变量var1的值。
单选按纽
<input type="radio" value="男" v-model="sex"/><label for="">男</label>
<input type="radio" value="女" v-model="sex"/><label for="">女</label>
<p>您的性别是：{{sex}}</p>
复选框
<input type="checkbox" value="" v-model="like"/><label for="">喜欢游戏?{{like}}</label><br />
<hr />
<input type="checkbox" value="StarCraft" v-model="games"/><label for="">StarCraft</label><br />
<input type="checkbox" value="WarCraft" v-model="games"/><label for="">WarCraft</label><br />
<input type="checkbox" value="FIFA" v-model="games"/><label for="">FIFA</label>
<p>你选择的是：{{games}}</p>
<!-- games须是一个数组 -->
列表
<select name="" v-model="story">
<option value="">--选择--</option>
<option value="三国演义">三国演义</option>
<option value="水浒传">水浒传</option>
<option value="西游记">西游记</option>
<option value="红楼梦">红楼梦</option>
</select>
<p>你选择的小说是： {{story}}</p>
综合实例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container"> <h2>文本框</h2> <input type="text" v-model="txt" /> <p>你输入的内容是：{{txt}}</p> <h2>单选按纽</h2> <input type="radio" name="" id="" value="男" v-model="sex"/><label for="">男</label> <input type="radio" name="" id="" value="女" v-model="sex"/><label for="">女</label> <p>您的性别是：{{sex}}</p> <h2>复选框</h2> <input type="checkbox" name="" id="" value="" v-model="like"/><label for="">喜欢游戏?{{like}}</label><br /> <hr /> <input type="checkbox" name="" id="" value="StarCraft" v-model="games"/><label for="">StarCraft</label><br /> <input type="checkbox" name="" id="" value="WarCraft" v-model="games"/><label for="">WarCraft</label><br /> <input type="checkbox" name="" id="" value="FIFA" v-model="games"/><label for="">FIFA</label> <p>你选择的是：{{games}}</p> <h2>Select列表</h2> <select name="" v-model="story"> <option value="">--选择--</option> <option value="三国演义">三国演义</option> <option value="水浒传">水浒传</option> <option value="西游记">西游记</option> <option value="红楼梦">红楼梦</option> </select> <p>你选择的小说是： {{story}}</p> </div> <script type="text/javascript"> var vm=new Vue({ el:'.container', data:{ txt:'haha', sex:'男', like:true, games:[], story:'' } }) </script> </body> </html>
vue动态添加响应式属性
注意：只有Vue实例被创建时data中存在的属性才是响应式的，后来新增的属性不会触发任何的视图更新的，你可以将后来要增加的属性先添加到data中，并设置其初值，比如：0、''、null。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--<div id="div1"> 姓名：{{name}} <br /> 年龄：{{age}} <br /> <button @click="setAge1()">设置年龄</button> </div>--> <!-- 对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。 但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。 --> <div id="div2"> 姓名：{{player.name}} <br /> 年龄：{{player.age}} <br /> 球队：{{player.club}} <br /> 年龄：{{player.no}} <br /> <button @click="addProperty()">动态添加属性</button> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // var vm1=new Vue({ // el:'#div1', // data:{ // name:'michael' // }, // methods:{ // setAge1:function () { // vm1.age=41;//在Vue实例创建后，无法data中直接添加根属性，但可以在已存在的根属性中动态添加新属性，也不能直接添加，应该使用Vue.set(vm2.player,'age',41)这种方式来添加
// } // } // })
var vm2=new Vue({
el:'#div2',
data:{ player:{ name:'kobe' } },
methods:{ addProperty:function ()
{
//vm2.player.age=41;//这种添加属性，视图不会更新。
Vue.set(vm2.player,'age',41);//动态添加一个属性
vm2.player=Object.assign({},vm2.player,{club:'chicago',no:23});//动态添加多个属性
}
}
})
</script>
</body>
</html>
