他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

VUE,創建組件的方式

2018-8-9    seo達人

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

方式一

 <!--1.1使用Vue.extend來創建全局的Vue組件--> var tem1 = Vue.extend({
      template:'<h3>這是使用 Vue.extend 創建的組件</h3>' //指定組件要展示的HTML結構
    }); <!--1.2使用Vue.component('組件名稱',創建出來的組件模板對象)--> Vue.component('myTem1',tem1);

    /* <!--注意--> 使用 Vue.component() 定義全局組件的時候,
        組件名稱使用 駝峰命名,則在引用組件的時候,需要把大寫改為小寫,并且用 '-'將單詞連接
        組件名稱不適用駝峰命名,則直接拿名稱來使用即可
     */ <!--組合方式--> Vue.component('myTem1',Vue.extend({
        template : '<h3>這是使用 Vue.extend 創建的組件</h3>'
    })) <div id="app"> <!-- 如果要使用組件,直接把組件的名稱以 HTML 標簽的形式,引入到頁面中--> <my-tem1> </my-tem1> </div> 
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

方式二

直接使用Vue.component()

 Vue.component('mycom2',{
        template : '<h3>這是使用 Vue.component 創建的組件</h3>' }) 
    
  • 1
  • 2
  • 3

但是這樣寫會有一個問題:

<!--在h3標簽后緊接一個span標簽的話就會出問題了--> <h3>這是使用 Vue.component 創建的組件</h3> <span>123</span> 
    
  • 1
  • 2


這個問題是在 組件template屬性指向的模板內容,必須有且只能有唯一的一個根元素 
所以修改代碼如下:

Vue.component('mycom2',{
        template : 
            '<div> <h3>這是使用 Vue.component 創建的組件</h3> <span>123</span> </div>'
}) 
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

運行結果如下:

這里寫圖片描述

不過這種方式也有一個瑕疵,就是template 屬性的值是HTML標簽,而在軟件中,并沒有智能提示,容易出錯,若使用這種方式,需要仔細,避免出錯

方式三

<!--1.定義組件:--> Vue.component('mycom3',{
            template : '#tem1'
     }); <!--2.在被控制的 #app 外面使用 template 元素,定義組建的HTML模板結構--> <div id="app"> <!--3. 引用組件 --> <mycom3></mycom3> </div> <template id="tem1"> <div> <h1>這是 template 元素</h1> <span>這種方式好用</span> </div> </template>  
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

運行結果如下:

這里寫圖片描述

這是Vue創建組件(全局)的3種方式,其實相差不多,希望對大家有所幫助


日歷

鏈接

個人資料

藍藍設計的小編 http://m.ssll180.com

存檔