快捷導航

vue.js指令和組件詳細介紹及實例

更新時間：2017年04月06日 14:49:30 作者：fishenal

這篇文章主要介紹了vue.js功能介紹 - 指令，組件詳細介紹及實例，詳細的介紹了指令和組件的用法，有興趣的可以了解一下。

大家好，本文給各位做一下vue.js一個最基本的概念介紹。

vue.js 指令

<div id="app">
  <div v-text="message"></div>
</div>

var app = new Vue({
 el: '#app',
 data: {
  message: 'Hello Vue!'
 }
})

這個例子我們會得到，v-text所在的div元素的內(nèi)部插入了'Hello Vue！'這段字符串，那么我們?yōu)槭裁磿a(chǎn)生這樣一個結(jié)果呢，我們來分析一下：

這一步的意思是，實例化的這個Vue接管了#app元素，這里面的所有內(nèi)容歸我管，也就是說可以接受vue的功能指令。

第二步是在#app里， v-text指令被識別出來，它接受的參數(shù)是'message'，vue獲取到這個參數(shù)，并在自己實例化的data里查找叫message的屬性，找到message的內(nèi)容原來是'hello vue', 于是把'hello vue' 渲染到頁面。

類似的指令，還有v-if，條件判斷，v-for，列表渲染，v-on進行元素的事件綁定。等等。vue.js與頁面也就是template進行交互，主要是通過這些內(nèi)置指令來完成的。

vue.js 組件

開發(fā)前端頁面，模塊化有很多好處，比如公用的sidebar，比如公用的日期選擇器。

模塊化還有一個好處，就是簡化開發(fā)邏輯，讓項目具有擴展性。

vue.js的模塊化主要體現(xiàn)在組件上，以組件為單位進行模塊化。

我們可以在實例化vue對象之前，通過Vue.component方法來注冊全局的組件，比如：

全局組件

// 告訴Vue，我需要一個組件叫做todo-item，它的配置如下，就是包含props和template那個對象
Vue.component('todo-item', {
 props: ['todo'],
 template: '<li>{{ todo.text }}</li>'
}) 
// 實例化一個vue對象，掛載在#app-7這個元素下，并且設(shè)定它的屬性，groceryList，是一個數(shù)組
var app7 = new Vue({
 el: '#app-7',
 data: {
  groceryList: [
   { text: 'Vegetables' },
   { text: 'Cheese' },
   { text: 'Whatever else humans are supposed to eat' }
  ]
 }
})

模板：

<div id="app-7">
 <ol>
  <!--因為注冊了全局的todo-item組件，所以在掛載范圍內(nèi)我們可以直接使用todo-item標簽，來引用這個組件，-->
  <!--組件內(nèi)部會被 todo-item配置表里的template替換，用來渲染。屬性todo也是配置對象里規(guī)定的，可以接受的參數(shù)。-->
  <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
 </ol>
</div>

子組件

實際項目開發(fā)中，我們更多的使用的是子組件。

我們剛剛說的每個組件都有一個配置表，就是一個js對象，比如：

{
 props: ['todo'],
 template: '<li>{{ todo.text }}</li>'
}

我們把這份配置引入到實例化對象里，就可以成為這個vue對象的子組件，比如：

new Vue({
  components: {
    'component-a' : {
       props: ['todo'],
       template: '<li>{{ todo.text }}</li>'
    }
  }
})

這樣的話，我們和之前全局組件一樣，也可以在實例化對象掛載的范圍內(nèi)，直接使用<component-a>標簽來引用組件。

那么接下來，我們考慮一下，子組件里也可以有自己的子組件，比如：

new Vue({
  components: {
    'component-a' : {
       props: ['todo'],
       template: '<li>{{ todo.text }}</li>'，
       components: {
          'component-b' : {
             template: 'i am component b'，
             components: {
                ...
             }
          }
       }
    }
  }
})

那么這樣下去，我們可以有無數(shù)個子組件，形成一個組件樹：