vue实例成员：
el | template
|data | methods
watch 监听事件| computed 计数属性使用
| filters过滤器 | props 父传子
components渲染template中标签
一、表单指令(重要)：
表单指令 v-model='变量'，变量值与表单标签的value相关
v-model可以实现数据的双向绑定：v-model绑定的变量值可以影响表单标签的值，
反过表单标签的值也可以影响变量的值。
<div id="app">
<form action="">
<input type="text" name="user" id="user" placeholder="请输入账号" v-model="v1">
<input type="text" v-model="v1">
{{v1}}
<hr>
<!--单选框-->
男：<input type="radio" name="sex" value="male" v-model="v2">
女：<input type="radio" name="sex" value="female" v-model="v2">
{{v2}}
<hr>
<!--单一复选框-->
卖身契：同意 <input type="checkbox" name="agree" v-model="v3">
{{v3}}
<hr>
<!--多复选框-->
爱好：<br>
男：<input type="checkbox" name="hobbies" value="male" v-model="v4">
女：<input type="checkbox" name="hobbies" value="female" v-model="v4">
其他：<input type="checkbox" name="hobbies" value="other" v-model="v4">
{{v4}}
</form>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
v1:123,
v2:'female',
v3:false,
v4:['other']
},
})
二、条件指令
条件指令：
v-show='变量'，隐藏的时候，采用的是display：none进行渲染
v-if='布尔变量'，隐藏时，不再页面中渲染（保证不渲染的数据泄露）
三种形式：v-if | v-else-if | v-else
利用一个点击转换并且点击的按钮高亮的例子来渲染条件指令
<style>
[v-cloak] {display: none}
.box{
200px;
height: 200px;
}
.r{
background-color: red;
}
.b{
background-color: blue;
}
.g{
background-color: green;
}
.active{
background-color: sandybrown;
}
</style>
<div id="app" v-cloak>
<div class="box r" v-show="is_show"> </div>
<div class="box b" v-if="is_show"> </div>
<div class="warp">
<div>
<button @click="page='r_page'" :class="{active:page==='r_page'}">红</button>
<button @click="page='b_page'" :class="{active:page==='b_page'}">蓝</button>
<button @click="page='g_page'" :class="{active:page==='g_page'}">绿</button>
</div>
<div class="box r" v-if="page==='r_page'"></div>
<div class="box b" v-else-if="page==='b_page'"></div>
<div class="box g" v-else></div>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
is_show:false,
page:'r_page'
}
})
三、循环指令
循环指令：v-for="ele in string|array|obj"
<div id="app">
<span>{{info}}</span>
<hr>
<!--对字符串循环-->
<p v-for="(c,i) in info">{{i}}:{{c}}</p>
<hr>
<!--对数组循环-->
<div v-for=" e in stus">{{e}}</div>
<div v-for="(e,i) in stus ">{{i}}:{{e}}</div>
<hr>
<!--对对象也就是字典循环-->
<!--这里v是值，i是变量，z是索引值-->
<div v-for="(v,i,z) in people">{{v}}{{i}}{{z}}</div>
<div v-for="teat in teats">
<span v-for="(v,k,i) in teat "><span v-if="i !==0">|</span>{{k}}{{v}}</span>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
info:'good good study',
stus:['A','B','C'],
people:{
name:'猴子',
age:37,
sex:'女',
},
teats:[
{
name: 'jason',
age: 73,
sex: '男',
},
{
name: 'egon',
age: 74,
sex: '男',
},
{
name: 'owen',
age: 17.5,
sex: '男',
}
]
}
})
</script>
循环留言板案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li:hover{
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="comment">
<button type="button" @click="send_msg">留言</button>
<ul>
<!--删除事件-->
<li v-for="(msg,i) in msgs" @click="delete_msg(i)">{{msg}}</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
comment: '',
//localStorage前端的存储，下面的式子是个三元表达式
//意思是如果有数据就用json转一下存起来，没有值就是空
msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
},
methods: {
send_msg() {
//将comment添加到msgs数组中：unshift push首尾增加；shift pop首尾删
//this.msgs.push(this.comment);
//数组操作最全的方法：splice(begin_index,count,...args)
//this.msgs.splice(0,2);
if (!this.comment) {
return false;
}
this.msgs.push(this.comment);
this.comment = '';
localStorage.msgs = JSON.stringify(this.msgs);
},
//删除数据
delete_msg(index){
//splice是从什么地方开始操作多少位操作什么！
//下面的意思从index开始，操作一位，操作的值为空，也就是什么都没有
this.msgs.splice(index,1);
localStorage.msgs=JSON.stringify(this.msgs);
}
}
})
</script>
</html>
四、过滤器
<div id="app">
<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
a: 10,
b: 20,
},
filters: {
// 传入所有要过滤的条件，返回值就是过滤的结果
f1 (num) {
console.log(num);
return num * 10;
},
f2 (a, b, c, d) {
console.log(a, b, c, d);
return a + b + c + d;
},
f3 (num) {
return num * num;
}
}
})
</script>
总结：1、在filters成员中定义过滤器方法；2、可以对多个值进行过滤，过滤时还可以额外传输辅助参数；3、过滤的结果可以再进行下一次过滤（过滤串联）
五、计数属性
<div id="app">
<input type="number" min="0" max="100" v-model="n1">
+
<input type="number" min="0" max="100" v-model="n2">
=
<button>{{ result }}</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
n1: '',
n2: '',
// result: 0,
},
computed: {
result () {
console.log('被调用了');
n1 = +this.n1;
n2 = +this.n2;
//this前面加个+号，是将字符串类型转换成数字类型加减乘除
return n1 + n2;
}
}
})
</script>
总结：
1、computed计数属性可以声明方法属性（方法属性一定不能在data中重复声明）
2、方法 属性必须在页面中渲染，才会启用绑定的方法，方法属性的值就是绑定方法的返回值
3、绑定的方法中出现的所有变量都会被监听，任何一个变化发生值更新都会重新出发绑定方法，从而更新方法属性值
一般用来解决的问题：一个变量值依赖于多个变量。
六、监听属性
<div id="app">
<p>姓名：<input type="text" v-model="full_name"></p>
<p>姓：{{ first_name }}</p>
<p>名：{{ last_name }}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '未知',
last_name: '未知',
},
watch: {
// n是监听的属性当前值，o是其上一次的值，监听的属性值每次更新都会回调监听方法
full_name(n, o) {
name_arr = n.split('');
this.first_name = name_arr[0];
this.last_name = name_arr[1];
},
}
})
</script>
总结：
1、监听的属性需要在data中声明，监听方法不需要返回值
2、监听的方法名就在监听的属性名，该属性值发生更新时就会回调监听方法
3、监听方法有两个回调参数：一个是当前值一个是上次值
解决的问题：多个变量值依赖于一个变量值