vue組件的建立

vue的核心基礎就是組件的使用，玩好了組件才能將前面學的基礎更好的運用起來。組件的使用更使咱們的項目解耦合。更加符合vue的設計思想MVVM。

那接下來就跟我看一下如何在一個Vue實例中使用組件吧！

這裏有一個Vue組件的示例：

Vue.component('Vheader',{
            data:function(){
                return {
                   
                }
            },
            template:`<div class="header">
                        <div class="w">
                            <div class="w-l">
                                <img  src="./logo.png"/>
                            </div>
                            <div class="w-r">
                                <button>登陸</button><button>註冊</button>
                                
                            </div>
                        </div>
                    </div>`
        })

組件是可複用的Vue實例，而且帶有一個名字：在這個例子中是 <Vheader>。咱們能夠在一個經過 new Vue 建立的 Vue 根實例中，把這個組件做爲自定義元素來使用：

<div id="app">
        <Vheader></Vheader>
</div>

var app = new Vue({
       el:'#app',
       data:{

       }
 })

效果顯示：

由於組件是可複用的 Vue 實例，因此它們與 new Vue 接收相同的選項

組件的複用 

<div id="app">
        <Vheader></Vheader>
        <br>
        <Vheader></Vheader>
        <br>
        <Vheader></Vheader>
    </div>

頁面效果以下：

給Vheader組件中添加一個按鈕，綁定數據屬性count，而後你會發現點擊按鈕時，每一個組件都會各自獨立維護它的 count。由於你每用一次組件，就會有一個它的新實例被建立。

 

在建立組件過程當中第一個參數是組件的名字，第二個參數是跟new Vue實例同樣的options。跟實例對象不一樣的是有兩點：

關於組件名的起名：https://cn.vuejs.org/v2/guide/components-registration.html

一、組件中沒有el，由於el僅僅的是綁定Vue的根元素。

二、data屬性再也不是返回對象，而是返回一個函數。並且必須返回一個函數。

 

ok。介紹到這裏相信你們都明白了組件的建立了。

那麼一般一個應用會一顆嵌套的組件🌲的形式來組織。

例如，你可能會有頁頭、側邊欄、內容區等組件，每一個組件又包含了其它的像導航連接、博文之類的組件

 

若是說就拿上面那個導航的例子，咱們把整個Vheader組件看做是全局註冊的組件。

無論怎樣，好比有A、B、C三個全局註冊的組件。

若是咱們使用webpack這樣的構建系統，它會掃描咱們整個文件。你們會發現全局註冊的組件意味着哪怕是你不想去使用了，webpack仍然很賣力的將這些組件構建在結果中。這會形成用戶下載JavaScript的無謂的增長。

到此咱們僅僅的是經過Vue.component 實現全局註冊的組件，那麼局部組件又是如何玩的呢？

咱們可使用JavaScript對象來定義組件：

var A = {/*......*/};
var B = {/*......*/};
var C = {/*......*/};

而後在compoents選項中定義你想要使用的組件：

new Vue({
  el: '#app'
  components: {
    A
    B
  }
})

在對象中放一個相似A 的變量名實際上是A:A 的縮寫，即這個變量名同時是：

• 用在模板中的自定義元素的名稱
• 包含了這個組件選項的變量名

 

經過Prop像子組件傳遞數據

上面我們看到了咱們作的導航欄。若是你不能向這個組件傳遞某一篇博文的標題或內容之類的咱們想展現的數據的話，它是沒有辦法使用的。這也正是 prop 的由來。

Prop 是你能夠在組件上註冊的一些自定義特性。當一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性。爲了給導航欄傳遞一個標題

 Vue.component('Vheader',{
            data:function(){
                return {
                    count:0
                }
            },
            props:['title'],
            template:`<div class="header">
                        <div class="w">
                            <div class="w-l">
                                <img  src="./logo.png"/>
                                <span>{{title}}</span>
                            </div> 
                            <div class="w-r">
                                <button>登陸</button><button>註冊</button>
                                
                            </div>

                        </div>

                    </div>`
        })

<div id="app">
    <Vheader title='路飛學城'></Vheader>
        
</div>

另外咱們還可使用 v-bind 來動態傳遞 prop。

單個根元素

可能有不少同窗在寫代碼的時候每每會在組件中這樣去寫：

<h3>{{ title }}</h3>
<div v-html="content"></div>

然而若是你在模板中嘗試這樣寫，Vue 會顯示一個錯誤，並解釋道 every component must have a single root element (每一個組件必須只有一個根元素)。你能夠將模板的內容包裹在一個父元素內，來修復這個問題，例如：

<div>
   <h3>{{ title }}</h3>
   <div v-html="content"></div>
</div>

這裏面有提到了v-html:雙大括號會將數據解釋爲普通文本，而非 HTML 代碼。爲了輸出真正的 HTML，你須要使用 v-html 指令。

經過事件向父組件傳遞數據

看個例子，好比如今我想點擊導航的某個按鈕，想讓導航上的字體變大。那麼咱們須要：

在其父組件中，能夠經過添加一個postFontsize數據屬性來支持此功能。

 var app = new Vue({
            el:'#app',
            data:{
                postFontSize:16
            },
            methods:{
                clickHandler(){
                    this.postFontSize ++;
                }
            }
        })

它能夠在模板中用來控制全部導航欄上文字的字號。

<Vheader title='路飛學城' :style="{ fontSize: postFontSize + 'px' }"></Vheader>

如今給導航欄上添加一個按鈕來放大字號：

<div class="w-r">
        <button>登陸</button><button>註冊</button><button>放大文字</button>                        
</div>

而後再讓添加的按鈕幹活!

<button @click='largeHandler'>放大標題</button> 

methods:{
    largeHandler(){
      this.$emit('luffy-title-size')
      }
   }

而後咱們能夠用 v-on 在導航欄組件上監聽這個事件，就像監聽一個原生 DOM 事件同樣：

<Vheader title='路飛學城' @luffy-title-size='clickHandler' :style="{ fontSize: postFontSize + 'px' }"></Vheader>

另外咱們還可使用時間拋出一個值：

在導航欄組件中：

methods:{
    largeHandler(){
      this.$emit('luffy-title-size',1)
      }
   }

在父組件中：

methods:{
    clickHandler(size){
       this.postFontSize +=size;
    }
}

此時這個size就是導航欄組件傳過來的數值1.

 

好的，同窗們，介紹完組件的基本使用、組件註冊、父子組件傳值，那麼vue的基礎內容就給你們介紹完了。

那麼，接下來咱們就得聽官網的話，學完了基礎，咱們就開始使用vue-cli這些腳手架工具來一鍵搭建咱們的項目。