1 条件渲染
1.1 通过v-if和v-for实现购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
.red {
background: red;
}
.green {
background: green;
}
.font {
font-size: 30px;
}
</style>
<title>Title</title>
</head>
<body>
<div id="box">
1.2 v-if/v-else-if/v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
</style>
<title>Title</title>
</head>
<body>
<div id="box">
<div v-if="which==1">1111</div>
<div v-else-if="which==2">2222</div>
<div v-else>3333</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
which:1
},
})
</script>
</html>
2 列表渲染
2.1 for循环数组，对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
</style>
<title>Title</title>
</head>
<body>
<div id="box">
<h1>循环数组</h1>
<div>
<p v-for="data in arr">{{data}}</p>
</div>
<h1>循环对象</h1>
<div>
<p v-for="data in obj">{{data}}</p>
</div>
<h1>循环数组索引和value</h1>
<div>
<p v-for="(data,index) in arr">索引是：{{index}}，数据是{{data}}</p>
</div>
<h1>循环对象key和value</h1>
<div>
<p v-for="(value,key) in obj">key是：{{key}}，value是：{{value}}</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
arr: ['zs', 'ls', 'ww'],
obj: {name: 'lqz', age: 18, sex: '男'},
},
})
</script>
</html>
2.2 key值的解释
1 v-for循环数组，对象时，建议在控件（组件，标签）写一个key属性，属性值唯一
2 页面更新以后，加速dom的替换（渲染）,虚拟dom的替换diff算法
3 :key="变量"
2.2 数组更新与检测
0 数据双向绑定，数据变化，页面变，页面变化数据变
1 使用以下方法操作数组，可以检测变动：push，pop，shift，unshift,splice,sort,reverse
2 不会检测变动filter(),concat(),slice(),map()，新数组替换旧数组
-页面不会更改：vm.arr.concat(['44','55'])
-解决vm.arr=vm.arr.concat(['44','55'])
3 页面不会更改：通过索引值更新数组
-解决方案一：
vm.arr[0]
"11"
vm.arr[0]='99'
"99"
vm.arr.splice(0,1,'88')
["99"]
-解决方案二
Vue.set(vm.arr,0,'lqz')
3 上面能更新是因为作者重写了那些方法
3 事件处理
3.1 input过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
