一、Vue生命周期
vue实例中从创建到销毁的过程,称之为生命周期,共有八个阶段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的生命周期</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
window.onload = function(){
new Vue({
el:'#itany',
data:{
msg:'你好啊'
},
methods:{
update(){
this.msg='欢迎';
},
destroy(){
this.$destroy();
}
},
beforeCreate(){
alert('组件实例刚刚创建,还未进行数据的观测和事件的配置');
},
create(){
alert('组件实例已经创建完成,并且已经进行数据的观测和事件配置');
},
beforeMount(){
alert('模板编译之前,还没有挂载');
},
mounted(){
alert('模板编译之后,已经挂载,此时才会渲染页面,才能看到页面上数据的展示');
},
beforeUpdate(){
alert('组件数据更新之前');
},
updated(){
alert('组件更新之后');
},
beforeDestroy(){
alert('组件销毁之前');
},
destroyed(){
alert('组件销毁之后');
}
})
}
</script>
</head>
<body>
<div id="itany">
{{msg}}
<button @click="update">点击</button>
<button @click="destroy">点击销毁</button>
</div>
</body>
</html>
复制代码
二、 计算属性
1.基本用法
计算属性也是用来存储数据的,但是有以下几个特点。
a.数据可以进行逻辑处理操作的
b.可以对计算属性中的数据进行监视
复制代码
2.计算属性 vs 方法
将计算属性的get函数定义为一个方法也可以实现类似的功能
区别:
a.计算属性是基于它的依赖进行更新的,只有在相关依赖发生改变时才能更新变化
b.计算属性是缓存的,只有相关依赖没有改变,多次访问计算属性得到的值是之前缓存的计算结果,不会多次执行。
复制代码
3.get和set
计算属性由两部分组成,get和set,分别用来获取计算属性和设置计算属性;
默认只有get,如果需要set,要自己添加。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="itany">
{{msg}}
<br>
{{msg2}}
<br>
{{msg.split('').reverse().join('')}}
<br>
{{msg3}}
<br>
<button @click="changemsg">修改msg值</button>
<br>
{{num1}}
<br>
num2:
{{num2}}
<br>
{{getnum2()}}
<br>
<button onclick="a()">测试</button>
<br>
<button @click="change()">修改计算属性</button>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el:'#itany',
data:{
msg:'weloome to itany',
num1:7
},
computed:{
msg2:function(){
return '欢迎来到北京'
},
msg3:function(){
return this.msg.split('').reverse().join('');
},
num2:{
get:function(){
console.log(new Date());
return this.num1-1;
},
set:function(val){
this.num1 = 1111;
}
}
},
methods:{
changemsg(){
this.num1 = 666;
},
getnum2(){
console.log(new Date());
return this.num1-1;
},
change(){
this.num2=11;
}
}
})
function a(){
setInterval(function(){
console.log(vm.getnum2())
},1000)
}
</script>
复制代码
三、vue实例的属性和方法
1.属性
vm.$el
vm.$date
vm.$options
复制代码
2.方法
vm.$mount();
vm.$destroy();
vm.$nextTick();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="itany">
{{msg}}
<h2 ref="hh">标题:{{name}}</h2>
<h2 ref="hello">你好1</h2>
<h2 ref="world">你好2</h2>
</div>
<script type="text/javascript">
var vm = new Vue({
data:{
msg:'11',
name:'tom'
}
}).$mount('#itany');
vm.name = "222333";
vm.$nextTick(function(){
console.log(vm.$refs.hh.textContent);
})
</script>
</body>
</html>
vm.$set();
vm.$delete();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="itany">
<button @click="doUpdate">修改属性</button>
<button @click="doAdd">添加属性</button>
<button @click="doDelete()">删除属性</button>
<div>{{user.name}}</div>
<div>{{user.age}}</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#itany',
data:{
user:{
id:'1001',
name:"tom",
age:'1'
}
},
methods:{
doUpdate(){
this.user.name='tom1';
},
doAdd(){
if(this.user.age){
++this.user.age;
}else{
Vue.set(this.user,'age',46);
}
console.log(this.user);
},
doDelete(){
if(this.user.age){
Vue.delete(this.user,'age');
}else{
}
}
}
})
</script>
</body>
</html>
vm.$watch();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监视数据的变化,使用$watch</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#itany',
data:{
name:'tom',
age:'23',
user:{
id:'1001',
name:'uu'
}
},
watch:{
age:(newVal,oldVal) => {
console.log('name被修改了old:'+oldVal);
console.log('name被修改了new:'+newVal);
},
user:{
handler:(newVal,oldVal)=>{
console.log('user被修改了old:'+oldVal.name);
console.log('user被修改了new:'+newVal.name);
},
deep:true
}
}
})
}
</script>
</head>
<body>
<div id="itany">
<input type="text" name="" v-model="name">
<h1>{{name}}</h1>
<br>
<input type="text" name="" v-model="age">
<h1>{{age}}</h1>
<br>
<input type="text" name="" v-model="user.name">
{{user.name}}
</div>
</body>
</html>复制代码