# Vue的學(xué)習(xí)路線規(guī)劃
1. Vue基礎(chǔ)
2. Vue-cli
3. Vue-router
4. Vuex
5. Element-ui
6. Vue3
本文是作者跟著尚硅谷的張?zhí)煊砝蠋煹囊曨l學(xué)習(xí)時做的筆記
# Vue是什么
**官網(wǎng)給出的定義如下：**
> 一套用于`構(gòu)建用戶界面`的漸進式`JavaScript`框架
- **什么是`構(gòu)建用戶界面`长赞？**
就是把數(shù)據(jù)展示在頁面的合適位置
- **什么是`漸進式`蝇狼？**
*Vue可以自底向上逐層的應(yīng)用。*
也就是說肝谭，假如我們要做一個簡單的應(yīng)用，那么我們只需要一個輕量的核心庫就可以赖晶；
如果我們要做一個復(fù)雜的應(yīng)用俄占，那么我們可以引入各式各樣的Vue插件來增強功能。
# Vue的特點
1. 采用組件化模式葡缰，提高代碼復(fù)用率亏掀，且讓代碼更好維護
2. 聲明式編碼，讓編碼人員無需直接操作DOM泛释，提高開發(fā)效率
# 搭建Vue開發(fā)環(huán)境
## Vue的安裝方式
1. **直接用`<script>`引入**
2. **NPM**
3. **命令行工具 (CLI)**
這里我們使用標簽引入的方式來使用Vue
*首先滤愕，我們先創(chuàng)建一個文件夾，用vscode打開怜校，接著我們在這個文件夾里再新建一個文件夾放入Vue官網(wǎng)給的兩個js文件间影，不帶min的為開發(fā)版本，帶min的為生產(chǎn)版本,并新建一個文件夾新建自己的html文件*
*官方文檔地址放這了茄茁，點擊開發(fā)版本和生產(chǎn)版本即可下載兩個js文件* https://cn.vuejs.org/v2/guide/installation.html
然后在script標簽中引入其中一個即可魂贬，這里引入的是開發(fā)版本的
```html
<script type="text/javascript" src="../js/vue.js"></script>
```
## chrome的Vue插件安裝
國外的同學(xué)可以在chrome網(wǎng)上應(yīng)用店可以搜到
國內(nèi)的同學(xué)要在網(wǎng)上找到下面這個文件把它拖到chrome的擴展程序頁面里就可以安裝成功
接著在chrome的右上角把Vue開發(fā)工具固定在地址欄右邊
# Hello小案例
1. 先準備一個div容器巩割，設(shè)置id值
2. 在script標簽中創(chuàng)建Vue實例，并用el指定Vue實例為哪個容器服務(wù)
3. data中放入要使用的數(shù)據(jù)
4. div中用{{數(shù)據(jù)的key值}}取得數(shù)據(jù)并顯示
```html
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
? ? <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
? ? //準備好容器
? ? <div id="root">
? ? ? ? <h1>{{name}}</h1>
? ? </div>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? //el用于指定當前Vue實例為哪個容器服務(wù)付燥，值通常為css選擇器字符串
? ? ? ? ? ? el:'#root',
? ? ? ? ? ? //data中用于存儲數(shù)據(jù)宣谈，數(shù)據(jù)供el所指定的容器去使用
? ? //data中的數(shù)據(jù)變化時，頁面中有用到數(shù)據(jù)的地方也跟著變化
? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? name:'ZhengBin'
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>
```
在頁面中顯示為
## 注意事項
- 真實開發(fā)中只有一個Vue實例键科，并且會配合著組件一起使用
- {{js表達式}}中的js表達式可以自動讀取到data中的所有數(shù)據(jù)
- 一旦data中的數(shù)據(jù)發(fā)生改變闻丑，那么頁面中有用到該數(shù)據(jù)的地方也會自動改變
*區(qū)分：js表達式和js語句*
*1.表達式：一個表達式會產(chǎn)生一個值，可以放在任何一個需要值的地方勋颖，例如`a`嗦嗡、`a+b`、`demo(1)`牙言、`a === b ? x:y`
2.語句：例如if語句,for語句等*
# Vue模板語法
Vue模板語法分為兩大類
1. 插值語法：
功能：用于解析標簽體內(nèi)容（標簽體內(nèi)容是在兩個標簽之間的內(nèi)容）
寫法：{{js表達式}}酸钦，可以直接讀取到data中的所有屬性
2. 指令語法
功能：用于解析標簽(包括：標簽屬性、標簽體內(nèi)容咱枉、綁定事件......)
舉例：v-bind:href="xxx" 或簡寫為 :href="xxx",xxx同樣要寫成js表達式卑硫，且可以讀取到data中的所有屬性
備注：Vue中有很多的指令，且形式都是v-???蚕断，此處我們只是拿v-bind舉個例子
關(guān)于指令語法欢伏，我們舉個例子
例如，我們要在頁面上弄個超鏈接亿乳，鏈接地址數(shù)據(jù)放在Vue實例的data中
```html
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
? ? <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
? ? <!-- 準備好容器 -->
? ? <div id="root">
? ? ? ? <!-- 此處也可以簡寫為:href,但只有v-bind指令可以這樣做 -->
? ? ? ? <a v-bind:href="url">跳轉(zhuǎn)到百度</a>
? ? </div>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? //el用于指定當前Vue實例為哪個容器服務(wù)硝拧，值通常為css選擇器字符串
? ? ? ? ? ? el:'#root',
? ? ? ? ? ? //data中用于存儲數(shù)據(jù)，數(shù)據(jù)供el所指定的容器去使用
? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? url:'http://www.baidu.com'
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>
```
說白了就是標簽里的屬性可以取到data里的值葛假，不過要在屬性前加`v-bind`或者`:`（可以簡寫為`:`的只有v-bind指令障陶，其它的不行），另外指令語法也可以用在標簽體內(nèi)容聊训、綁定事件
**額外補充一點**：
`取data中的屬性時抱究，可以有層級關(guān)系的取值`
例如，我們要取兩個名字带斑，一個是學(xué)生的名字鼓寺，一個是學(xué)校的名字
```html
? ? <div id="root">
? ? ? ? <h1>{{name}}</h1>
? ? ? ? <h1>{{name1}}</h1>
? ? </div>
```
如果這樣寫的話，那么我們在data中是不是得寫一個name屬性,一個name1屬性?
我們可以這樣做勋磕，把它改成
```html
? ? <div id="root">
? ? ? ? <h1>{{stu.name}}</h1>
? ? ? ? <h1>{{school.name}}</h1>
? ? </div>
```
同時在data中這樣寫
```html
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? //el用于指定當前Vue實例為哪個容器服務(wù)妈候，值通常為css選擇器字符串
? ? ? ? ? ? el:'#root',
? ? ? ? ? ? //data中用于存儲數(shù)據(jù)，數(shù)據(jù)供el所指定的容器去使用
? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? stu:{
? ? ? ? ? ? ? ? ? ? name:'ZhengBin'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? school:{
? ? ? ? ? ? ? ? ? ? name:'xxx'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
```
最終在頁面中顯示為
# 單向數(shù)據(jù)綁定與雙向綁定
單向數(shù)據(jù)綁定用的是`v-bind`指令
雙向數(shù)據(jù)綁定用的是`v-model`指令
我們用`v-model`舉個例子來告訴大家什么是雙向綁定
```html
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
? ? <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
? ? <div id="root">
? ? ? ? <!-- v-model:value此處可以簡寫為v-model -->
? ? ? ? <input type="text" v-model:value="age"/>
? ? </div>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el:'#root',
? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? age:23
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>
```
**注意輸入框和data里的數(shù)據(jù)是一樣的挂滓，當我們把輸入框里的文字改變時苦银，data里的數(shù)據(jù)也跟著一起改變**
**而`v-bind`的單向數(shù)據(jù)綁定指的是只有data里的數(shù)據(jù)變化時，我們在頁面中的數(shù)據(jù)跟著改變，當頁面中的值改變時墓毒，data里的值不跟著改變**
**說白了單向綁定就是數(shù)據(jù)只能由data流向頁面吓揪，而雙向綁定是兩邊互流**
- 雙向綁定一般都應(yīng)有在表單類元素上（如input、select）
- `v-model：value`可以簡寫為`v-model`所计，因為`v-model`默認收集的是value值
# el與data的兩種寫法
1. el的兩種寫法
(1)new Vue()的時候配置el屬性
(2)先創(chuàng)建Vue實例柠辞，隨后通過vm.$mount('#root')指定el的值
```html
? ? <script>
? ? ? ? const v=new Vue({
? ? ? ? ? ? // el:'#root'? 第一種寫法
? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? age:23
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? v.$mount('#root')? //第二種寫法
? ? </script>
```
2. data的兩種寫法
(1)對象式
(2)函數(shù)式
如何選擇？目前哪種寫法都行主胧，以后學(xué)習(xí)到組件時叭首，data必須使用函數(shù)式，否則會報錯
一個重要的原則：由Vue管理的函數(shù)踪栋，使用到this指的是Vue實例焙格。并且Vue管理的函數(shù)，一定不要寫成箭頭函數(shù)夷都，一旦寫了眷唉，this指的就不是Vue實例了
```html
? ? <script>
? ? ? ? const v=new Vue({
? ? ? ? ? ? el:'#root',
? ? ? ? ? ? //對象式
? ? ? ? ? ? // data:{
? ? ? ? ? ? //? ? age:23
? ? ? ? ? ? // }
? ? ? ? ? ? //函數(shù)式
? ? ? ? ? ? data(){
? ? ? ? ? ? ? ? return{
? ? age:23
}
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
```
