更多优质内容
请关注公众号
请关注公众号
1.vue生命周期
钩子函数:
created:是在实例创建完时触发
beforeCompile:是在实例编译之前（就是在{{}}内的东西能出现之前）触发
complied:编译之后触发
ready:是在文档加载完之后触发，也是在created/beforeCompile/compiled之后触发
beforeDestroy:实例销毁之前触发
destroyed:销毁之后触发
实例不会自动销毁，要手动销毁才行：
比如实例对象是vm
vm.destory();
一般ready和created使用的最多。
在初始话数据的时候，我们一般会在created和mounted这两个函数中进行，例如
new Vue({
el:"#app",
data:{
student:{
name:"",
age:0,
sex:""
}
},
mounted(){
this.student = {
name:"zbp",
age:22,
sex:"m"
}
}
})
2.扩展一些指令
v-clock指令，这是在用户刚打开浏览器的时候，实例还没来得及编译，然后用户可能会看到{{}}闪烁
此时你可以在一个比较大的段落或者标签中添加v-clock，然后这个标签中的所有{{}}都不会有出现。
然后你还要加一个样式：
<style>
[v-clock]{
display:none;
}
</style>
v-text指令
<span>{{msg}}</span>
可以用
<span v-text="msg"></span>
代替
而且这个标签也是可以预防{{}}闪烁，因为使用v-text的话根本没有花括号
但是如果msg变量里面有html标签的话，span中也会显示html标签字符串
此时可以使用v-html代替v-text，用法是一样的。
3.计算属性：computed
一个场景，有两个变量a和b,那么如果变量a发生变化，b也要发生相应的变化，他们两个的关系是b是a的平方，点击document时
a加1，此时b也要跟着变如何实现：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性</title>
<link href="style/weibo.css" rel="stylesheet" type="text/css" />
<script src="vue.js"></script>
<script>
window.onload=function(){
var vm=new Vue({
el:"#box",
data:{
a:1
},
computed:{
b:function(){
var b=this.a*this.a;
return b;
}
}
});
document.onclick=function(){
vm.a++;
}
};
</script>
</head>
<body>
<div id="box">
<div>a={{a}}</div>
<div>b={{b}}</div>
</div>
</body>
</html>
注意几点：
首先b不能放在data中，而是要放在computed中；
computed的b属性是一个属性而不是一个方法，可以在html模板中调用{{b}},但不能通过b()来调用里面的函数;
b的函数中必须是return东西，return出什么，b变量的结果就是什么
computed的作用远不止如此，他的好处是可以对属性处理逻辑
如果你对b属性直接修改值是无法改变b的，比如vm.b=xxx是无效的
此时可以设定computed的set方法来改变计算属性b的值
var vm=new Vue({
el:"#box",
data:{
a:1
},
computed:{
b：{
get:function(){
var b=this.a*this.a;
return b;
},
set:function(val){
alert(val);
}
}
}
});
当修改b的值，他会触发set方法，val就是赋给b的值
计算属性有一种情况,比如data有一个属性c,这个c是一个对象,
此时在计算属性的b的方法体中是无法获取c的属性的,c可以获取到,但是c里面的值获取不到
4.vue实例对象的一些方法
var vm=new Vue({...});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue实例的一些方法</title>
<link href="style/weibo.css" rel="stylesheet" type="text/css" />
<script src="vue.js"></script>
<script>
window.onload=function(){
var vm=new Vue({
el:"#box",
data:{
a:1
},
});
document.onclick=function(){
alert(vm.$el); //返回#box
alert(vm.$data); //返回实例中的data属性
alert(vm.$data.a);
}
};
</script>
</head>
<body>
<div id="box">
<div>a={{a}}</div>
<div>b={{b}}</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue实例的一些方法2</title>
<link href="style/weibo.css" rel="stylesheet" type="text/css" />
<script src="vue.js"></script>
<script>
window.onload=function(){
var vm=new Vue({
data:{
a:1
},
});
vm.$mount("#box"); //手动挂载
};
</script>
</head>
<body>
<div id="box">
{{a}}
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取自定义属性</title>
<link href="style/weibo.css" rel="stylesheet" type="text/css" />
<script src="vue.js"></script>
<script>
window.onload=function(){
var vm=new Vue({
aa:11,
show:function(){
alert(1);
}
data:{
a:1
},
});
//如果想获取aa这个自定义属性的话,自定义属性无法通过{{}}显示
alert(vm.$option.aa);
//如果想调用show这自定义方法：
vm.$option.show();
};
</script>
</head>
<body>
<div id="box">
{{a}}
</div>
</body>
</html>
总结一下
vm.$el
vm.$data
vm.$mount(绑定的元素)
vm.$option
vm.$destroy 销毁实例
5.过滤器
debounce 用来延迟执行事件
<input type="text" @keyup="show | debounce 2000">
延迟两秒
limitby 用于循环限制循环的条数
有两种用法：
limitBy 条数
limitBy 条数 从哪开始
<ul>
<li v-for="v in arr | limitBy 2">{{v}}</li>
</ul>
<ul>
<li v-for="v in arr | limitBy 2 1">{{v}}</li>
</ul>
<ul>
<li v-for="v in arr | limitBy 2 arr.length-2">{{v}}</li>
</ul>
filterBy 过滤数据
<script>
window.onload=function(){
var vm=new Vue({
data:{
arr:["width","banana","orange","apple","dog"]
}
}).$mount("#box");
};
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="v in arr | filterBy 'o'">{{v}}</li>
</ul>
</div>
</body>
此时只会显示含有o的数据
甚至可以配合数据绑定
<div id="box">
<input type="text" v-model='a'>
<ul>
<li v-for="v in arr | filterBy a">{{v}}</li>
</ul>
</div>
orderBy 排序
<li v-for="v in arr | orderBy">{{v}}</li> //不排序
<li v-for="v in arr | orderBy 1">{{v}}</li> //正序排序
<li v-for="v in arr | orderBy -1">{{v}}</li> //倒序排序
自定义过滤器
Vue.filter('timeToStr',function(input){ //input默认是第一参
var oDate=new Date(input);
return oDate.getFullYear()+"-"+(oDate.getMonth()+1)+"-"+oDate.getDate()+" "+oDate.getHours()+":"+oDate.getMinutes()+":"+oDate.getSeconds();
})过滤html标签
Vue.filter('filterHtml',function(input){ //input默认是第一参
return input.replace(/<[^<]+>/g,'');
})自定义指令：
Vue.directive(指令名称,function(){
//this就是vue实例，this.el就是这个指令所绑定的元素
});用指令的时候是v-xxx
但定义的时候指令名称是xxx,不能写v-xxx
比如自定义一个拖拽的指令
<script>
window.onload=function(){
Vue.directive("drag",function(){
var oDiv=this.el;
oDiv.onmousedown=function(ev){
var x=ev.clientX-this.offsetLeft;
var y=ev.clientY-this.offsetTop;
document.onmousemove=function(ev){
oDiv.style.left=ev.clientX-x+"px";
oDiv.style.top=ev.clientY-y+"px";
};
oDiv.onmouseup=function(){
document.onmousemove=null;
}
}
});
var vm=new Vue({
data:{
time:Date.now()
}
}).$mount("#box");
};
</script>
</head>
<body>
<div id="box">
<div v-drag :style="{width:'100px',height:'100px',background:'red',position:'absolute',top:0,left:0}"></div>
</div>
