昨天晚上23:00，Vue，正式打響第一槍！轉行三年半，向全棧邁進，爭取三年內可以成爲架構師，成爲世界500強公司的中流砥柱，fighting從未停止，加油！
一、簡介
Vue(讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式JavaScript框架。與其它框架不同的是，Vue被設計爲可以自底向上逐層應用。Vue的核心庫只關注視圖層，方便與第三方庫或既有項目整合。另一方面，Vue 完全有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。
Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
二、Vue.js實現hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--插值表達式，綁定vue中的data數據-->
{{message}}
</div>
<script src="vue.min.js"></script>
<script>
//1、創建一個vue對象
new Vue({
el: '#app',//2、綁定vue作用的範圍
data: {//3、定義頁面中顯示的模型數據
message: 'hello vue!'
}
})
</script>
</body>
</html>
三、創建代碼片段
文件 => 首選項 => 用戶代碼片段 => 新建全局代碼片段/或文件夾代碼片段：vue-html.code-snippets
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}
四、基礎語法
1、單向綁定數據v-bind
你看到的 v-bind 特性被稱爲指令。指令帶有前綴 v-
除了使用插值表達式{{}}進行數據渲染，也可以使用 v-bind指令，它的簡寫的形式就是一個冒號（:）
2、雙向綁定數據v-model
data: {
searchMap:{
keyWord: '素小暖'
}
}
<!-- v-bind:value只能進行單向的數據渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以進行雙向的數據綁定 -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查詢的是：{{searchMap.keyWord}}</p>
3、方法methods
4、修飾符
修飾符 (Modifiers) 是以半角句號（.）指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。
例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：
即阻止事件原本的默認行爲
5、條件渲染
v-if：條件指令
<input type="checkbox" v-model="ok">同意許可協議
<!-- v:if條件指令：還有v-else、v-else-if 切換開銷大 -->
<h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
<h1 v-else>no</h1>
v-show：條件指令
使用v-show完成和上面相同的功能
<!-- v:show 條件指令 初始渲染開銷大 -->
<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>
- v-if 是“真正”的條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
- v-if 也是惰性的：如果在初始渲染時條件爲假，則什麼也不做——直到條件第一次變爲真時，纔會開始渲染條件塊。
- 相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
- 一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
6、列表渲染
v-for：列表循環指令
例1：簡單的列表渲染
<!-- 1、簡單的列表渲染 -->
<ul>
<li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
<!-- 如果想獲取索引，則使用index關鍵字，注意，圓括號中的index必須放在後面 -->
<li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>
例2：遍歷數據列表
data: {
userList: [
{ id: 1, username: 'helen', age: 18 },
{ id: 2, username: 'peter', age: 28 },
{ id: 3, username: 'andy', age: 38 }
]
}
<!-- 2、遍歷數據列表 -->
<table border="1">
<!-- <tr v-for="item in userList"></tr> -->
<tr v-for="(item, index) in userList">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
</tr>
</table>
五、組件
組件（Component）是 Vue.js 最強大的功能之一。
組件可以擴展 HTML 元素，封裝可重用的代碼。
組件系統讓我們可以用獨立可複用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象爲一個組件樹：
1、局部組件
var app = new Vue({
el: '#app',
// 定義局部組件，這裏可以定義多個局部組件
components: {
//組件的名字
'Navbar': {
//組件的內容
template: '<ul><li>首頁</li><li>學員管理</li></ul>'
}
}
})
使用組件
<div id="app">
<Navbar></Navbar>
</div>
2、全局組件
定義全局組件：components/Navbar.js
// 定義全局組件
Vue.component('Navbar', {
template: '<ul><li>首頁</li><li>學員管理</li><li>講師管理</li></ul>'
})
<div id="app">
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
var app = new Vue({
el: '#app'
})
</script>
六、生命週期
分析生命週期相關方法的執行時機
//===創建時的四個事件
beforeCreate() { // 第一個被執行的鉤子方法：實例被創建出來之前執行
console.log(this.message) //undefined
this.show() //TypeError: this.show is not a function
// beforeCreate執行時，data 和 methods 中的 數據都還沒有沒初始化
},
created() { // 第二個被執行的鉤子方法
console.log(this.message) //牀前明月光
this.show() //執行show方法
// created執行時，data 和 methods 都已經被初始化好了！
// 如果要調用 methods 中的方法，或者操作 data 中的數據，最早，只能在 created 中操作
},
beforeMount() { // 第三個被執行的鉤子方法
console.log(document.getElementById('h3').innerText) //{{ message }}
// beforeMount執行時，模板已經在內存中編輯完成了，尚未被渲染到頁面中
},
mounted() { // 第四個被執行的鉤子方法
console.log(document.getElementById('h3').innerText) //牀前明月光
// 內存中的模板已經渲染到頁面，用戶已經可以看見內容
},
//===運行中的兩個事件
beforeUpdate() { // 數據更新的前一刻
console.log('界面顯示的內容：' + document.getElementById('h3').innerText)
console.log('data 中的 message 數據是：' + this.message)
// beforeUpdate執行時，內存中的數據已更新，但是頁面尚未被渲染
},
updated() {
console.log('界面顯示的內容：' + document.getElementById('h3').innerText)
console.log('data 中的 message 數據是：' + this.message)
// updated執行時，內存中的數據已更新，並且頁面已經被渲染
}
七、路由
Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。
通過 Vue.js 可以實現多視圖的單頁Web應用（single page web application，SPA）。
Vue.js 路由需要載入 vue-router 庫
1、引入js
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
2、編寫html
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
<router-link to="/">首頁</router-link>
<router-link to="/student">會員管理</router-link>
<router-link to="/teacher">講師管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這裏 -->
<router-view></router-view>
</div>
3、編寫js
<script>
// 1. 定義（路由）組件。
// 可以從其他文件 import 進來
const Welcome = { template: '<div>歡迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
// 2. 定義路由
// 每個路由應該映射一個組件。
const routes = [
{ path: '/', redirect: '/welcome' }, //設置默認指向的路徑
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
// 3. 創建 router 實例，然後傳 `routes` 配置
const router = new VueRouter({
routes // （縮寫）相當於 routes: routes
})
// 4. 創建和掛載根實例。
// 從而讓整個應用都有路由功能
const app = new Vue({
el: '#app',
router
})
// 現在，應用已經啓動了！
</script>