今天是學習VUE的第一天，那首先一定是到官網看文檔，規劃的看文檔的時間是四天左右，一定要從頭看到尾，目標是看兩遍。
今天沒有進行VUE的環境安裝，等把文檔看透再裝環境不遲。加粗字體是文檔中的描述
1.VUE是什麼?
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。
讀後感：當然對於好幾個名詞一臉茫然，比如漸進式框架，自底向上逐層應用，只關注視圖層，這些都不是很明白，不過不用糾結這些，等對VUE的設計理念，語法，場景有了自己的理解之後，這些一定就豁然開朗了，繼續往下看
2.聲明式渲染
Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統.
讀後感:意思應該就是VUE的簡潔的語法就能實現對DOM的進行更改，突出了對數據操作的簡潔性。
然後我們看官方給的例子
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
這兩段代碼運後 最後渲染出的的DOM是
<div id="app">
Hello Vue!
</div>
並且message改變的時候，DOM也會跟着改變。原生js比，實現步驟簡單了很多。
除了文本插值，我們還可以像這樣來綁定元素 attribute
讀後感：看來VUE對DOM中的數據可以進行各種操作。看代碼
<div id="app-2">
<span v-bind:title="message">
鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載於 ' + new Date().toLocaleString()
}
})
上面的代碼是用v-bind：語法對title屬性進行數據綁定..那也就是v-bind：可以使data中的所有數據和標籤內屬性進行綁定
（v-bind attribute 被稱爲指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊 attribute。)
控制切換一個元素是否顯示也相當簡單
讀後感:說明Vue對事件的綁定也可以用非常簡單語法進行實現，接下來看代碼
<div id="app-3">
<p v-if="seen">現在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
裏面依然用了v-開頭的Vue的特殊attribute，v-if和java中的if應該一個意思，當改變data中的seen爲false時候，這個標籤就沒有。這個沒有是沒有了這個元素，並不是隱藏了，Vue會先進行if判斷，然後決定是或否渲染這個Dom節點，如果爲false就不渲染了，那根據java的語法，我會第一時間相當時候支持if-else的語法呢？然後就查了一下支持v-else-if, v-else，相信看標籤的意思就知道怎麼用了吧。既然支持v-if，那麼同時也支持v-for，直接看代碼吧
<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: '整個牛項目' }
]
}
})
這應該也很好理解了。
爲了讓用戶和你的應用進行交互，我們可以用 v-on 指令添加一個事件監聽器，通過它調用在 Vue 實例中定義的方法
讀後感：先看代碼是怎麼用的吧
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反轉消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
這裏是給button綁定了click時間，那麼v-on 的用法應該就是v-on:所有事件名，然後去搜了一下，支持的類型真的太多了。有興趣的可以看看，不想看也可以，等用到了再說 v-on支持事件總結
Vue 還提供了 v-model 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向綁定。
讀後感：雙向綁定不是很清晰，直接看代碼吧
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
效果就是在input中輸入內容，p標籤中的內容也會發生相應改變。雙向綁定也就是視圖可以影響數據（當input輸入時候，會改變data中的message的值），數據也可以影響視圖（當mesage改變時候，p標籤中的內容也放生改變）.v-model就是用在表單中視圖影響數據的指令
組件系統是 Vue 的另一個重要概念，因爲它是一種抽象，允許我們使用小型、獨立和通常可複用的組件構建大型應用。仔細想想，幾乎任意類型的應用界面都可以抽象爲一個組件樹
讀後感：組件化開發，這個應該不陌生，主要提升代碼的複用性，並且可以更好的設計代碼模塊。減少後期的維護成本
在 Vue 裏，一個組件本質上是一個擁有預定義選項的一個 Vue 實例。在 Vue 中註冊組件很簡單
讀後感：Vue組件語法並不複雜，看代碼
// 定義名爲 todo-item 的新組件
Vue.component('todo-item', {
template: '<li>這是個待辦項</li>'
})
var app = new Vue(...)
這樣就寫好了一個名字爲todo-item的組件。這個組件的用法直接用同名標籤就可以了
<ol>
<!-- 創建一個 todo-item 組件的實例 -->
<todo-item></todo-item>
</ol>
這樣對於重複用到的組件，是不是很有效的提升了複用性
組件一般是有層級的，也就是父子級關係，一般場景子組件都會取父級的一些數據，而props是子組件訪問父組件數據的唯一接口。props是單向綁定的，只能獲取父組件的值，不能進行修改，$parent也可以獲取到父組件的值，並且可以修改，這個最好根據業務來進行選擇。直接看代碼
<div id="app-7">
<ol>
<todo-item
v-bind:todo="grocery"
></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo}}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
grocery:'蔬菜',
}
})
受限我們創建了組件todo-item,然後再組件中定義了屬性props,props的意思就是等下這個屬性所賦的值是要到父組件中找的，然後定義了父組件的data中的數據，然後再div中引入子組件，引用完之後用v-for進行父組件中groceryList的數據循環，循環元素爲item，然後定義todo屬性，用v-bind:爲他綁定值，因爲我們在props中定義了todo，所以在給todo綁定值的時候就會去父組件中找這個值。最終輸出蔬菜。官網的例子有一些繞，所以我簡單的修改了一下。
小結：Vue在操作數據以及事件綁定，代碼設計上，後期維護上有一定的優勢。對於前段邏輯複雜的頁面非常適用，可以減輕開發壓力。但是對於前段大部分只是簡單或者沒有什麼邏輯的展示頁面。覺得沒有比要用了。jquery足以。今天晚上系統要升級，所以暫時先看到這裏。明天繼續