一、过滤器
定义：就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中
易错点：全局是filter，局部是filters
<div id="d1">
<p>{{price|format}}</p>
</div>
<script>
// 全局过滤器，可以在任意位置使用，四舍五入
Vue.filter('format',function (money) {
return money.toFixed(2)
})
let vm = new Vue({
el:'#d1',
data:{
price:1.055111
},
filters:{
// 局部过滤器，只能在当前vm对象内使用
format:function (money) {
return money.toFixed(3)
}
}
})
</script>
二、计算属性（computed）
当我们需要数据进行某种操作加工，就可以用到计算属性
ps：计算属性的函数必须要有返回值
<div id="d1">
<input type="text" v-model="num1">+
<input type="text" v-model="num2">=
<span>{{total}}</span>
</div>
<script>
let vm = new Vue({
el:"#d1",
data:{
num1:0,
num2:0,
},
computed:{
total(){
return parseFloat(this.num1) + parseFloat(this.num2);
}
}
})
</script>
三、侦听属性（watch）
侦听data中的某个数据，当这个数据发生变化了，就执行某些自定义操作
侦听属性一般是一个对象（键值对），他的键通常是一个对象或者变量，值一般是函数，当侦听的data数据发生变化，就会自动执行后面的函数，这个函数在调用的时候会自动传入两个参数，第一个是变化前的值，第二个是变化后的值。
<div id="app">
<p @click="num++">{{num}}</p>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
num:0
},
watch:{
// v1是变化之前的值，v2是变化之后的值
num(v1,v2){
if(this.num>=5){
this.num=5
}
}
}
})
</script>
四、vue对象的生命周期
每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。
-
beforeCreate（创建前）
- 此时vm对象还没创建，内部的属性，方法一概没有
-
created（创建后）
- vm对象创建完成，内部的方法（watch，filters。。），属性（data）已经完成实例化，但是此时还未挂载，所以vm对象范围还没有创建（el）
-
beforeMount（挂载前）
-
页面还没有被展示但是dom操作已经完成
-
<div id='app'>{{msg}}</div>
-
-
mounted（挂载后）
-
数据展示到页面上
-
<div id='app'>{{123}}</div>
-
-
beforeUpdate（数据更新前）
- 在数据跟新的时候发生调用，在新的dom渲染和打补丁之前，这里执行的代码不会重新触发数据更新
-
update（数据更新后）
- dom操作已经渲染完毕，但是这个状态应该避免，如果这里触发了数据更新，就会无限重复这个更新
-
beforeDestroy（销毁前）
- 实例销毁之前调用。在这一步，实例仍然完全可用。
-
destroyed（销毁后）
- 所有实例被销毁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
num:0
},
beforeCreate:function(){
console.log("beforeCreate,vm对象尚未创建,num="+ this.num); //undefined
this.name=10; // 此时没有this对象呢，所以设置的name无效，被在创建对象的时候被覆盖为0
},
created:function(){
console.log("created,vm对象创建完成,设置好了要控制的元素范围,num="+this.num ); // 0
this.num = 20;
},
beforeMount:function(){
console.log( this.$el.innerHTML ); // <p>{{num}}</p>
console.log("beforeMount,vm对象尚未把data数据显示到页面中,num="+this.num ); // 20
this.num = 30;
},
mounted:function(){
console.log( this.$el.innerHTML ); // <p>30</p>
console.log("mounted,vm对象已经把data数据显示到页面中,num="+this.num); // 30
},
beforeUpdate:function(){
// this.$el 就是我们上面的el属性了，$el表示当前vue.js所控制的元素#app
console.log( this.$el.innerHTML ); // <p>30</p>
console.log("beforeUpdate,vm对象尚未把更新后的data数据显示到页面中,num="+this.num); // beforeUpdate----31
},
updated:function(){
console.log( this.$el.innerHTML ); // <p>31</p>
console.log("updated,vm对象已经把过呢更新后的data数据显示到页面中,num=" + this.num ); // updated----31
},
});
}
</script>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<button @click="num++">按钮</button>
</div>
</body>
</html>
总结：
在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。
另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created
五、阻止事件冒泡和刷新页面
绑定事件的时候添加.stop、.prevent
<div id="app" style=" 100px;height: 100px;background-color: red" @click="show('box1')">
<div style="background-color: black;height: 80px; 80px" @click.stop="show('box2')"></div>
</div>
<a href="https://www.mzitu.com/" @click.prevent.stop="show(123)" >百度</a>
<script>
let vm = new Vue({
el:'#app',
methods:{
show(message){
alert(message)
}
}
})
</script>
六、综合案例-todolist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<script src="/vue/vue.js"></script>
<style type="text/css">
.list_con{
600px;
margin:50px auto 0;
}
.inputtxt{
550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<input type="text" v-model="msg" id="txt1" class="inputtxt">
<input type="button" @click="add" value="增加" id="btn1" class="inputbtn">
<ul id="list" class="list">
<!-- <!– javascript:; # 阻止a标签跳转 –>-->
<!-- <li>-->
<!-- <span>学习html</span>-->
<!-- <a href="javascript:;" class="up"> ↑ </a>-->
<!-- <a href="javascript:;" class="down"> ↓ </a>-->
<!-- <a href="javascript:;" class="del">删除</a>-->
<!-- </li>-->
<!-- <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>-->
<!-- <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>-->
<li v-for="li,index in li_list">
<span>{{li}}</span>
<a @click="up(index)">↑</a>
<a @click="down(index)">↓</a>
<a @click="del(index)">删除</a>
</li>
</ul>
</div>
<script>
let vm = new Vue({
el:'.list_con',
data:{
msg:'',
li_list : ['学习html','学习css','学习python']
},
methods:{
add(){
if(this.msg==""){
return false;
}
this.li_list.push(this.msg);
this.msg='';
},
up(index){
if(index==0){
return false;
}
// 这里删除得到的是一个数组，因为可能删除多个
let message = this.li_list.splice(index,1)
this.li_list.splice(index-1,0,message[0])
},
down(index){
if(index==this.li_list.length){
return false;
}
let message = this.li_list.splice(index,1)
this.li_list.splice(index+1,0,message[0])
},
del(index){
this.li_list.splice(index,1)
}
}
})
</script>
</body>
</html>