vue : 生命周期钩子 +自定义过滤器 +自定义指令

生命周运算期钩子

所有的生命周期钩子自动绑定 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的打印结果

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

自定义动画

简单说就是让谁动，就把谁用<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：在离开动画之后

<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>