跟着技术胖学Vue2.0—第二季总结

写在前面

由于最近毕业论文写得差不多了，所以花费了大量的时间在编程上，第二季的内容基本上一周就学完了。最后复习的时候差不多重写了三次才能勉强可以自己完全不看过去的代码复原本季学过的东西，不多练真的会忘啊，现在用博客的形式再加深一下印象吧。

全局API汇总

第二季学的都是全局API，总共有九节课，不过component组件就讲了四节课，所以总共就学了6个内容，它们分别是Vue.directive，Vue.extend，Vue.set，Vue生命周期，Vue三种模板写法和Vue.component。

我在复习的时候发现有的API的用法好容易混淆啊，所以在总结的时候就根据自己的易错点进行对比记忆，下面对这些内容进行简单的分组。

1、第一组：Vue.directive&Vue.extend&Vue生命周期&Vue.component

这一组基本上就涵盖了第二季的大部分内容了，我容易混淆的是它们可以分为两个部分，第一个是Vue.directive和Vue生命周期都有钩子函数，前者有5个，后者有10个，这个确实值得对比记忆一下。

第二个是Vue.directive、Vue.extend和Vue.component的写法有相似的地方，对我这种小白来说也很容易混淆，就放在一起对比记忆。

首先就从Vue.directive、Vue.extend和Vue.component的写法入手吧。Vue.directive是用于自定义指令的，像v-for、v-bind等都是自带的指令，我们可以用这个API自定义自己的指令；Vue.extend是用于扩展Vue构造器功能的，可以重新定义一个新的标签，也可以将扩展部分绑定在已有的标签上；Vue.component用于定义组件，其实和extend扩展有点像，因为都可以用标签的形式来表示。

Vue.direcitve:

Vue.directive('ll',function(el,binding){
      el.style='color:'+binding.value;
})

Vue.extend:

var authorExtend = Vue.extend({
            template:"<p><a :href='authorURL'>{{authorName}}</a></p>",
            data:function(){
                return{
                    authorURL:'https://tripnoter.cn/',
                    authorName:'旅行荚'
                }
            }
})
new authorExtend().$mount('author');

Vue.component:

Vue.component('panda',{
            template:`<p style='color:orange'>Panda is from {{here}}
                <city></city>
                </p>`,
            props:['here'],
            components:{
                'city':{
                    template:`<p style='color:orange'>sichuan of China</p>`
                }
            }
})

上面给出了三个API的写法，其中，Vue.directive的第一个参数是指令名称，不加v-，但在使用时是需要加上v-的，然后接一个函数用于定义指令的具体功能。两个参数el和binding分别表示绑定自定义指令的标签对象和自定义指令对象，binding包括很多东西，比如指令的值，指令的表达式等等，具体的内容可以在写代码的时候打印查看。

Vue.component有类似的写法，第一个参数也是组件名，但是组件名是没有v-的，因此就是完整的名称。后面接的是一个对象，里面用于定义组件的具体内容，包括组件模板、属性以及子组件等。

Vue.extend是要先var一个变量，然后才能使用，具体内容包括模板和数据。需要注意的是，Vue.extend里面的template的写法要用“”号，而Vue.component里的template写法要用``号。而data的写法和Vue构造器也不一样，Vue.extend中的data是一个函数，通过返回值来声明具体的值。

要区分的第二个点是Vue.directive的钩子函数和Vue生命周期的钩子函数。刚刚的Vue.directive定义自定义指令的写法也可以换成钩子函数来实现，将具体功能放在第一个函数bind里就行，如下：

vue.directive:

Vue.directive('ll',{
            bind:function(el,binding){
                el.style='color:'+binding.value;
                console.log('1-bind');
            },
            inserted:function(){
                console.log('2-inserted');
            },
            update:function(){
                console.log('3-update');
            },
            componentUpdated:function(){
                console.log('4-componentUpdated');
            },
            unbind:function(){
                console.log('5-unbind');
            }
})

Vue生命周期函数:

            beforeCreate:function(){
                console.log('1-beforeCreate');
            },
            created:function(){
                console.log('2-created');
            },
            beforeMount:function(){
                console.log('3-beforeMount');
            },
            mounted:function(){
                console.log('4-mounted');
            },
            beforeUpdate:function(){
                console.log('5-beforeUpdate');
            },
            updated:function(){
                console.log('6-updated');
            },
            activated:function(){
                console.log('7-activated');
            },
            deactivated:function(){
                console.log('8-deactivated');
            },
            beforeDestroy:function(){
                console.log('9-beforeDestroy');
            },
            destroyed:function(){
                console.log('10-destroyed');
            }

上面两个生命周期表示的具体过程其实很相似，但是使用的函数名是不一样的，要注意区分记忆。

2、第二组：Vue.set

这个API其实很简单，它可以用于实现修改data中的数组值，因为普通的下标修改法在Vue中无法监听到，所以使用这个API来简便实现上述功能。

Vue.set:

function change(){
      Vue.set(app.arr,1,'dd2');
}

这个API我试过放在methods里，发现会报错，可能只能在Vue外部使用吧。注意使用时Vue.set里需要传三个参数，第一个是要改变的对象，第二个是要改变的位置，第三个是将要变为的值。 

3、第三组：三种模板的写法

这个模板是用到Vue.component中的``来实现的模板，和Vue.directive不一样。

方法一：选项模板

直接写在Vue构造器的template选项里：

template:`<h1 style='color:red'>这是选项模板</h1>`

方法二：template标签模板

写在html中的template标签里，不过需要在Vue构造器的template选项里挂载一下id：

<template id="dd2">
    <h1 style='color:red'>这是template模板</h1>
</template>

方法三：script标签模板

写在html中的script标签里，不过需要在Vue构造器的template选项里挂载一下id：

<script id="dd3">
     <h1 style='color:red'>这是script模板</h1>
</script>

方法二和方法三看上去好像差不多，不过script标签里的src属性可以引用外部文件，这样就可以将模板内容写在外部，实现类似于引用js文件的效果。

---

以上就是我整理的第二季的重点内容，下次再见！