99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

Vue.js學(xué)習(xí)之指令與組件

發(fā)布時(shí)間：2017-03-31 14:58  回復(fù):0  查看:2905   最后回復(fù)：2017-03-31 14:58  
本文和大家分享的主要是vue.js的指令與組件相關(guān)內(nèi)容，一起來看看吧，希望對(duì)大家 學(xué)習(xí)vue.js有所幫助。
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é)果呢，我們來分析一下：
Vue.js學(xué)習(xí)之指令與組件
這一步的意思是，實(shí)例化的這個(gè)Vue 接管了 #app 元素，這里面的所有內(nèi)容歸我管，也就是說可以接受 vue 的功能指令。
Vue.js學(xué)習(xí)之指令與組件
第二步是在#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è)好處，就是簡化開發(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è)組件樹：
Vue.js學(xué)習(xí)之指令與組件
所以，一個(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 片段）。
來源：網(wǎng)絡(luò)
您還未登錄，請(qǐng)先登錄

熱門帖子

最新帖子

?