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

VUE組件簡明講解

 更新時間:2022年08月29日 10:33:37   作者:丘比特懲罰陸  
組件是什么?組件是用基礎的元素組成的復雜的、可以重復使用的代碼單元,就相當于疊疊樂一樣的快件,可以將這些復用的代碼封裝其起來構成的組件可需要的時候進行調(diào)用

前言

為什么vue就開始在前幾年就流行并且實用起來了?這主要的是因為由于vue的一個最強大的功能就是vue的組件,vue的組件到底有什么強大的功能呢?原因有兩個,一個是組件的復用性很高;另一個是可以減少重復性的開發(fā)。

一、全局組件

1、定義

全局組件的語法是:vue.component(‘組件名’,{配置選項});

然后,我們進一步理解一下,組件名應該怎么定義:組件名的定義規(guī)則是,使用短橫線分隔命名,字母小寫并且還需要一個連字符。配置選項對象:創(chuàng)建的配置選項的對象和new Vue創(chuàng)建的配置的實例接收相同的選項對象,這些對象屬性里面有:data、computed、methods等等

一個組價可以預定義很多選項,最核心的是一下兩個

結構模板template

這個模板聲明了數(shù)據(jù)?最終顯示給用戶的DOM之間的映射關系。但是要注意的是,該結構模板中,只能有一個根節(jié)點。

初始數(shù)據(jù)data

data可以定義組件的初始數(shù)據(jù),和newVue的data選項的定義不一樣,組件是可以復用的,所以數(shù)據(jù)要定義成私有的轉(zhuǎn)態(tài),打data定義成一個函數(shù),并且要求返回一個函數(shù)對象。

2、全局組件調(diào)用

說了那么多理論的東西,可能不了解,那我我們上代碼。全局組件在全局都是可以調(diào)用的,調(diào)用的方式跟標簽的調(diào)用方式是一樣的,只需要將標簽名改成組件名就可以了。

代碼實例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>組件</title>
</head>
<body>
    <div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
    </div>
    <div id="app1">
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
Vue.component('button-counter',{
   template:`<button v-on:click="add">您在這里按下了{{count}}次!</button>`,
   data:function(){
    return{
        count:0
    }
   },
   methods:{
    add:function(){
        this.count++
    },
   }
});
var  vml = new Vue({
    el:"#app",
})
var vm2 =new Vue({
    el:"#app1",
})
    </script>
</body>
</html>

運行結果:

在代碼這個中,button-counter已經(jīng)是全局組件,可以在vm1和vm2掛載使用,在其范圍之內(nèi)都可使用。組件定義后可以進行多從的使用,在vue實例vm1和vm2的掛載范圍分別地道用了兩次組件,而且組件間數(shù)據(jù)都是相互獨立,不管不按哪一個按鈕都是互相不受不影響的。

二、局部組件

1、定義

局部組件的定義是:定義在vue實例上面的,在哪一個實例上面的定義,就在哪個實例所掛載的區(qū)域里面進行使用。

使用的配置項component,一個實例可以進行配置多個組件,多個組件配置在一個對象中。局部組件只有在定義在它的實例掛載的區(qū)域內(nèi)進行使用,而且調(diào)用的方法和全局組件調(diào)用的方法是如出一轍的。

2、局部組件調(diào)用

代碼實例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>組件</title>
</head>
<body>
    <div id="app">
        <!-- 頭部,你隨意定,你寫中文拼音都可以 -->
<top></top>
<!-- 中部 -->
<middle></middle>
<!-- 尾部 -->
<bottom></bottom>
    </div>
    <div id="app1">
        <top></top>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var  vml = new Vue({
    el:"#app",
    components:{
        "top":{
            template:`<div>
                <h3>頭部標題</h3>
                <p>12121212</p>
                </div>`
        },
        "middle":{
            template:`<div>
                <h3>中部題目</h3>
                <p>10086</p>
                </div>`
        }, 
        "bottom":{
            template:`<div>
                <h3>尾部題目</h3>
                <p>歡迎來到丘比特的博客</p>
                <p>QQ:2237814512</p>
                </div>`
        },
    }
})
var vm2 =new Vue({
    el:"#app1",
})
    </script>
</body>
</html>

運行結果:

在實例中我們定義了頭中尾三個組件,在vm1掛載的#app區(qū)域里面可以使用這三個組件 ,但是在#app1不可以使用。我們可以看到vm1掛載的#app區(qū)域內(nèi)調(diào)用的三個組件可以顯示出來,但是在vm2掛載的#app1區(qū)域內(nèi)調(diào)用的top組件沒有被渲染,我們打開console可以看到錯誤,在元素element可以看到被解釋的代碼。

到此這篇關于VUE組件簡明講解的文章就介紹到這了,更多相關VUE組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • Vue中插槽slot的使用方法

    Vue中插槽slot的使用方法

    插槽就是子組件中的提供給父組件使用的一個占位符,用<slot></slot> 表示,父組件可以在這個占位符中填充任何模板代碼,如 HTML、組件等,填充的內(nèi)容會替換子組件的<slot></slot>標簽,這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下
    2023-03-03
  • Vant主題定制如何修改顏色樣式

    Vant主題定制如何修改顏色樣式

    這篇文章主要介紹了Vant主題定制如何修改顏色樣式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue中{__ob__: observer}對象轉(zhuǎn)化為數(shù)組進行遍歷方式

    vue中{__ob__: observer}對象轉(zhuǎn)化為數(shù)組進行遍歷方式

    這篇文章主要介紹了vue中{__ob__: observer}對象轉(zhuǎn)化為數(shù)組進行遍歷方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue3+antDesignVue實現(xiàn)表單校驗的方法

    Vue3+antDesignVue實現(xiàn)表單校驗的方法

    這篇文章主要為大家詳細介紹了基于Vue3和antDesignVue實現(xiàn)表單校驗的方法,文中的示例代碼講解詳細,具有一定的參考價值,需要的小伙伴可以了解下
    2024-01-01
  • vue實現(xiàn)一個移動端屏蔽滑動的遮罩層實例

    vue實現(xiàn)一個移動端屏蔽滑動的遮罩層實例

    本篇文章主要介紹了vue實現(xiàn)一個移動端屏蔽滑動的遮罩層實例,具有一定的參考價值,有興趣的可以了解一下
    2017-06-06
  • vue+three.js實現(xiàn)炫酷的3D登陸頁面示例詳解

    vue+three.js實現(xiàn)炫酷的3D登陸頁面示例詳解

    這篇文章主要為大家介紹了vue+three.js實現(xiàn)炫酷的3D登陸頁面示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • vue中根據(jù)時間戳判斷對應的時間(今天 昨天 前天)

    vue中根據(jù)時間戳判斷對應的時間(今天 昨天 前天)

    這篇文章主要介紹了vue中 根據(jù)時間戳 判斷對應的時間(今天 昨天 前天),需要的朋友可以參考下
    2019-12-12
  • vue cli3 配置 stylus全局變量的使用方式

    vue cli3 配置 stylus全局變量的使用方式

    這篇文章主要介紹了vue cli3 配置 stylus全局變量的使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 解決$store.getters調(diào)用不執(zhí)行的問題

    解決$store.getters調(diào)用不執(zhí)行的問題

    今天小編就為大家分享一篇解決$store.getters調(diào)用不執(zhí)行的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue前端項目自適應布局的簡單方法

    Vue前端項目自適應布局的簡單方法

    最近項目開發(fā)中遇到一個需求,需要實現(xiàn)寬度自動適應,所以下面這篇文章主要給大家介紹了關于Vue前端項目自適應布局的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-06-06

最新評論