Vue 主要架构

此图片来源 Vue官方网站

建立compoent

// Define a new component called todo-itemVue.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 } // 建立Objectvar vm = new Vue({  data: data   // Object加到 Instance})vm.a == data.a // => true vm.a = 2data.a // => 2data.a = 3vm.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的生命週期