一、vue生命周期

vue实例从创建到销毁的过程,称为生命周期,共有八个阶段。

这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。

beforeCreate(){  //组件实例刚刚创建,还未进行数据观测和事件配置
                
},
created(){  //实例已经创建完成,并且已经进行数据观测和事件配置
                
},
beforeMount(){//模板编译之前,还没挂载
                
},
mounted(){ //模板编译之后,已经挂载,此时才会渲染页面,才能看到页面上数据的展示
                    
},
beforeUpdate(){//组件更新之前
                
},
updated(){//组件更新之后
                
},
beforeDestroy(){//组件销毁之前
                
},
destroyed(){  //组件销毁之后
                    
}

这几个钩子中,最常用的是created()mounted()

二、计算属性

计算属性也是用来存储数据,但具有以下几个特点:

  • 数据可以进行逻辑处理操作
  • 对计算属性中的数据进行监视

1、基本用法

<div id="app">
    {{addZero}}
</div>
    
new Vue({
    el: '#app',
    data: {
        num: 8
    },
    computed: {
        //这是计算属性的get方法,用于取值
        addZero() {
            return this.num > 10 ? this.num : '0' + this.num;
        }
    }
})

这里的addZeronum一样,都是属性。不过addZero是依赖于num、进行计算后的值。一旦num的值发生变化,addZero的值也会随之变化。

 <div id="app">
    {{num}}----{{addZero}}
    <br>
    <button type="button" @click="change">点击改变num</button>
 </div>
    
 new Vue({
    el: '#app',
    data: {
        num: 8
    },
    methods: {
        change: () => {
            this.num++;
        }
    },
    computed: {
        addZero:() => {
            return this.num > 10 ? this.num : '0' + this.num;
        }
    }
 })

一旦我们点击按钮改变num的值,那么因为计算属性实时监测依赖项,addZero也会跟着发生变化。

2、计算属性 vs 方法

将计算属性的get函数定义为一个方法也可以实现和计算属性类似的功能。那么二者之间有什么区别?

  • 区别一:计算属性是基于它的依赖进行实时更新的,方法则是调用才更新
  • 区别二:计算属性是有缓存的,只要相关依赖没有改变,多次访问计算属性得到的值是之前缓存的计算结果,不会多次执行。操作一个没有依赖项的值也是如此。

官方文档给出了下面这个例子:

computed: {
  now: function () {
    return Date.now()
  }
}

计算属性存在缓存,这里的now值不会发生变化。

3. get和set

计算属性由两部分组成:get和set,分别用来获取计算属性和设置计算属性。默认只有get,如果需要set,要自己添加。

        <div id="app">
        {{num}}----{{addZero}}
        <br>
        <button type="button" @click="change(5)">点击改变num</button>
    </div>
    
   new Vue({
        el: '#app',
        data: {
            num: 8
        },
        methods: {
            change(newNumber) {
                this.addZero = newNumber;
            }
        },
        computed: {
            addZero: {
                get() {
                    return this.num > 10 ? this.num : '0' + this.num;
                },
                set(newNum) {
                    this.num = newNum
                }
            }
        }
    })

我们再change方法中改变addZero属性的值的时候会自动调用它的set方法。

三、实例属性和方法

vue中给实例和属性提供了若干属性和方法。

1、属性

获取属性的语法:实例名.属性名
以下是常用的属性:

  • vm.$el: 获取vue实例关联的元素DOM,进而可以对其进行操作
  • vm.$data: 获取数据对象data
  • vm.$options:获取选项,自定义的选项也可以在这里获取。
  • vm.$refs:获取所有添加ref属性的元素dom对象,进而可以对其进行操作

2、方法

vm.$mount()

手动挂载vue实例

var vm=new Vue({
    data:{
        msg:'Hello vue.js'
    }
 }).$mount('#app');

vm.$destroy()

销毁实例

vm.$destroy();  //销毁实例所占的内存空间

vm.$nextTick(callback)

在DOM更新完成后再执行回调函数,一般在修改数据之后使用该方法,以便获取更新后的DOM

var vm=new Vue({
    data:{
        msg:'Hello vue.js'
    }
 }).$mount('#app');
 
 //修改数据
 vm.msg='foo';
 
 console.log(vm.$refs.title.textContent);  //Hello vue.js
 vm.$nextTick(function(){
    console.log(vm.$refs.title.textContent); //foo
 });

DOM还没更新完,Vue实现响应式并不是数据发生改变之后DOM立即变化,需要按一定的策略进行DOM更新,需要时间!使用$nextTick方法等DOM更新完再获取数据。

vm.$set(target,key,value)

通过vue实例的$set方法为对象添加属性,可以实时监视。

<div id="app">
    {{user.name}}<br> {{user.age}}
    <br>
    <button type="button" @click="addAge">添加属性</button>
</div>
    
var vm = new Vue({
    data: {
        msg: 'Hello vue.js',
        user: {
            name: 'hedawei',
            gender: 'man'
        }
    },
    methods: {
        addAge() {
            /* this.user.age = 22; */
            this.$set(this.user, 'age', 22);
        }
    }
}).$mount('#app');

方法中使用原始的添加属性方法的话不会在模板中显示。使用$set方法会实时监控数据,然后添加。

vm.$watch(监听的属性,callback)

监控vue实例的变化

 vm.$watch('msg', (newValue, oldValue) => {
    console.log('msg被修改啦,原值:' + oldValue + ',新值:' + newValue);
 });

如果需要监控深度数据变化(例如监控一个对象中的某个属性),则需要在选项中添加{deep:true}

四、自定义指令

自定义指令分为自定义全局指令和自定义局部指令。

1、自定义全局指令

