欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 怎么創(chuàng)建組件及組件使用方法

 更新時間:2017年07月27日 09:20:39   作者:你的一燈  
vue中的核心就是組件,組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素,封裝可重用的代碼,下面通過本文重點給大家介紹vue 創(chuàng)建組件及組件使用方法,感興趣的朋友一起看看吧

什么是組件?

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素,封裝可重用的代碼。在較高層面上,組件是自定義元素,Vue.js 的編譯器為它添加特殊功能。在有些情況下,組件也可以是原生 HTML 元素的形式,以 is 特性擴展。

我知道vue中核心就是組件,但是組件是什么呢?組件有什么用呢?

這里來說說怎么用組件?怎么樣創(chuàng)建自己的組件?:

1)創(chuàng)建自己的組件

通過vue.extend("template");通過vue構造器去拓展一個模板,然后注冊,最后使用。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>進一步了解component的話法糖</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    
    <div>這是一個全局注冊的</div>
    <div id="app">
      <parent></parent>
    </div>
  </body>
</html>
<script>
  var child= Vue.extend({template:'<p>this is child component</p>'});
  //Vue.component("組件名",{});在注冊之前會自動創(chuàng)建(調用vue.extend()方法 )
  //這是一個全局注冊(兼創(chuàng)建與注冊)
  Vue.component("parent",{//有時候我們可以省略,extend.
    template:'<div>this is parent component ------ {{text}} <child-component></child-component> </div>',//局部使用
    components:{
      "child-component":child,//局部注冊
    },
    //data:function(){}
    data(){
      return {text:'哈哈哈,我是組件內部的text'}
    },
  });
  var vm= new Vue({
    el:'#app',
    data:{},
  });

進階一下:(組件內部在套組件,(components下面的components))

通過下面的例子,我就想說明一點,組件是vue構造器的拓展,所以組件可能擁有構造器的幾乎所有屬性(在寫這篇博客前,我們沒有聽到這個說法,所以可能是錯的,不要信)

<body>
  <div>這是一個局部注冊</div>
  <div id="app1">
      <div><button v-on:click=get>這里觸發(fā)get方法</button></div>
    <parent-components></parent-components>
  </div>
</body> 
<script>  
//  var child=Vue.extend({template:"<span> ------child element------</span>"});
  var vp=new Vue({
    el:'#app1',
    data:{},
    methods:{
      get:function(){alert("這是構造器中get(全局)");}
    },
    components:{
      "parent-components":{
        template:"<div>---------<span>  parent components</span><p><button v-on:click=get>點擊觸發(fā)parent的get</button></p> <div><child-component></child-component></div>--------</div>",
        components:{
          //局部注冊再一次局部注冊
          "child-component":{
            template:"<span> ------child <button v-on:click=get>點擊觸發(fā)child中的get方法</button>element------</span>",
            methods:{
              get:function(){
                alert("這是局部注冊child-component組件中get");
              }
            }
          }
        },
        methods:{
          get:function(){
            alert("這是蟬聯(lián)注冊parent-components里面的方法");
          }
        },
      },
    },  
  });
</script>  

你知道嗎?一個components中可以定義多個組件:

將html,寫入components是不是覺得很low呢?當template的內容太多了,是不是不堪入目呢?那我們來使用一下vue組件的語法糖吧(不知道為啥叫這個名)

值得提醒你的事:組件中的data屬性要定義成一個函數,返回一個對象,

<script type="text/x-template" id="myComponent">
    <div>  
     <span>{{msg}}</span>
    </div>
  </script>
  <template id='myCom'>
   <span>{{msg}}</span>
  </template>
  <div id="app">
    <parent-component-script></parent-component-script>
    <parent-component-tem></parent-component-tem>
   </div>
var vm=new Vue({
    el:"#app",
    data:{},
    components:{
      "parent-component-script":{
          template:'#myComponent',
          data(){return{msg:'這里是script'};},
      },
      "parent-component-tem":{
        template:'#myCom',
        data(){return{msg:'這里是template'} }
      },
    },
  });

你也可以更狠一點:的創(chuàng)建方式

值得注意的是:組件中的props中屬性值,定義時是駝峰,使用時就要變?yōu)橹袆澗€

<div id="app">
  <son :son-counter="counter"></son>
  <p>parent:<input type="text" v-model="counter"/></p>
</div>  
const son={
    template:`<div>son:<input v-model="sonCounter" /></div>`,
    props:{sonCounter:Number},
 };
var app=new Vue({
   el:'#app',
   data:{
     counter:0,
   },
   components:{
     son
   }
 });

 最后一個提醒:組件的創(chuàng)建要在,vue實例化之前。

總結

以上所述是小編給大家介紹的vue 怎么創(chuàng)建組件及組件使用方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

相關文章

  • vue結合element-ui使用示例

    vue結合element-ui使用示例

    這一篇主要是創(chuàng)建一個vue項目并結合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-01-01
  • vue3中路由傳參query、params及動態(tài)路由傳參詳解

    vue3中路由傳參query、params及動態(tài)路由傳參詳解

    vue3中的傳參方式和vue2中一樣,都可以用query和params傳參,下面這篇文章主要給大家介紹了關于vue3中路由傳參query、params及動態(tài)路由傳參的相關資料,需要的朋友可以參考下
    2022-09-09
  • 構建Vue大型應用的10個最佳實踐(小結)

    構建Vue大型應用的10個最佳實踐(小結)

    這篇文章主要介紹了構建Vue大型應用的10個最佳實踐(小結),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-11-11
  • vue使用axios獲取不到響應頭Content-Disposition的問題及解決

    vue使用axios獲取不到響應頭Content-Disposition的問題及解決

    這篇文章主要介紹了vue使用axios獲取不到響應頭Content-Disposition的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • vue中實現div可編輯并插入指定元素與樣式

    vue中實現div可編輯并插入指定元素與樣式

    這篇文章主要給大家介紹了關于vue中實現div可編輯并插入指定元素與樣式的相關資料,文中通過代碼以及圖文將實現的方法介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-09-09
  • vue實現日歷表格(element-ui)

    vue實現日歷表格(element-ui)

    這篇文章主要為大家詳細介紹了vue實現日歷表格(element-ui),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • Element-ui自定義table表頭、修改列標題樣式、添加tooltip、:render-header使用

    Element-ui自定義table表頭、修改列標題樣式、添加tooltip、:render-header使用

    這篇文章主要介紹了Element-ui自定義table表頭、修改列標題樣式、添加tooltip、:render-header使用,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04
  • 基于Vue2實現移動端圖片上傳、壓縮、拖拽排序、拖拽刪除功能

    基于Vue2實現移動端圖片上傳、壓縮、拖拽排序、拖拽刪除功能

    這篇文章主要介紹了基于Vue2實現移動端圖片上傳、壓縮、拖拽排序、拖拽刪除功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-01-01
  • vue中音頻wavesurfer.js的使用方法

    vue中音頻wavesurfer.js的使用方法

    這篇文章主要為大家詳細介紹了vue中音頻wavesurfer.js的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • Vue.js項目在apache服務器部署問題解決

    Vue.js項目在apache服務器部署問題解決

    本文主要介紹了Vue.js項目在apache服務器部署問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-06-06

最新評論