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

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

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

什么是組件?

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

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

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

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

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

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

進(jìn)階一下:(組件內(nèi)部在套組件,(components下面的components))

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

<body>
  <div>這是一個(gè)局部注冊(cè)</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("這是構(gòu)造器中g(shù)et(全局)");}
    },
    components:{
      "parent-components":{
        template:"<div>---------<span>  parent components</span><p><button v-on:click=get>點(diǎn)擊觸發(fā)parent的get</button></p> <div><child-component></child-component></div>--------</div>",
        components:{
          //局部注冊(cè)再一次局部注冊(cè)
          "child-component":{
            template:"<span> ------child <button v-on:click=get>點(diǎn)擊觸發(fā)child中的get方法</button>element------</span>",
            methods:{
              get:function(){
                alert("這是局部注冊(cè)child-component組件中g(shù)et");
              }
            }
          }
        },
        methods:{
          get:function(){
            alert("這是蟬聯(lián)注冊(cè)parent-components里面的方法");
          }
        },
      },
    },  
  });
</script>  

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

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

值得提醒你的事:組件中的data屬性要定義成一個(gè)函數(shù),返回一個(gè)對(duì)象,

<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'} }
      },
    },
  });

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

值得注意的是:組件中的props中屬性值,定義時(shí)是駝峰,使用時(shí)就要變?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
   }
 });

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

總結(jié)

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

相關(guān)文章

  • vue結(jié)合element-ui使用示例

    vue結(jié)合element-ui使用示例

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

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

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

    構(gòu)建Vue大型應(yīng)用的10個(gè)最佳實(shí)踐(小結(jié))

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

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

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

    vue中實(shí)現(xiàn)div可編輯并插入指定元素與樣式

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

    vue實(shí)現(xiàn)日歷表格(element-ui)

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

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

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

    基于Vue2實(shí)現(xiàn)移動(dòng)端圖片上傳、壓縮、拖拽排序、拖拽刪除功能

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

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

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

    Vue.js項(xiàng)目在apache服務(wù)器部署問題解決

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

最新評(píng)論