VUE学习第四次
-----------------------------------------------------
过滤器 可以绑定多个 串行
-----------------------------------------------------
生命周期：VUE 实例从创建到销毁的过程，生命周期
钩子函数 事件劫持机制 VUE内置事件
8个阶段
mounted 模板编译后
例子在demo 9 里面
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>生命周期</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<script stpe="text/javascript" src="lib/jquery/dist/jquery.js"></script>
<script stpe="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script>
<script stpe="text/javascript" src="vue/dist/vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#demo9',// 2.0不允许挂载到html,body元素上
data:{
msg:'welcome'
},
methods:{
update(){
this.msg="欢迎";
},
destroy(){
this.$destroy();
}
},
beforeCreate(){
console.log('loading');
alert('组件实例刚刚创建，还未进行数据观测和事件配置');//创建前状态 el和data并未初始化
},
created(){//常用 创建完毕状态 完成了data数据的初始化 el没有
alert("实例已经创建完成，并且已经进行数据观测和事件配置")
},
beforeMount(){ //挂载前状态 完成了el和data初始化
this.msg="112233";
alert("模板编译之前，还没挂载");
//这个时候修改是可以修改data 里面的值的
},
mounted(){//常用 挂载结束状态 完成挂载
alert("模板编译之后，已经挂载，此时才会有渲染页面，才能看到页面上数据的显示")
//这里可以写获取到ajax 拿到的数据的旋绕逻辑
},
beforeUpdate(){ //更新前状态
alert("组件更新之前");
},
updated(){ //更新完成状态
alert("组件更新之后");
},
beforeDestroy(){ //销毁前状态
alert("组件销毁之前");
},
destroyed(){ //销毁完成状态
alert('组件销毁之后');
//此处销毁指的是销毁实例 并不是销毁数据
}
});
}
</script>
</head>
<body>
<div id="demo9">
<p>{{msg}}</p>
<br>
<button @click="update">更新数据</button>
<button @click="destroy">销毁组件</button>
</div>
</body>
</html>
-----------------------------------------------------
计算属性 属性 不是方法
computed
计算属性和方法的区别 计算属性有个典型的
缓存 有一个缓存的机制
函数就会不停的调用 没有缓存机制
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>计算属性 （引用 缓存）</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<script stpe="text/javascript" src="lib/jquery/dist/jquery.js"></script>
<script stpe="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script>
<script stpe="text/javascript" src="vue/dist/vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#demo10',// 2.0不允许挂载到html,body元素上
data:{
msg:'xx',
num1:100
},
methods:{
change:function(){
this.num2 = 111;
},
getNum2(){
console.log(this.num2);//这里其实是 去 num2 的get里面了
},
getchange(){ //方法调用
console.log("methods");
//return this.num1-1;
}
},
computed:{//计算属性 用来存储和处理数据
reverseMsg:function(){ //这个是属性
return this.msg.split("").reverse().join("");//反转
//计算属性 默认没有变更的时候 可以不写 get 和set 默认get
},
num2:{
get:function(){
console.log("get");
return this.num1-1;
//获取 num2 默认调用的就是这个
},
set:function(val){
this.num1 = val;
//修改
}
}
}
});
}
</script>
</head>
<body>
<div id="demo10">
<p>{{msg}}</p>
<p>{{reverseMsg}}</p>
<!--计算属性值变更操作-->
<p>{{num2}}</p>
<button @click="change">change</button>
<!--计算属性获取-->
<button @click="getNum2">get num2</button>
</div>
</body>
</html>
-----------------------------------------------------
$watch
事件监听
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>事件监听</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<script stpe="text/javascript" src="lib/jquery/dist/jquery.js"></script>
<script stpe="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script>
<script stpe="text/javascript" src="vue/dist/vue.js"></script>
<script>
var vm = null;
window.onload=function(){
vm = new Vue({
el:'#demo11',// 2.0不允许挂载到html,body元素上
data:{
name:'moris',
age:22,
user:{
id:100,
name:''
},
ageChange:'',
nameChange:''
},
methods:{
changeUser(){
this.user.name="xxxx"
}
},
watch:{//只能监听到单个
age:function(newValue, oldValue){
console.log('ageChange'+'age被修改了', newValue, oldValue);
this.ageChange = '我的年龄'+newValue +'我的姓名'+ this.name;
},
name:function(val) {
this.nameChange ='nameChange'+ '我的姓名'+val +'我的年龄'+ this.age;
},
user:{
handler:(newValue, oldValue) => { //handler默认执行函数 也可以去掉
console.log('user被修改了', newValue, oldValue);
},
deep:true //表示监视对象的属性变化,false则handler函数不执行,但此时看不到newValue与oldValue区别
//为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
}
},
computed: {
info: function () {
return 'computed'+'我的年龄'+this.age + '我的姓名' + this.name
}
}
});
//方式2
vm.$watch('name', function(newValue, oldValue){
console.log('name被修改了', newValue, oldValue);
});
}
</script>
</head>
<body>
<div id="demo11">
<input type="text" v-model="name">
<h3>{{name}}</h3>
<input type="text" v-model="age">
<h3>{{age}}</h3>
<!-- age变化触发ageChange -->
<h3>{{ageChange}}</h3>
<input type="text" v-model="user.name">
<h3>{{user.name}}</h3>
<!-- name变化触发nameChange -->
<h3>{{nameChange}}</h3>
<!-- 与计算属性的区别 当监听到值发生变化时是过程式开发，比较笨重-->
<h3>{{info}}</h3>
</div>
</body>
</html>
-----------------------------------------------------
