一、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:function(){
// console.log(new Date());
// return this.num1-1;
// }
num2:{
get:function(){
console.log(new Date());
return this.num1-1;
},
set:function(val){
// console.log('修改值');
this.num1 = 1111;
}
}
},
methods:{
changemsg(){
// this.msg = 'i love you';
this.num1 = 666;
},
getnum2(){
console.log(new Date());
return this.num1-1;
},
change(){
this.num2=11;
}
}
})
function a(){
setInterval(function(){
// console.log(vm.num2);
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({
// // el:'#itany',
// // name:'tom',
// // age:24,
// // show:function(){
// // console.log('show');
// // },
// data:{
// msg:'welcome to itany'
// }
// })
// 属性
// vm.属性名 获取data中的属性
// console.log(vm.msg);
// vm.$el 获取vue实例关联的选择器
// console.log(vm.$el); 是DOM对象
// vm.$el.style.color='red';
// vm.$data //获取数据对象data
// console.log(vm.$data.msg);
// vm.$options //
// console.log(vm.$options.name);
// console.log(vm.$options.age);
// vm.$options.show();
// vm.$refs //获取页面中所有添加属性的元素
// console.log(vm.$refs.hello);
// console.log(vm.$refs.world);
// vm.$refs.hello.style.color = 'red';
// 方法
// vm.$mount //手动的挂载vue实例
// vm.$mount('#itany');
var vm = new Vue({
data:{
msg:'11',
name:'tom'
}
}).$mount('#itany');
// vm.$destroy() 销毁实例的
// vm.$destroy();
// console.log(vm.msg);
//vm.nextTick() 在DOM更新完成之后 再执行回调函数 一般在修改数据之后使用该方法，以便获取更新后的DOM
// 修改数据
vm.name = "222333";
// DOM还没更新完 view实现响应式并不是数据发生改变之后 dom立即变化 需要按照一定的策略进行dom更新
// console.log(vm.$refs.hh.textContent);
// console.log(vm.$refs.hello);
vm.$nextTick(function(){
// DOM更新完成了 更新完成后 执行此代码
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(){
// this.user.age = 25;
//通过普通方式为对象添加属性时vue无法实时的监视的
// this.$set(this.user,'age',18);
//通过vue实例的$set方法为对象添加属性，可以实时的监视
// Vue.set(this.user,'age',28);
//全局的写法
if(this.user.age){
++this.user.age;
}else{
Vue.set(this.user,'age',46);
}
console.log(this.user);
},
doDelete(){
if(this.user.age){
//delete.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'
}
},
// 方式2 使用vue实例提供的watch方法
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 //深度监视 //当对象的属性发生变化时候 也会监视
}
}
})
//方式1：使用vue实例提供的$watch()方法
// vm.$watch('name',function(newVal,oldVal){
// console.log('name被修改了old:'+oldVal);
// console.log('name被修改了new:'+newVal);
// })
}
</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>
网友评论