Vue.extend的用法

　　Vue.extend用于基于Vue構造器創(chuàng)建一個Vue子類，可以對Vue構造器進行擴展。它有一個options參數，表示包含組件選項的對象。下面我們通過例3-3演示Vue.extend的使用。

　　【例3-3】

　　(1)創(chuàng)建C：Users/itcast/Desktop/demo03.html文件，具體代碼如下：

<div id="app1">app1: {{title}}</div>
<div id="app2">app2: {{title}}</div>
<script>
var Vue2 = Vue.extend({
  data () {
    return { title: 'hello' }
  }
})
var vml = new Vue({ el: '#app1' })
var vm2 = new Vue2({ el: '#app2' })
</script>

　　在上述代碼中，第4行的Vue.extend()方法返回的Vue2就是Vue的子類;第5～7行用于為新創(chuàng)建的Vue2實例添加data數據，由于此時Vue2實例還未創(chuàng)建，所以要把數據寫在函數的返回值中;第1行的title在vml中不存在，代碼在執(zhí)行時會報錯，如果報錯，就說明第5～7行代碼只對Vue2有效，原來的Vue不受影響。

　　(2)在瀏覽器中打開demo03.html文件，運行結果如圖3-3所示。

　　圖3-3 Vue.extend

　　在圖3-3所示的頁面中，appl對應Vue的實例vml，app2對應Vue2的實例vm2，從運行結果可以看出，在vm2中添加了初始數據hello，vml不受影響。并且在控制臺中會看到title屬性未定義的提示。