生命周运算期钩子
- 所有的生命周期钩子自动绑定 this 上下文中的实例
- 访问数据
- 对属性和方法进行
- 不能使用es6中的箭头函数来定义生命周期函数
生命周期钩子函数
生命周期钩子函数视图.png
- 初始之前 / 初始之后
- beforeCreate
- created
- 挂载之前 / 挂载之后
- beforeMount
- mounted
- 更新之前 / 更新之后
- beforeUpdate
- updated
- 销毁之前 / 销毁之后
- beforeDestroy
- destroyed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>声明周期钩子</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div id="app">
<div>
<button
@click="change"
type="button"
class="btn btn-info btn-lg"
>
点击更新
</button>
<h1>{{msg}}</h1>
</div>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data:{
msg: 'Hello World !'
},
methods: {
change(){
this.msg = '数据更新';
}
},
beforeCreate(){
alert('初始之前');
},
created(){
alert('初始之后');
},
beforeMount(){
alert('挂载之前');
},
mounted(){
alert('挂载之后');
},
beforeUpdate(){
alert('更新之前');
},
updated(){
alert('更新之后');
},
beforeDestroy(){
alert('销毁之前');
},
destroyed(){
alert('销毁之后');
}
});
// 在以上三个状态正确调用后使用
// vm.$destroy();
</script>
</body>
</html>
下面为代码执行的状态
-
初始之前
初始之前.png
-
初始之后
初始之后.png
-
挂载之前
挂载之前.png
-
挂载之后，点击确定后正常显示页面
挂载之后.png
挂载之后点击确定，正常显示页面.png
-
更新之前
点击跟新按钮之后-更新之前.png
-
更新之后，点击确定后页面更新
更新之后.png
确定数据更新之后.png
-
销毁之前
销毁之前.png
-
销毁之后
销毁之后.png
自定义过滤器
- vue1 自带过滤器
- vue2 可以自己定义，设置需要的过滤器
- 简介：自定义过滤器就类似于自定义指令，可以用全局的Vue.filter() 注册一个自定义过滤器
- 参数
- ID
- 函数
- 函数的参数为值，返回转换后的值
- 可以为任意数量的值
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义过滤器</title>
<link rel="stylesheet" href="bootstrap.css">
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="container" style="padding: 50px 0;">
<ul class="list-group h3">
<li v-for="(item,i) in lists" :class="{active:index===i}" class="list-group-item">{{item | suffix}}</li>
</ul>
</div>
</div>
<script src="vue.js"></script>
<script>
Vue.filter('suffix',val=>(`￥${val}.00 元`));
let vm = new Vue({
el: "#app",
data:{
lists: [100,200,300,400,500],
index: 0
}
})
</script>
</body>
</html>
浏览器渲染结果：
自定义过滤器.png
自定义过滤器就相当于自定了一个模板，优化代码，提高代码的重用性
自定义指令
- 简而言之就是自己向Vue添加自己定义的指令
- 通过v-XXX 确定指令名称
- 通过Vue.directive('XXX',function(){}) 一个参数注册指令名称，第二个参数注册行为
demo 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令-drag</title>
<style>
span{
position: absolute;
display: inline-block;
top: 100px;
left: 100px;
margin: 20px;
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="app">
<span class="drag" v-drag></span>
</div>
<script src="vue.js"></script>
<script>
Vue.directive('drag',el=>{
console.log(el);
el.onmousedown = e=>{
let disX = e.clientX - el.offsetLeft;
let disY = e.clientY - el.offsetTop;
document.onmousemove = e=>{
el.style.left = e.clientX - disX + 'px';
el.style.top = e.clientY - disY + 'px';
};
document.onmouseup = e=>{
document.onmousemove = null;
document.onmouseup = null;
}
}
})
let vm = new Vue({
el: "#app"
})
</script>
</body>
</html>
页面渲染结果：
自定义指令-drag.png
- READEME：根据上面的demo
- v-drag ： 自定义指令名称
- Vue.directive("drag",el=>{}) ： 注册指令和指令对应的行为
- Vue.directive("drag",function(){console.log(arguments)}) ，通过arguments了解具体的参数（上demo）
- 第一个参数：设置指令的元素
- arguments的打印结果
- Vue.directive("drag",function(){console.log(arguments)}) ，通过arguments了解具体的参数（上demo）
arguments打印结果.png
demo 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-border="blue">sdljlsjd</h1>
</div>
<script src="vue.js"></script>
<script>
Vue.directive('border',function($1,$2){
console.log(arguments);
$1.style.border = `dashed 2px ${$2.value}`;
})
let vm = new Vue({
el: '#app',
data: {
blue: 'red'
}
})
</script>
</body>
</html>
页面渲染结果：
自定义指令.png
- READEME：根据上面的demo
- 在 页面标签中自定义指令，demo中的自定义指令为 v-border
- 自定义指令的值自定义的值，demo中的自定义值为 blue，对应vue实例中对象名 blue
- vue实例中自定义属性名的值为自定义属性值， demo中的自定义属性值为 red
- 实现自定义的指令通过 Vue.directive() 实现
- 参数
- 第一个参数：ID ，自定义指令 v- 后面的值
- 第二个参数：函数
- 函数有5个值 （所用到的）
- 第一个参数：定义指令的元素
- 第二个参数：Object对象，可以获取到我们设置的ID名：border，指令名：v-border，属性值：red，属性名：blue
- 函数有5个值 （所用到的）
- 参数
自定义动画
- 简单说就是 让谁动，就把谁用<transition></transition>包裹起来
- 一组动画就用<transition-group></transition-group>包裹起来，当然，transition-group中的每一个动画单独提都需要一个独一无二的key值
- 动画部分，根据name值，按照css3的动画去编写 ，动画 可到animate.css官网学些：https://daneden.github.io/animate.css/
- name值的四个状态：name="move"
- move-enter：在进入动画之前
- move-enter-active：在进入动画之后
- move-leave：在离开动画之前
- move-leave：在离开动画之后
- name值的四个状态：name="move"
<transition name="move">
<div></div>
</transition>
<transition-group name="move">
<div v-for="(item,i)" key="item._id">
<span></span>
<p></p>
</div>
</transition-group>
- 自定义动画配合animate.css (不需要name
<transition
enter-active-class="animated fadeInUp"
leave-active-class="animated fadeOutDown
>
<div></div>
<transition>
<transition-group
enter-active-class="animated fadeInLeft"
leave-active-class="animated fadeInRight"
>
<div key="1"></div>
<div key="2"></div>
</transition-group>
网友评论