VUE是國人發明出來的一套用於構建用戶界面的前端框架。
相較於傳統開發具有以下特徵：
Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統
1. 基本使用步驟① 導入 vue.js 的 script 腳本文件
② 在頁面中聲明一個將要被 vue 所控制的 DOM 區域
③ 創建 vm 實例對象（vue 實例對象）
2.基本代碼與 MVVM 的對應關係其中
2.1 Vue實例每一個Vue應用的開始都是由 new vue開始的，然後由可選的嵌套、可復用的組件樹組成
在vue開發中，幾乎所有的組件都是一個Vue實例。
2.2 數據與方法當vm實例創建好了之後,它將 data 對象中的所有的 property 加入到 Vue 的響應式系統中。當這些 property 的值發生改變時，視圖將會產生「響應」，即匹配更新為新的值。
// 我們的數據對象
var data = { a: 1 }
// 該對象被加入到一個 Vue 實例中
var vm = new Vue({
data: data
})
// 獲得這個實例上的 property
// 返回源數據中對應的欄位
vm.a == data.a // => true
// 設置 property 也會影響到原始數據
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3當這些數據改變時，視圖會進行重渲染。值得注意的是只有當實例被創建時就已經存在於 data 中的 property 才是響應式的。也就是說如果你添加一個新的 property，比如:
//在實例化之後
vm.b = '1';這個b添加進去了但是vue不會在重新實例化一次，也就是說b不會想vue其他之前定義好的data一樣是響應式的。
如果有些值你將來會用到，你也得先定義在裡面。
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}這裡唯一的例外是使用 Object.freeze()，這會阻止修改現有的 property，也意味著響應系統無法再追蹤變化。
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
<div id="app">
<p>{{ foo }}</p>
<!-- 這裡的 `foo` 不會更新！ -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>除了數據 property，Vue 實例還暴露了一些有用的實例 property 與方法。它們都有前綴 $，以便與用戶定義的 property 區分開來。例如：
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一個實例方法
vm.$watch('a', function (newValue, oldValue) {
// 這個回調將在 `vm.a` 改變後調用
})小結
2.3實例生命周期鉤子vue實例創建會經過很多初始化過程，這些過程都有相應的函數叫做生命周期鉤子可以幫助我們在不同階段添加自己的代碼去實現某種效果。
比如 created 鉤子可以用來在一個實例被創建之後執行代碼：
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 實例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"也有一些其它的鉤子，在實例生命周期的不同階段被調用，如 mounted、updated和 destroyed。生命周期鉤子的 this 上下文指向調用它的 Vue 實例。
不要在選項 property 或回調上使用箭頭函數，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因為箭頭函數並沒有 this，this 會作為變量一直向上級詞法作用域查找，直至找到為止，經常導致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。
生命周期圖示下圖展示了實例的生命周期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。
這裡給了一些代碼可以讓大家了解vue的強大，以下代碼包含了vue的部分既簡單又重要的指令。
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue</title> <script src="../vue.js"></script></head>
<body> <div id="app"> {{message}} </div> <div id="app2"> <span :title="message"> 滑鼠放這裡給你看帥哥! </span> </div> <div id="app3"> <p v-if='seen'>被看到了</p> <button @click="gun">滾</button> </div> <div id="app4"> <ol> <li v-for="item in items">{{item.text}} </li> </ol> </div> <div id="app5"> <input type="text" v-model="message"> <button v-on:click="reverseMessage">反轉消息</button> </div> <div id="app6"> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item> </div>
<body> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) var app2 = new Vue({ el: '#app2', data: { message: ' xwt，time is ' + new Date().toLocaleString() } }) var app3 = new Vue({ el: '#app3', data: { seen: true }, methods: { gun() { if (this.seen === true) this.seen = false; else this.seen = true; } } }) var app4 = new Vue({ el: '#app4', data: { items: [{ id: 1, text: 'xwt很帥' }, { id: 2, text: 'xwt很聰明' }, { id: 3, text: 'xwt很強大' }] } }) var app5 = new Vue({ el: '#app5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function() { this.message = this.message.split('').reverse().join('') } } }) Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app6 = new Vue({ el: '#app6', data: { groceryList: [{ id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '隨便其它什麼人吃的東西' }] }
}) </script>
</body>
</html>以上是自己在閱讀vue官方文檔學習時記錄的筆記，大多是文檔的例子和知識，如果對vue感興趣的且有一定三大件基礎的同學可以自行去官網學習。
這裡給出地址：https://cn.vuejs.org/v2/guide/