vue的生命周期钩子函数
所谓钩子函数:
* 在vue的不同阶段 会暴露出一个个 回调函数
* 可以让使用vue的人 进行不同时期做不同事情
// vm.$destroy();//销毁当前vue对象 会触发beforeDestroy destroyed钩子函数
var vm=new Vue({
// el:'#app',
data:{
msg:'Hello Vue!',
},
// 钩子函数
beforeCreate(){
alert("初始化之前!")
},
created(){
alert("初始化完成")
},
beforeMount(){
alert("挂载之前!")
},
mounted(){
alert("挂载成功!")
},
beforeUpdate(){
alert("data里面的变量即将要更改!");
},
updated(){
alert("data里面的变量值更改成功!")
},
beforeDestroy(){
alert("vue对象即将销毁!");
},
destroyed(){
alert("vue对象销毁成功!")
}
})
vm.$mount("#app"); //通过方法 动态挂载
vue对象本身自带的方法 自定义属性和方法
那么vue本身自带的属性跟方法:
// vm.$el vm.$data vm.$mount() vm.$destroy() vm.$options
我们看到的data和el其实本质上来说 并不是vue对象
本身的属性 而是Vue对象里面传入的option对象的属性
所以正常访问el应该是 vue对象.option.el
但是mv.option也没有
vue对象给我们提供了访问这个对象的属性:
vm.$options 就是方法括号里面这个配置对象
console.log(vm.$options);
console.log(vm.$options.el);
// vm.$el=vm.$options.el;//vue源码中 有这句代码
console.log(vm.$el);//返回js的dom对象 挂载的那个目标
console.log(vm.$data);*/
自定义属性和方法 实际上定义在$options
var vm=new Vue({
el:'#app',
data:{
msg:'Hello Vue!',
},
// 自定义方法
show(){
alert("vue自定义方法")
},
location:"文化大厦"
});
vm.$options.show();
console.log(vm.$options.location);
computed计算属性
所谓计算属性 就是一个变量的值是根据另一个变量的值计算出来的
也就是当前这个变量的值由一堆代码计算出来
因为data里面定义的变量 值 只能是简单的表达式
而不能是复杂代码
还有 data里面无法使用this
所以我们要用计算属性的方法 定义变量
从而让这个变量拥有 计算结果的功能:
在Vue对象的大括号里面 定义computed属性
computed:{
要渲染到页面的变量1:function(){
计算的代码
return 这个变量计算后的值
}
}
看起来computed里面像是定义了一个函数
实际上不是!!!!! 这个函数是为了写代码 并计算出当前这个变量的值
return就是返回这个变量计算后的值
ps: computed里面定义的变量 在页面上也能正常渲染
跟data里面定义的变量没有区别 唯一多的功能就是 computed里面的变量可以写代码
一旦computed里面 引入了 data的变量(只要调用了就算)
那么就会进行自动关联 data的这个变量值发生变化时
该computed方法也会被触发
ps: 计算属性 既然是根据 其他变量的变化而变化的 那么自己本身 并不能直接修改值
<div id="app">
<h1>我是a变量:{{a}}</h1>
<h1>我是b变量:{{b}}</h1>
<h1>我是c变量:{{c}}</h1>
<h1>我是f变量:{{f}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
a:25,
c:88
// b:this.a*10 此处vue对象没有创建完成 this还不能使用
},
computed:{
// 此处不能写箭头函数 否则 this就指向了computed本身 而不是vue对象
b:function () {
// console.log(this.a+":a变量发生了变化,b变量的计算属性方法被触发");
// console.log("1");
// return 999;
return this.a*10
},
f(){
return this.c*100;
}
}
});
</script>
过滤器
ps: 过滤器可以使用的地方: mustache语法(双花括号位置) v-model
专门针对某一个变量的值的一个过滤作用
定义好过滤器 在哪一个变量旁边引入 就检查哪一个变量
一旦变量的值不符合过滤器 则过滤器里面会进行自定义代码处理
格式:
在Vue的大括号里面 定义filters属性
filters:{
过滤器的名字:function(过滤器监听的那个变量的新值){
写检查的代码
return 该变量的新值
}
}
使用过滤器:
{{data里面的变量 | 过滤器名字}}
ps: 过滤器所监听的变量 一旦发生改变时 当前data里面的其他变量
也会重新刷新值 如果其他变量也用到了过滤器 那么也会被触发
<div id="app">
<p>
<input type="text" v-model="msg">
<button @click="show">获取</button>
</p>
<h1>我是a变量:{{a | check}}</h1>
<h1>我是b变量:{{b | check}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
a:10,
msg:"",
b:69
},
methods:{
show(){
this.a=parseInt(this.msg)
}
},
filters:{
check:function(newVal){
// console.log(newVal);
if(newVal<100){
return newVal;
}
alert("数字太大了,给你变成最大可操作值!")
return 99;
}
}
});
</script>
过滤器和计算属性的区别:
计算属性:
至少两个变量 其中一个变量的值是根据另一个变量的值变化而变化
过滤器:
当前一个变量 引入过滤器后 针对这个变量额值一个监听
一旦不符合规则 则做对应处理
过滤器可以同时用在多个变量上
可以使多个变量 进行同一个规则的检查
watch监听器
监听指定变量的变化 一旦发生值的改变 监听器的回调就会被触发
格式:
在vue的大括号里面 定义watch
watch:{
被监听的变量名称:function(新值,旧值){
// 变量值发生改变时 触发的回调
}
}
watch如果监听的是基本数据类型 那么 默认值改变时 监听器就会被触发
var vm=new Vue({
el:'#app',
data:{
msg:'Hello Vue!',
per:{
name:"小砌墙",
age:16
}
},
watch:{
msg(newVal,oldVal){
console.log("msg的值发生了改变:",newVal,oldVal);
},
}
});
watch如果监听的是引用数据类型(对象)
那么默认是浅层监听
watch的深层监听格式:
watch:{
被监听的对象变量:{
handler:function(新值,旧值){
数据发生改变时 触发的回调
},
deep:true //深层监听 默认false
}
}
var vm=new Vue({
el:'#app',
data:{
msg:'Hello Vue!',
per:{
name:"小砌墙",
age:16
}
},
watch:{
/*per(newVal,oldVal){
// 默认浅层监听
console.log("per的值发生了改变:",newVal,oldVal);
}*/
per:{
handler(newVal,oldVal){
console.log("per的值发生了改变:",newVal,oldVal);
},
deep:true
}
}
});
过滤器的全局引入方式
Vue.filter("自定义过滤器的名字",回调函数(参数是新值))
//filter方法是Vue的静态方方法(构造函数名调用的)
Vue.filter("check",function (newVal) {
return newVal+"xx";
})
全局注册监听器
Vue对象调用自带的$watch方法(默认浅层监听)
vm.$watch("a",function (newVal,oldVal) {
console.log("a变量发生了变化",newVal,oldVal);
})
深层监听
vm.$watch("per",{
handler:function (newVal,oldVal) {
console.log("per变量发生了变化",newVal,oldVal);
},
deep:true
})
Vue2.0动画实现有两种方式:
1.结合css3的动画来实现
移动端项目时 具体结合实际例子去讲
2.结合animate.css库实现动画(简单)
主要是针对元素的进入和离开实现动画
前提: 首先保证自己有一个元素是进入和离开切换的元素
其次: 把显示隐藏的元素外面套一个 transition标签
然后: 在transition标签的开始标签上面 定义两个属性
enter-active-class="animated animate.css里面的一个动画类名" (进入的class)
leave-active-class="animated animate.css里面的一个动画类名" (离开的class)
ps: 要记得 前边引入 animate.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
background-color: hotpink;
}
</style>
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div id="app">
<button @click="change">切换显示</button>
<!--enter-active-class="animated bounceIn"-->
<!--leave-active-class="animated fadeOut"-->
<transition
enter-active-class="animated rotateIn"
leave-active-class="animated zoomOutUp"
>
<div id="box" v-show="boo"></div>
</transition>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
boo:true
},
methods:{
change(){
this.boo=!this.boo;
}
}
});
</script>
</body>
</html>