???????前言：這兩天把vuejs官方文檔都看了一遍（路由的文檔還沒看），現在回過頭來再結合英文文檔重新看一遍 ，為的是學下英文，然后總結性的寫一下。盡管vuejs的官方文檔寫得詳細又好，但是總覺得吧，知識這東西還是得自己跟著文檔把代碼手敲一遍，把要點寫寫，這樣才能把別人的知識變成自己的。感覺自己要學的東西還有很多，長路漫漫，上下求索吧！

vue.js 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。

1、聲明式渲染
①vue.js的的核心是一個允許采用簡潔的模板語法來聲明式的將數據渲染進DOM:

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

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

②綁定DOM元素屬性
它們會在渲染的 DOM 上應用特殊的響應式行為。簡言之，這里該指令的作用是：“將這個元素節點的 title 屬性和 Vue 實例的 message 屬性保持一致”。

<div id="app">
    <span v-bind:title="message">
        將鼠標放到上面將看到title文字信息
    </span>
</div>

//js
var app=new Vue({
    el:"#app",
    data:{
        message:"U loaded this page on"+new Date();
    }
});

2、條件和循環
① 控制切換一個元素的顯示。
這個例子演示了我們不僅可以綁定 DOM 文本到數據，也可以綁定 DOM 結構到數據

<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

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

② v-for 指令可以綁定數組的數據來渲染一個項目列表(類似于for-in循環)

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

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

3、處理用戶輸入
①我們可以用v-on指令綁定一個事件監聽器，通過它調用我們 Vue 實例中定義的方法。
注意在 reverseMessage 方法中，我們更新了應用的狀態，但沒有觸碰 DOM——所有的 DOM 操作都由 Vue 來處理，你編寫的代碼不需要關注底層邏輯。

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆轉消息</button>
</div>
 
//js
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
},
methods: {
    reverseMessage: function () {
    this.message = this.message.split('').reverse().join('');
  }
});

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

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

var app6=new Vue({
    el:"#app-6",
    data:{
        message:"hello world!"
    }
});

4、組件化應用構建
一個組件本質上是一個擁有預定義選項的一個 Vue 實例。
屬性能夠將數據從父作用域傳到子組件。

<div id="app-7">
    <ol>
        <todo-item
            v-for="item in items"
            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: {
    items: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '隨便其他什么人吃的東西' }
    ]
  }
})