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é)果呢，我們來(lái)分析一下：

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

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

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

vue.js 組件

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

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

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

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

全局組件

// 告訴Vue，我需要一個(gè)組件叫做todo-item，它的配置如下，就是包含props和template那個(gè)對(duì)象
Vue.component('todo-item', {
 props: ['todo'],
 template: '
{{ todo.text }}
'
}) 
// 實(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' }
  ]
 }
})

模板：