5 过滤器
过滤器，自定义函数，输出内容，操作数据
调用过滤器：
{{price|flo}}
全局过滤器：
Vue.filter('过滤器名',function(n){
return n.toFixed(2) + '元' //四舍五入保留两位小数，n是被处理的数据
})
局部过滤器：在Vue对象里的filters参数，封闭性
filters:{
flo:function (n) {
return n.toFixed(2) + '元'
}
parseFloat:浮点型强转
parseInt:整型强转
事件冒泡：js子元素触发事件，父元素同类的事件也会跟着触发
splice(1,1,3) 从 索引 为 1 的位置，删除之后的 1 个元素， 添加 3
<!-- javascript:; # 阻止a标签跳转 --><li :style="index%2==0?style2:style1" v-for="item,index in todolist"> <span>{{item}}</span> <a href="javascript:;" @click="up(index)" class="up"> ↑ </a> <a href="javascript:;" @click="down(index)" class="down"> ↓ </a> <a href="javascript:;" @click="del1(index)" class="del">删除</a></li>
6 计算属性和侦听属性
1 计算属性
computed，对数据进行处理，data数据的调整，相当于函数，过滤器，在原来的标签中，更注重被处理数据的改变，而计算属性，可以改变任何的data数据。
<p>{{ 值 }}</p>
computed:{
值:function(){ //（这个值在视图中被使用）
处理
return res
}
}
2 侦听，监听属性
侦听 data 中某个数据的变化，对象或变量，当数据发生变化，就执行对应的函数。函数的两个形参：
(变化前数据,变化后数据)
watch:{
num:function(v1,v2)
}
7 Vue对象的生命周期
每个Vue对象，创建，初始化过程。这个过程，Vue.js 自动运行 一些 叫做 生命周期 的钩子函数，我们可以使用这些函数，进行一定的处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部过滤器</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<p @click="num++">{{num}}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
num: 10,
},
beforeCreate(){
console.log("----vm对象初始化完成之前自动执行的代码----");
console.log(this.$el);
console.log(this.$data);
},
created(){ // 这里主要实现到服务端获取页面数据[ajax]
console.log("----vm对象初始化完成以后自动执行的代码----");
console.log(this.$el); // 没有查找到vm需要控制的元素
console.log(this.$data); // 已经把data模型中的数据注入到vm对象里面作为属性了
},
beforeMount(){
console.log("----vm数据渲染到html模板之前执行的代码----");
console.log(this.$el);
},
mounted(){ // 修改页面的内容[页面特效]
console.log("----vm数据渲染到html模板之后执行的代码----");
console.log(this.$el);
},
// beforeUpdate(){
// console.log("----数据更新了，渲染之前执行的代码------");
// console.log(this.num);
// console.log(this.$el.innerHTML);
// },
// updated(){
// console.log("----数据更新了，渲染之后执行的代码------");
// console.log(this.num);
// console.log(this.$el.innerHTML);
// },
// 销毁vm对象 vm.$destroy()
beforeDestroy(){
console.log("--- 当vm对象被销毁之前，会自动执行这里的代码 ---");
console.log( this );
},
destroyed(){
console.log("--- 当vm对象被销毁以后，会自动执行这里的代码 ---");
}
});
</script>
</body>
</html>
总结：
在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。
另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created
8 阻止事件冒泡和刷新页面
事件冒泡：js子元素触发事件，父元素同类的事件也会跟着触发
阻止冒泡：.stop
阻止刷新：.prevent
@click.stop
@click.prevent
@click.stop.prevent
<div class="box2" @click.stop.prevent="alert('box2')"></div> <!-- @click.stop来阻止事件冒泡 -->
<input type="submit" value="提交02" @click.prevent=""> <!-- @click.prevent来阻止表单提交 -->
<a href="http://www.baidu.com" @click.stop.prevent="show">百度</a>
<!-- 辅助指令可以多个链式调用 -->// 阻止a标签跳转
利用事件冒泡，实现事件委托：点击的是子标签，但是，事件绑定在父标签
<ul id="app">
<li>1111111111111111</li>
<li>2222222222222222</li>
<li>3333333333333333</li>
<li>4444444444444444</li>
<li>5555555555555555</li>
</ul>
<script>
// 批量元素绑定事件
// var list = document.getElementById("app").children;
// for(var i in list){
// list[i].onclick = function(){
// console.log(this.innerHTML);
// }
// }
// 可以通过事件委托来提升性能
var ul = document.getElementById("app");
ul.onclick = function(event){
// 事件最初的触发元素
var self = event.target;
console.log(self.innerHTML)
}
</script>