深刻淺出vue1.0：起步

雙向綁定

就是說視圖和數據綁在一塊兒，有一個變化了，另一個也會變化
應用場景：各類表單啊~須要互動的有變化的地方~

渲染列表

使用v-for標籤，在前臺展現數據
應用場景：各類列表~

處理用戶輸入

先寫觸發條件，通常都是點擊了什麼（v-on:click="方法名"）
再寫要執行的方法（要作什麼）
應用場景：除了靜態不變的，剩下都須要的好嗎~

綜合例子

html
    //要操做的對象
    <div id="app">
    //綁定模型 按鍵事件
      <input v-model="newTodo" v-on:keyup.enter="addTodo">
      <ul>
        //循環列表
        <li v-for="todo in todos">
           //文本插值 
          <span>{{ todo.text }}</span>
          //  指令的值 爲綁定表達式（參數）
          <button v-on:click="removeTodo($index)">X</button>
        </li>
      </ul>
    </div>
    js
    //建立vue
    new Vue({
        //建立對象        
        el: '#app',
        //屬性賦值     
        data: {
            newTodo: '',
            todos: [
                { text: 'Add some todos' }
            ]
        },
        //調用方法
        methods: {
            //定義方法一 添加todo
            addTodo: function () {
                //去掉空格
                var text = this.newTodo.trim()
                if (text) {
                    //加入數組
                    this.todos.push({ text: text })
                    //置空
                    this.newTodo = ''
                }
             },
             //定義方法二 刪除todo
             removeTodo: function (index) {
                //刪除
                 this.todos.splice(index, 1)
             }
         }
    })

http://codepen.io/zd9027/pen/XdQYbb

吐槽

最初學前端用jq寫了一坨，用vue幾行就搞定了~