Vue簡說
Vue簡說是國人寫的一個前端框架，非常好用。Weex 是一個可以使用現代化的 Web 技術開發高效能原生應用的框架，以及適用於伺服器的NUXT框架。
學到的知識
Vue相關的基礎內容、基礎語法、MVVM模式、元件化、生命週期、動畫特效；以及一個實戰專案，在實戰專案中你會學到環境搭建、使用Git、資料模擬、本地開發、聯調、真機測試以及上線。
專案說明
本專案我們參考了去哪網的佈局，裡面包含的知識點包括：根據不同城市選擇不同景點、首頁實現了多區域輪播、多區域列表的迴圈展示、城市詳情頁面的城市展示、搜尋、左側字母與城市名稱聯動特效、景點詳情頁面、通用畫廊元件、件與件的頭部元件、遞迴展示的列表元件。同時藉助於有限的頁面，我們使用了各種有用的知識點，比如：Axios：（啊搜思）對ajax資料的獲取；Vue Router(Vue羅特)：多頁面之間的路由；VueX：各個元件之間的資料共享；非同步元件：讓程式碼上線，效能更優；Stylus:(思呆勒思)：負責前端的樣式；遞迴元件：實現了元件自身呼叫自己的功能；各種外掛以及公用元件的拆分。
學習前提
最好用JavaScript、ES6、webpack（打包工具）、npm（包管理工具）
如何學習Vue
跟著官方文件走，地址在這裡:Vue官方文件，安裝也是非常簡單的，點這裡，點選下載裡面的開發版本即可，其實就是複製該頁面到一個新的檔案vue.js裡面即可。
HelloWorld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
// var a =document.getElementById("app");
// a.innerText="Hello World"
var a = new Vue({
el:" #app",
data: {
message: "Hello World1",
}
})
</script>
</body>
</html>
el是element的簡稱，代表這個Vue的一個例項接管的範圍，這裡就是<div id="app">{{ message }}</div>這個標籤內的資訊，data定義了一組資料，這個是以鍵值對的形式出現的，細心的你會發現這個vue在例項化的過程中傳入的也是鍵值對，而鍵值對都是用一對大括號{}包圍起來的。{{ message }}是插值表示式，有過其他語言基礎的童鞋肯定不會陌生。現在我們嘗試這樣，新增一條語句：<div>{{ message }}</div>也就是這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<div>{{ message }}</div>
<script>
// var a =document.getElementById("app");
// a.innerText="Hello World"
var a = new Vue({
el:" #app",
data: {
message: "Hello World1",
}
})
</script>
</body>
</html>
輸出結果是這樣：
Hello World1
{{ message }}
原因就是你這個vue的例項只是接管了這個id為app的div標籤範圍內的內容。el限制了vue的作用範圍，data用於定義一些資料。
假定你現在需要間隔2秒輸出Bye World，你之前可能是這樣寫程式碼：
var a =document.getElementById("app");
a.innerText="Hello World";
setTimeout(function () {
a.innerText="Bye World"
},2000)
但是如果你使用了vue，你就不需要關注任何有關DOM的編碼了，你只要這樣寫：
var a = new Vue({
el:" #app",
data: {
message: "Hello World1",
}
})
setTimeout(function () {
a.$data.message = "Bye World"
},2000)
你不用關心DOM上的操作，只需要關注資料的管理即可，這裡的$data就是給上面例項中的data取了一個別名，然後根據鍵來取值就可以。vue對資料管理非常友好，因此只要資料發生了改變，頁面顯示就會跟著改變。
使用Vue建立的一個todolist
<body>
<div id="app">
<input v-model="inputValue">
<button type="button" @click="handleClick">點選</button>
<ul>
<li v-for="(item,index) of lists" :key="index">{{ item }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
inputValue:"",
lists:[],
},
methods:{
handleClick:function () {
this.lists.push(this.inputValue);this.inputValue='';
},
}
})
</script>
</body>