文章目錄
一、爲什麼要學習Vue
先看一組數據
- github star 14w+，位列開發項目第一
- patreon捐贈$1.5w+/月
- Chrome DevTools周活用戶90w+
給出三點理由：
- 最熱門的前端開源框架之一
- 大幅提升Web開發效率，降低開發門檻
- 大幅提升Web項目的可維護性
二、Hello World
第一步 在桌面創建index.html文件
touch ~/Desktop/index.html
第二步 填入如下代碼
用你喜歡的編輯器打開這個文件（注意：不要用瀏覽器打開，因爲這樣你無法編輯它），推薦使用Webstorm或者Vscode，寫入如下代碼：
<!DOCTYPE html>
<html>
<head>
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">{{message}}</div>
<script>
new Vue({
el: '#root',
data() {
return {
message: 'Hello Mpvue!'
}
}
})
</script>
</body>
</html>
第三步 使用瀏覽器打開index.html
這時我們會在瀏覽器中看到如下效果： 
如果你也看到同樣的內容，恭喜你！這說明我們的程序生效了
三、源碼分析
上述代碼基本是Vue可運行的最小case，下面我們就來分析一下這個case的具體執行過程，幫忙大家理解Vue的工作原理（爲了節約篇幅，省略了與Vue無關的內容）：
第一步，加載vue.js腳本
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
執行這行代碼時，瀏覽器會下載並執行vue.js這個腳本文件，下載地址是：https://cdn.jsdelivr.net/npm/vue/dist/vue.js，大家可以直接打開這個文件，這個文件就是Vue.js源碼經過編譯、打包後生成的最終文件
這裏有兩個非常重要的基礎知識點：
- 瀏覽器解析html文件的過程是自上而下、逐行解析的
- 執行script標籤時，瀏覽器會下載，然後執行js腳本，只有這一步完成後纔會開始下一步，因爲如果不完成這一步，下面的代碼中如果使用了該js腳本內容時就會報錯
第二步，生成div
加載完vue.js腳本後瀏覽器繼續執行body中的內容
<div id="root">{{message}}</div>
當瀏覽器執行到上述代碼時，得到的效果如下： 
爲什麼會這樣呢？因爲這裏的{{message}}被視爲普通文本來執行了，要驗證這一點很簡單，大家把代碼中這部分代碼刪除即可
第三步，執行script腳本
我們通過結果可以反推下面這段代碼的作用是將界面中的{{message}}替換爲Hello Mpvue!，事實也確實如此！這裏的el: '#root’告訴瀏覽器去查找id爲root的DOM，然後將其中的變量替換爲我們自定義的內容
new Vue({
el: '#root',
data() {
return {
message: 'Hello Mpvue!'
}
}
})
到這裏，我要恭喜你，已經完成了Vue.js的入門學習，由此可見Vue.js並沒有那麼難學！
四、事件
下面我們向界面中增加一個按鈕，代碼如下：
<div id="root">
{{message}}
<button>點擊變換文字</button>
</div>
這時雖然可以看到按鈕，但是點擊它是沒有反應的，因爲我們還沒有綁定事件，Vue中綁定點擊事件需要通過@click來實現：
<div id="root">
{{message}}
<button @click="handleClick">點擊變換文字</button>
</div>
這裏有一點非常重要，就是button必須爲位於id爲root的div下，vue只會處理該div下的DOM，像下面這樣的代碼是無法綁定成功的！
<div id="root">{{message}}</div>
<!-- 下面這行代碼綁定事件是無效的 -->
<button @click="handleClick">點擊變換文字</button>
這段代碼表示點擊按鈕時，會調用handleClick方法，注意這個方法是需要定義在Vue參數的methods屬性中，完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
{{message}}
<button @click="handleClick">點擊變換文字</button>
</div>
<script>
new Vue({
el: '#root',
data() {
return {
message: 'Hello Mpvue!'
}
},
methods: {
handleClick() {
this.message = 'Click worked!'
}
}
})
</script>
</body>
</html>
回到瀏覽器中點擊按鈕，可以看到文字從Hello Mpvue!變成了Click worked!
五、條件
下面我們略微修改需求，我們希望點擊按鈕時，文字隱藏，如果文字已經處於隱藏狀態，則進行顯示，要實現這一點，我們需要藉助v-if或v-show指令，先改造DOM：
<div id="root">
<span v-if="visible">{{message}}</span>
<button @click="handleClick">點擊隱藏文字</button>
</div>
上述代碼表示，當visible變量爲true時，顯示span標籤，反之則隱藏，下面我們再定義visible變量，並且修改事件：
<!DOCTYPE html>
<html>
<head>
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<span v-if="visible">{{message}}</span>
<button @click="handleClick">點擊隱藏文字</button>
</div>
<script>
new Vue({
el: '#root',
data() {
return {
message: 'Hello Mpvue!',
visible: true
}
},
methods: {
handleClick() {
this.visible = !this.visible
}
}
})
</script>
</body>
</html>
這裏我們具體做了兩件事：
- 定義了visible變量，默認爲true，那麼span默認就是顯示狀態
- 修改了handleClick，當點擊按鈕時對visible取反，也就是說顯示的時候隱藏，隱藏的時候顯示
這裏我們可以將v-if改爲v-show，他們兩者的區別在於v-if隱藏時會移除DOM，而v-show隱藏時僅僅改變DOM的display屬性爲none
六、循環
下面我們繼續增加需求的複雜度，我們希望點擊一次按鈕，就會再出現一行文字，這時字符串已經不能滿足我們的需求了，我們需要創建一個數組來存儲數據，然後通過v-for循環指令來進行顯示，還是先修改DOM：
<div id="root">
<div v-for="item in data" :key="item">{{message}} - {{item}}</div>
<button @click="handleClick">點擊添加一行</button>
</div>
v-for使用時需要有兩個注意點：
- data必須是一個數組或者對象，即可遍歷的元素
- 使用v-for的DOM需要指定key屬性，並且綁定到一個唯一值
接下來的工作是定義data變量，修改handleClick方法：
<!DOCTYPE html>
<html>
<head>
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div v-for="item in data" :key="item">{{message}} - {{item}}</div>
<button @click="handleClick">點擊添加一行</button>
</div>
<script>
new Vue({
el: '#root',
data() {
return {
message: 'Hello Mpvue!',
data: [],
index: 1,
}
},
methods: {
handleClick() {
this.data.push(this.index++)
}
}
})
</script>
</body>
</html>
初始狀態下，我們可以看到界面上只有一個按鈕，當點擊按鈕時會添加一行，再次點擊會再增加一行，這是因爲每次點擊時我們都會往data中添加一個元素index，然後將index的值加1，這樣每點擊第一次data中就多一個元素，從而實現了列表展示
七、雙向綁定
下面我們將展示Vue的雙向綁定機制，我們先在界面中添加一個input輸入框，並使用v-model綁定一個變量：
<div id="root">
<input type="text" v-model="data">
<div>{{data}}</div>
</div>
完整源碼如下：
<!DOCTYPE html>
<html>
<head>
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" v-model="data">
<div>{{data}}</div>
</div>
<script>
new Vue({
el: '#root',
data() {
return {
data: null,
}
}
})
</script>
</body>
</html>
在瀏覽器中打開文件檢查效果：我們向input輸入框中輸入一些文本，發現下方的div中的內容會隨着改變，這說明Vue幫我們做了以下工作：
- 監聽input的輸入變化
- 將input的輸入變化寫入data變量
八、組件化
數據驅動和組件化是Vue最重要的兩個概念，上面的概念都在演示如何通過數據的方式驅動DOM的變化，下面我們將演示如何通過組件化的方式簡化開發，提高複用，我們先創建一個Message組件：
Vue.component('Message', {
template: '<div>{{data}}</div>',
props: {
data: String
}
})
創建組件需要通過Vue.component這個靜態方法來實現，第一個參數是組件的名稱，第二個參數是組件的參數：
- template: 表示組件對應的DOM結構
- props: 父組件傳入的參數名稱和值類型
完整源碼如下：
<!DOCTYPE html>
<html>
<head>
<title>vue測試</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<Message :data="message"></Message>
</div>
<script>
Vue.component('Message', {
template: '<div>{{data}}</div>',
props: {
data: String
}
})
new Vue({
el: '#root',
data() {
return {
message: 'Hello Mpvue!'
}
}
})
</script>
</body>
</html>
這段代碼雖然很短，但是邏輯還是比較複雜的，下面具體給大家解析執行過程：
- 定義組件Message，並且指定了組件的template和props
- 實例化Vue對象，初始化了message
- DOM中使用了Message組件，此時會將該組件替換爲template中的內容，並接收父組件傳入的data參數，這裏data參數的值爲message
- 完成對DOM的渲染
組件是可以嵌套的，也就是說組件中可以繼續嵌套組件，從而實現更高層次的複用！
九、腳手架的使用
安裝cnpm 官網：http://npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝vue Vue-CLI官網：https://cli.vuejs.org/zh/
cnpm install -g @vue/cli
項目初始化
vue create hello-world
運行項目
cd hello-world
npm run serve
代碼結構
- index.html：應用的入口文件
- main.js：主js文件，初次渲染時執行
- App.vue：根組件，在main.js中加載
十、小結
至此，Vue的基礎部分就給大家講解完了，如果大家還有什麼不清楚的地方可以到問答區與我互動哦