Vue.js官方文檔學習筆記(二)組件化應用的構建

組件化應用的構建

組件化應用容許咱們使用小型、獨立和一般可複用的組件構建大型應用。

Vue註冊組件

Vue.component('todo-item',{template:'<li>這是個待辦項</li>'})

根據其構建另外一個模板

<ol>
    <todo-item></todo-item>
</ol>

可是這樣只能渲染出一樣的文字，咱們應當將父做用域的值傳到子組件中去

Vue.component('todo-item', {
  // todo-item 組件如今接受一個
  // "prop"，相似於一個自定義特性。
  // 這個 prop 名爲 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

使用v-bind指令將信息循環輸出到每個組件中

<div id="app-7">
    <ol>
        <todo-item v-for="item in groceryList"
        v-bind:todo="item"
        v-bind:key="item.id"
        <todo-item>
    </ol>
</div>

var app7=new Vue({
    el:'app-7',
    data:{
        groceryList:[
            {id:0,text:'蔬菜'},
            {id:1,text:'奶酪'},
            {id:2,text:'隨便其餘人吃的東西'}
           
        ]
    }
})

在大型應用中，有必要將整個應用程序劃分爲組件，使得開發更容易管理。假設例子爲:

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

Vue 組件很是相似於自定義元素——它是 Web 組件規範的一部分，這是由於 Vue 的組件語法部分參考了該規範。