教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

Vue.extend的用法

更新時間:2022年03月29日11時53分 來源:傳智教育 瀏覽次數(shù):

  Vue.extend用于基于Vue構(gòu)造器創(chuàng)建一個Vue子類,可以對Vue構(gòu)造器進(jìn)行擴(kuò)展。它有一個options參數(shù),表示包含組件選項(xiàng)的對象。下面我們通過例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實(shí)例添加data數(shù)據(jù),由于此時Vue2實(shí)例還未創(chuàng)建,所以要把數(shù)據(jù)寫在函數(shù)的返回值中;第1行的title在vml中不存在,代碼在執(zhí)行時會報錯,如果報錯,就說明第5~7行代碼只對Vue2有效,原來的Vue不受影響。

  (2)在瀏覽器中打開demo03.html文件,運(yùn)行結(jié)果如圖3-3所示。

Vue.extend

  圖3-3 Vue.extend

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

0 分享到:
和我們在線交談!