更多优质内容
请关注公众号

Vue使用(二) vue生命周期和计算属性-张柏沛IT博客

正文内容

Vue使用(二) vue生命周期和计算属性

栏目:Web前端 系列:Vue的简单使用系列 发布时间:2019-11-30 12:44 浏览量:2111

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>
	





更多内容请关注微信公众号
zbpblog微信公众号

如果您需要转载,可以点击下方按钮可以进行复制粘贴;本站博客文章为原创,请转载时注明以下信息

张柏沛IT技术博客 > Vue使用(二) vue生命周期和计算属性

热门推荐
推荐新闻