Vue核心技术-30,手动挂载实例

一,前言

在一些特殊情况下,需要动态进行Vue实例的创建,这时需要手动进行实例的挂载
这一篇介绍Vue如何手动挂载实例

---

二,Vue生命周期之挂载

回顾一下,在介绍Vue生命周期时,Vue初始化有一个阶段就是寻找el选项或template选项进行挂载

从图中可以看到:

如果没有找到el选项,当vm.$mount(el)时会继续向下执行

---

三,手动挂载实例

如果Vue实例在实例化时没有收到el选项,就会处于"未挂载"状态
Vue提供了Vue.extend和$mount两个方法实现手动挂载实例

Vue.extend:

Vue.extend是Vue基础构造器,通过接收一个包含组件选项的对象作为参数,创建一个"子类"

$mount(el):

传入一个挂载点,$mount方法返回Vue实例本身,因此可以链式调用其他实例方法

<div id="app">

</div>

<script type="text/javascript">

    // 1,创建Vue子类
    var Comp = Vue.extend({
        template:'<div>手动挂载实例</div>'
    });

    // 2,实例化Vue(上边创建的Vue子类),并使用$mount方法挂载实例
    //方法1
    var vm = new Comp();
    vm.$mount('#app');

    //方法2
    new Comp().$mount('#app');

    //方法3
    new Comp({
        el:'#app'
    })

    //方法4
    var comp = new Comp().$mount();
    document.getElementById('app').appendChild(comp.$el)
</script>

---

四,结尾

手动挂载实例只做一个简单了即可,实际开发中几乎使用不到,只有在开发组件式时才有可能用到

到这里组件部分就告一段落了,
接下来介绍如何自定义指令和自定义Vue插件,
然后是Vue工程化
    Vue-cli:创建项目脚手架
    webpack+常用插件+dev,prd环境的配置优化
然后开始Vue全家桶的介绍:
    vue-router:路由-按需加载
    vuex:状态管理
    vue-resource:数据请求(目前使用vue-axios相对较多)
常用的UI组件库(PC+App)
    如:ElementUI,MintUI,iView,VUX等