Style的样式绑定
第一种：:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中activeColor/fontSize 是data 属性
第二种：:style="{ color, fontSize }"
data中赋值 color:'red',fontSize:30+'px'
CSS的样式绑定
1) class='xxx 最原始的方式
<p class="class3" >样式绑定</p>
2) 表达式是字符串: 'classA'
<p :class="a" >样式绑定字符串</p>
data中赋值 a:'class1', 然后在上面定义一个名为class1的样式
3) 表达式是对象: {classA:isA, classB: isB}
<p :class="{class1:isA,class2:isB}">样式绑定对象</p>
data中赋值 isA:true,isB:false class1,class2就是普通的class名，不是data中赋值定义的，在data中只需要定义isA和isB
4) 表达式是数组: ['classA', 'classB']
<p :class="['class2','class3']">样式绑定数组</p>
直接把在style中定义好的class，放入数组中
事件处理
1.事件修饰符
.stop :停止事件冒泡
.prevent :阻止事件的默认行为
.once :只能点击一次
2.按键修饰符
:keyup.enter :按回车的调用
<input type="text" @keyup.enter="test8"><!--调用事件test8-->
.tab 按tab键调用
.delete 按delete键调用
.esc .space .up .down .left .right .ctrl .alt .shift .mete
列表渲染
列表渲染类型
1) 列表显示指令数组: v-for / index对象: v-for / key
2) 列表的更新显示删除item替换item
3) 列表的高级处理列表过滤列表排序
代码：列表的循环，删除，更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo3</title>
</head>
<body>
<div id="demo">
<h2>v-for循环数组</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{index}}--{{p.name}}---{{p.age}}
---<button @click="deletePerson(index)">删除</button>
---<button @click="updatePerson(index,{name:'小萱萱',age:24})">更新</button>
</li>
</ul>
<h2>v-for循环对象</h2>
<ul>
<li v-for="(value,key) in persons[0]">
{{key}}---{{value}}
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#demo",
data: {
persons:[
{name:"张三",age:18},
{name:"李四",age:19},
{name:"王五",age:20},
{name:"小七",age:21}
]
},methods: {
deletePerson(index){
this.persons.splice(index,1);
},
updatePerson(index,person){
//这种会更新数据、不会更新页面
//this.persons[index] = person;
//这种会更新数据、更新页面
this.persons.splice(index,1,person);
}
}
});
</script>
</html>代码2：列表搜索和排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo3</title>
</head>
<body>
<div id="demo">
<h2>列表的搜索排序</h2>
<input type="text" name="searchName" placeholder="搜索指定用户名" v-model="searchName"><br>
<ul>
<li v-for="(p,index) in filterPerson" :key="p.id">
{{index}}--{{p.name}}---{{p.age}}
</li>
</ul>
<button @click="setOrderType(1)">年龄升序</button>
<button @click="setOrderType(2)">年龄降序</button>
<button @click="setOrderType(0)">原来的顺序</button>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#demo",
data: {
orderType:0,//0表示不排序，1表示升序，2表示降序
searchName:"",
persons:[
{id:1,name:"张三",age:28},
{id:2,name:"张四",age:19},
{id:3,name:"张五",age:19},
{id:4,name:"小七",age:21}
]
},computed:{
filterPerson(){
//从this中取出searchName和persons
let {orderType,searchName,persons} = this
//最终要显示的数组
persons = persons.filter(p => p.name.indexOf(searchName)!=-1);
//排序
if(orderType!=0){
persons = persons.sort(function(p1,p2){
//升序
if(orderType==1){
return p1.age - p2.age;
}else{
//降序
return p2.age - p1.age;
}
});
}
return persons;
}
},methods:{
setOrderType(orderType){
this.orderType = orderType;
}
}
});
</script>
</html>我们看到上面的数组更新方法里的一些效果，发现直接赋值可以改变数组，但是不会更新页面，而使用数组的方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
这些方法都会更新页面，在Vue的网站里
学习>教程>数组更新检测里这部分有说明，上面的这些方法都是变异方法，变异方法更新数组的同时，会去更新视图
//这种会更新数据、不会更新页面
//this.persons[index] = person;
//这种会更新数据、更新页面
this.persons.splice(index,1,person);