Vue 主要架构

此图片来源 Vue官方网站

建立compoent

// Define a new component called todo-item
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

var app = new Vue(...)

组装compoent

<ol>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ol>

已经把compoent放进去之後，这样就会把里面的内容拿出来吗？
中间少了一个桥梁，就是要怎麽让这个页面知道来源是在哪边？

这个来源就必须将控制的js引入，
index.js

Vue.compoent('todo-item', {
     template: '<li>THis is a TODO</li>'
})

var app = new Vue({
    el: 'app'
})

有了这些，我们该如何开始控制Vue呢？Nonono~这是我一开始的想法，但这样真的太躁进了！
在Vue官网里下一阶段是告诉我们Data and Methods
当然要依照官网安排的顺序才能把基础打好

Data and Methods
里面一开始就说，Vue Instance被建立之後，所有属性都可以被建立在"data"(Reactivity system)。
当资料有所变动时，view上面的资料就会即时更新。

var data = { a: 1 } // 建立Object

var vm = new Vue({
  data: data   // Object加到 Instance
})

vm.a == data.a // => true 

vm.a = 2
data.a // => 2

data.a = 3
vm.a // => 3

但有例外的一个状况，就是你对他大喊！芝麻....
是你对这个Obj跟他说 freeze

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

<div id="app">
  <p>{{ foo }}</p>
  <!-- this will no longer update `foo`! -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

画面显示出来的就会是在原本的Object里面所设定的 bar，再怎麽change it 他还是不为所动！

下一篇就要来说说 prefixed with $ 以及 Vue的生命周期