<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          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://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合