使用全局方法Vue.directive(指令ID,定义对象)。注:使用指令时必须在指名名称前加前缀v-,即v-指令名称

简单示例:

Vue.directive('hello',{
    bind(){ //常用!!
        alert('指令第一次绑定到元素上时调用,只调用一次,可执行初始化操作');
    },
    inserted(){
        alert('被绑定元素插入到DOM中时调用');
    },
    update(){
        alert('被绑定元素所在模板更新时调用');
    },
    componentUpdated(){
        alert('被绑定元素所在模板完成一次更新周期时调用');
    },
    unbind(){
        alert('指令与元素解绑时调用,只调用一次');
    }
 });

这里定义了一个名为hello的指令,指令定义函数提供了几个钩子函数,分别在不同的时期生效。我们像下面这样使用这个指令:

<p v-hello>hello vue.js</p>

大多数情况下,我们只需要使用bindupdate钩子函数。vue里提供了函数的简写形式:

Vue.directive('hello', function () {
    alert("hello vue.js");
})  

钩子函数有两个常用的参数elbindingel是绑定的DOM对象,binding是一个对象,包含若干属性。

拿到DOM对象,我们就可以对DOM进行一些操作。

<p v-hello="msg">hello vue.js</p>

Vue.directive('hello', function (el,binding) {
    el.style.color = "red";
    
    //属性name是指令的名字(不带v-)
    console.log(binding.name);     //hello
    //属性value是传递给指令的值
    console.log(binding.value);   //alice
    //属性expression是指令值的字符串形式(个人感觉就是类似变量名)
    console.log(binding.expression);  //msg
    //属性arg是传递给指令的参数(和传值写在一起容易令初学者困惑,下面分开写  
    //合在一起写的写法是<p v-hello:123="msg">hello vue.js</p>)
    //<p v-hello:123>hello vue.js</p>
    console.log(binding.arg);       //123
    //属性modifiers是一个包含修饰符的对象。
    //与传参传值合在一起的写法是 <p v-hello:123.bar="msg">hedawei</p>
    //<p v-hello.bar>hello vue.js</p>
    console.log(binding.modifiers);    //{bar:true}
})  

 var vm = new Vue({
    el: '#app',
    data: {
        msg: 'alice'
    }
 })

2、局部自定义指令

局部自定义指令写在实例的directives选项中。

  var vm = new Vue({
    el: '#app',
    data: {
        msg: 'alice'
    },
    methods: {
    },
    directives: {
        word: function(el, binding) {
            console.log(binding.name);
        }
    }
 })

其他用法与全局自定义指令一致。

五、过度(动画)

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。本质上还是使用CSS3动画:transition、animation属性。

1、基本用法

使用transition组件,将要执行动画的元素包含在该组件内:

    <transition name="fade">
        运动的元素
</transition>   

我们需要为其定义一个name属性,以便后面为其添加css样式。

动画有6个CSS类名,下面结合例子说明:

<style>
        button {
            display: block;
            margin: 20px auto;
        }
        
        p {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
        }
        
        .fade-enter-active,
        .fade-leave-active {   //定义整个过渡期间的效果
            transition: all 2s ease;
        }
        
        .fade-enter-to {    //定义过渡进入的最终效果
            opacity: 1;
            width: 100px;
            height: 100px;
        }
        
        .fade-leave-to {    //定义过渡离开的最终效果
            opacity: 0;
            width: 50px;
            height: 50px;
        }
        
        .fade-enter {      //定义过渡进入的开始效果
            opacity: 0;
            width: 50px;
            height: 50px;
        }
    </style>
    
    <div id="app">
        <button type="button" @click="flag = !flag">点 击</button>
        <transition name="fade">
            <p v-show="flag">
            </p>
        </transition>
    </div>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                flag: false
            }
        });
    </script>

2、钩子函数

vue中给过渡的不同时期提供了不同的钩子函数。

<transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave">
        <p v-show="flag">
        </p>
</transition>
        
 new Vue({
        ...
    methods: {
        beforeEnter(el) {
            alert('动画进入之前');
        },
        enter(el) {
            alert('动画进入');
        },
        afterEnter(el) {
            alert('动画进入之后');
        },
        beforeLeave(el) {
            alert('动画离开之前');
        },
        leave(el) {
            alert('动画离开');
        },
        afterLeave(el) {
            alert('动画离开之后');
        }
    }
 });

在这不同的时期,我们可以取到过渡元素的DOM对象,从而对其进行操作。

3、多元素过渡

上面的<transition></transition>标签只适用于单元素过渡。若要对多元素进行过渡,则需要使用<transition-group></transition-group>标签,并且绑定key属性,设置不同的值。

    <button type="button" @click="flag = !flag">点 击</button>
    <transition-group name="fade">
        <p v-show="flag" :key="1">
        </p>
        <p v-show="flag" :key="2">
        </p>
    </transition-group>

4、结合第三方库一起使用(animate.css)

我们可以使用vue的自定义过渡类名结合第三方动画库实现自定义动画效果。这六个自定义类名和vue内置的类名类似:

  • enter-class
  • enter-active-class
  • enter-to-class
  • leave-class
  • leave-active-class
  • leave-to-class
    示例:
 p {
    width: 300px;
    height: 300px;
    background-color: red;
    margin: 0 auto;
 }

 <div id="app">
    <button type="button" @click="flag = !flag">点 击</button>
    <transition enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
        <p v-show="flag">
        </p>
    </transition>
</div>

 <script>
    new Vue({
        el: '#app',
        data: {
            flag: false
        }
    });
 </script>

未完待续。。。

你可能感兴趣的文章

载入中...
间阳幕宾 间阳幕宾

182 声望