vue学习笔记（二）

时间 2019-11-08

标签 vue 学习笔记繁體版

原文原文链接

1、vue生命周期

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

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

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

这几个钩子中，最经常使用的是created()与mounted()。express

2、计算属性

计算属性也是用来存储数据，但具备如下几个特色：缓存

数据能够进行逻辑处理操做
对计算属性中的数据进行监视

一、基本用法

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

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

<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也会跟着发生变化。dom

二、计算属性 vs 方法

将计算属性的get函数定义为一个方法也能够实现和计算属性相似的功能。那么两者之间有什么区别？函数

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

官方文档给出了下面这个例子：动画

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

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

3. get和set

计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，若是须要set，要本身添加。code

<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方法。

3、实例属性和方法

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

一、属性

获取属性的语法：实例名.属性名
如下是经常使用的属性：

vm.$el: 获取vue实例关联的元素DOM，进而能够对其进行操做
vm.$data: 获取数据对象data
vm.$options：获取选项，自定义的选项也能够在这里获取。
vm.$refs：获取全部添加ref属性的元素dom对象，进而能够对其进行操做

二、方法

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}

4、自定义指令

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

一、自定义全局指令

使用全局方法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>

大多数状况下，咱们只须要使用bind与update钩子函数。vue里提供了函数的简写形式：

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

钩子函数有两个经常使用的参数el和binding。el是绑定的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'
    }
 })

二、局部自定义指令

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

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

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

5、过分（动画）

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

一、基本用法

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

二、钩子函数

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对象，从而对其进行操做。

三、多元素过渡

上面的<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>

四、结合第三方库一块儿使用（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>

未完待续。。。