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元素的內部插入了'Hello Vue！'這段字符串，那么我們為什么會產生這樣一個結果呢，我們來分析一下：

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

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

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

vue.js 組件

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

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

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

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

全局組件

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

子組件

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

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

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

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

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

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

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

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

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

所以，一個vue.js架構的網站，我們可以看成是一個個組件的開發，最終存在一個根節點，就是項目里唯一實例化的Vue對象，而這一個個組件，其實就是一份份配置對象，以及它們對應的template 模板（html片段）。

以上是“vue.js指令和組件的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！