Vue2.0學習文檔（Vue介紹）

一、引入

<script src="http://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
    <script src="https://unpkg.com/vue"></script>

二、簡單指令
1、起步文本插值

<div id="app">
        {{message}}
    </div>

var app=new Vue({
        el: "#app",
        data: {
            message:"hello"
        }
    })

例子1：Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統：
現在數據和 DOM 已經被綁定在一起，所有的元素都是響應式的。我們該如何知道呢？打開你的瀏覽器的控制檯 (就在這個頁面打開)，並修改 app.message
起步文本插值

2、聲明式渲染

 <div id="app-2">
        <span v-bind:title="message">
            鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
        </span>
    </div>

 var app2=new Vue({
        el:'#app-2',
        data:{
            message:'頁面加載於'+new Date().toLocaleString()
        }
    })

例2：指令帶有前綴 v-，以表示它們是 Vue 提供的特殊屬性
它們會在渲染的 DOM 上應用特殊的響應式行爲。簡言之，這裏該指令的作用是：“將這個元素節點的 title 屬性和 Vue 實例的 message 屬性保持一致”。

3、條件與循環

<div id="app-3">
        <p v-if="seen">
            現在你看到我了
        </p>
    </div>

 var app3=new Vue({
        el:'#app-3',
        data:{
            seen:true
        }

    })

例3：綁定 DOM 文本到數據，也可以綁定 DOM 結構到數據

3-2

<div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}}
            </li>
        </ol>
    </div>

var app4=new Vue({
        el:"#app-4",
        data:{
            todos:[
                {text:"學習javascript"},
                {text:"學習Vue"},
                {text:"整個牛項目"}
            ]
        }
    })

3-2:v-for 指令可以綁定數組的數據來渲染一個項目列表

4、處理用戶輸入

 <div id="app-5">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">逆轉消息</button>
    </div>

例4：綁定 DOM 文本到數據，也可以綁定 DOM 結構到數據
沒有觸碰 DOM,DOM 操作都由 Vue 來處理，你編寫的代碼不需要關注底層邏輯。

 var app5=new Vue({
        el:"#app-5",
        data:{
            message:"Hello Vue.js"
        },
        methods:{
            reverseMessage:function(){
                this.message=this.message.split('').reverse().join('')
            }
        }
    })

4-2 v-model 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向綁定

    <div id="app-6">
        <p>{{message}}</p>
        <input v-model="message">
    </div>

三、組件化應用構建
1.組件系統：允許我們使用小型、獨立和通常可複用的組件構建大型應用。（仔細想想，幾乎任意類型的應用界面都可以抽象爲一個組件樹）

在 Vue 裏，一個組件本質上是一個擁有預定義選項的一個 Vue 實例，在 Vue 中註冊組件很簡單：

// 定義名爲 todo-item 的新組件
Vue.component('todo-item', {
  template: '<li>這是個待辦項</li>'
})

現在你可以用它構建另一個組件模板：

 <ol>
  <!-- 創建一個 todo-item 組件的實例 -->
  <todo-item></todo-item>
</ol>

但是這樣會爲每個待辦項渲染同樣的文本，這看起來並不炫酷，我們應該能將數據從父作用域傳到子組件。讓我們來修改一下組件的定義，使之能夠接受一個屬性：

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

現在，我們可以使用 v-bind 指令將 todo 傳到每一個重複的組件中：

<div id="app-7">
  <ol>
    <!--
      現在我們爲每個 todo-item 提供 todo 對象
      todo 對象是變量，即其內容可以是動態的。
      我們也需要爲每個組件提供一個“key”，晚些時候我們會做個解釋。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

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

這只是一個假設的例子，但是我們已經設法將應用分割成了兩個更小的單元，子單元通過 props 接口實現了與父單元很好的解耦。我們現在可以進一步爲我們的 todo-item 組件實現更復雜的模板和邏輯的改進，而不會影響到父單元。

使用了組件的應用模板是什麼樣的例子：

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