快捷導(dǎo)航

vue.js指令和組件詳細(xì)介紹及實(shí)例

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

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

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

vue.js 指令

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

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

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

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

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

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

vue.js 組件

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

模塊化還有一個(gè)好處，就是簡(jiǎn)化開發(fā)邏輯，讓項(xiàng)目具有擴(kuò)展性。

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

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

全局組件

// 告訴Vue，我需要一個(gè)組件叫做todo-item，它的配置如下，就是包含props和template那個(gè)對(duì)象
Vue.component('todo-item', {
 props: ['todo'],
 template: '<li>{{ todo.text }}</li>'
}) 
// 實(shí)例化一個(gè)vue對(duì)象，掛載在#app-7這個(gè)元素下，并且設(shè)定它的屬性，groceryList，是一個(gè)數(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>
  <!--因?yàn)樽?cè)了全局的todo-item組件，所以在掛載范圍內(nèi)我們可以直接使用todo-item標(biāo)簽，來引用這個(gè)組件，-->
  <!--組件內(nèi)部會(huì)被 todo-item配置表里的template替換，用來渲染。屬性todo也是配置對(duì)象里規(guī)定的，可以接受的參數(shù)。-->
  <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
 </ol>
</div>

子組件

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

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

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

我們把這份配置引入到實(shí)例化對(duì)象里，就可以成為這個(gè)vue對(duì)象的子組件，比如：

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

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

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

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

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

所以，一個(gè)vue.js架構(gòu)的網(wǎng)站，我們可以看成是一個(gè)個(gè)組件的開發(fā)，最終存在一個(gè)根節(jié)點(diǎn)，就是項(xiàng)目里唯一實(shí)例化的Vue對(duì)象，而這一個(gè)個(gè)組件，其實(shí)就是一份份配置對(duì)象，以及它們對(duì)應(yīng)的template 模板（html片段）。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: