Vue基礎(chǔ)語法知識梳理下篇

更新時間：2022年12月12日 10:14:46 作者：糖^O^

這篇文章主要介紹了Vue基礎(chǔ)語法知識梳理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

計算屬性

定義：要用的屬性不存在，要通過已有屬性計算得來
原理：底層借助了Objcet.defineProperty方法提供的getter和setter

get函數(shù)什么時候執(zhí)行？

(1).初次讀取時會執(zhí)行一次

(2).當(dāng)依賴的數(shù)據(jù)發(fā)生改變時會被再次調(diào)用

注：

計算屬性最終會出現(xiàn)在vm上，直接讀取使用即可
如果計算屬性要被修改，那必須寫set函數(shù)去響應(yīng)修改，且set中要引起計算時依賴的數(shù)據(jù)發(fā)生改變

計算屬性完整版寫法
<!-- 準(zhǔn)備好一個容器-->
<div id="root">
    姓：<input type="text" v-model="firstName">
    名：<input type="text" v-model="lastName"> 
    全名：<span>{{fullName}}</span>
</div>
<script>
	const vm = new Vue({
        el:'#root',
        data:{
            firstName:'張',
            lastName:'三',
        }
        computed:{
            fullName:{
                //get有什么作用？當(dāng)有人讀取fullName時，get就會被調(diào)用，且返回值就作為fullName的值
                //get什么時候調(diào)用？1.初次讀取fullName時。2.所依賴的數(shù)據(jù)發(fā)生變化時。
                get(){
                    console.log('get被調(diào)用了')
                    return this.firstName + '-' + this.lastName
                },
                //set什么時候調(diào)用? 當(dāng)fullName被修改時。
                // 可以主動在控制臺修改fullName來查看情況
                set(value){
                    console.log('set',value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
</script>

鍵盤事件

鍵盤事件語法：@keydown，@keyup

Vue中常用的按鍵別名：

回車	enter
刪除	delete (捕獲“刪除”和“退格”鍵)
退出	esc
換行	tab (特殊，必須配合keydown去使用)
空格	space
上	up
下	down
左	left
右	right

Vue未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但注意要轉(zhuǎn)為kebab-case（短橫線命名）

系統(tǒng)修飾鍵（用法特殊）：ctrl、alt、shift、meta

配合keyup使用：按下修飾鍵的同時，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)。
配合keydown使用：正常觸發(fā)事件。

也可以使用keyCode去指定具體的按鍵（不推薦）

Vue.config.keyCodes.自定義鍵名 = 鍵碼，可以去定制按鍵別名

監(jiān)視屬性

監(jiān)視屬性watch：

當(dāng)被監(jiān)視的屬性變化時, 回調(diào)函數(shù)自動調(diào)用

監(jiān)視的屬性必須存在，才能進(jìn)行監(jiān)視

監(jiān)視的兩種寫法：

(1).new Vue時傳入watch配置

(2).通過vm.$watch監(jiān)視

<!-- 準(zhǔn)備好一個容器-->
<div id="root">
    <h2>今天天氣很{{ info }}</h2>
    <button @click="changeWeather">切換天氣</button>
</div>
<script>
	const vm = new Vue({
        el:'#root',
        data:{
            isHot:true,
        },
        computed:{
            info(){
                return this.isHot ? '炎熱' : '涼爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            isHot:{
                immediate: true, // 初始化時讓handler調(diào)用一下
                // handler什么時候調(diào)用？當(dāng)isHot發(fā)生改變時。
                handler(newValue, oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            }
        } 
    })
</script>

深度監(jiān)視：

(1).Vue中的watch默認(rèn)不監(jiān)測對象內(nèi)部值的改變（一層）

(2).配置deep:true可以監(jiān)測對象內(nèi)部值改變（多層）

備注：

Vue自身可以監(jiān)測對象內(nèi)部值的改變，但Vue提供的watch默認(rèn)不可以

使用watch時根據(jù)數(shù)據(jù)的具體結(jié)構(gòu)，決定是否采用深度監(jiān)視

<!-- 準(zhǔn)備好一個容器-->
<div id="root">
    {{numbers.c.d.e}}
</div>
<script type="text/javascript">
    Vue.config.productionTip = false 
    const vm = new Vue({
        el:'#root',
        data:{
            numbers:{
                c:{
                    d:{
                        e:100
                    }
                }
            }
        },
        watch:{
            //監(jiān)視多級結(jié)構(gòu)中某個屬性的變化
            /* 'numbers.a':{
					handler(){
						console.log('a被改變了')
					}
				} */
            //監(jiān)視多級結(jié)構(gòu)中所有屬性的變化
            numbers:{
                deep:true,
                handler(){
                    console.log('numbers改變了')
                }
            }
        }
    });
</script>

computed和watch之間的區(qū)別：

computed能完成的功能，watch都可以完成
watch能完成的功能，computed不一定能完成，例如：watch可以進(jìn)行異步操作

兩個重要的小原則：

1.所被Vue管理的函數(shù)，最好寫成普通函數(shù)，這樣this的指向才是vm 或組件實例對象

2.所有不被Vue所管理的函數(shù)（定時器的回調(diào)函數(shù)、ajax的回調(diào)函數(shù)等、Promise的回調(diào)函數(shù)），最好寫成箭頭函數(shù)，這樣this的指向才是vm 或組件實例對象

綁定樣式

class樣式

寫法：:class=“xxx” xxx可以是字符串、對象、數(shù)。

所以分為三種寫法，字符串寫法，數(shù)組寫法，對象寫法

(1)字符串寫法

字符串寫法適用于：類名不確定，要動態(tài)獲取。

<style>
	.normal{
        background-color: skyblue;
    }
</style>
<!-- 準(zhǔn)備好一個容器-->
<div id="root">
    <!-- 綁定class樣式--字符串寫法，適用于：樣式的類名不確定，需要動態(tài)指定 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
</div>
<script>
	const vm = new Vue({
        el:'#root',
        data:{
            mood:'normal'
        }
    })
</script>

(2)數(shù)組寫法

數(shù)組寫法適用于：要綁定多個樣式，個數(shù)不確定，名字也不確定。

<style>
    .atguigu1{
        background-color: yellowgreen;
    }
    .atguigu2{
        font-size: 30px;
        text-shadow:2px 2px 10px red;
    }
    .atguigu3{
        border-radius: 20px;
    }
</style>
<!-- 準(zhǔn)備好一個容器-->
<div id="root">
    <!-- 綁定class樣式--數(shù)組寫法，適用于：要綁定的樣式個數(shù)不確定、名字也不確定 -->
	<div class="basic" :class="classArr">{{name}}</div>
</div>
<script>
	const vm = new Vue({
        el:'#root',
        data:{
            classArr: ['atguigu1','atguigu2','atguigu3']
        }
    })
</script>

(3)對象寫法

對象寫法適用于：要綁定多個樣式，個數(shù)確定，名字也確定，但不確定用不用。

<style>
    .atguigu1{
        background-color: yellowgreen;
    }
    .atguigu2{
        font-size: 30px;
        text-shadow:2px 2px 10px red;
    }
</style>
<!-- 準(zhǔn)備好一個容器-->
<div id="root">
    <!-- 綁定class樣式--對象寫法，適用于：要綁定的樣式個數(shù)確定、名字也確定，但要動態(tài)決定用不用 -->
	<div class="basic" :class="classObj">{{name}}</div>
</div>
<script>
	const vm = new Vue({
        el:'#root',
        data:{
            classObj:{
                atguigu1:false,
                atguigu2:false,
			}
        }
    })
</script>

style樣式

有兩種寫法，對象寫法，數(shù)組寫法

(1)對象寫法

<!-- 準(zhǔn)備好一個容器-->
<div id="root">
    <!-- 綁定style樣式--對象寫法 -->
	<div class="basic" :style="styleObj">{{name}}</div>
</div>
<script>
	const vm = new Vue({
        el:'#root',
        data:{
            styleObj:{
                fontSize: '40px',
                color:'red',
			}
        }
    })
</script>

(3)數(shù)組寫法

<!-- 準(zhǔn)備好一個容器-->
<script>
	const vm = new Vue({
        el:'#root',
        data:{
            styleArr:[
                {fontSize: '40px',
                    color:'blue',
                },{
                    backgroundColor:'gray'
                }
            ]
        }
    })
</script>

條件渲染

v-if

(1).v-if=“表達(dá)式”

(2).v-else-if=“表達(dá)式”

(3).v-else=“表達(dá)式”

適用于：切換頻率較低的場景

特點：不展示的DOM元素直接被移除

注意：v-if可以和:v-else-if、v-else一起使用，但要求結(jié)構(gòu)不能被“打斷”

v-show

寫法：v-show=“表達(dá)式”
適用于：切換頻率較高的場景
特點：不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉(display:none)

備注：使用v-if的時，元素可能無法獲取到，而使用v-show一定可以獲取到

v-if 是實打?qū)嵉馗淖僤om元素，v-show 是隱藏或顯示dom元素

<!-- 準(zhǔn)備好一個容器-->
<div id="root">
    <!-- 使用v-show做條件渲染 -->
    <h2 v-show="false">歡迎來到{{name}}</h2>
    <h2 v-show="1 === 1">歡迎來到{{name}}</h2>
</div>

列表渲染

v-for指令

用于展示列表數(shù)據(jù)
語法：v-for=“(item, index) in xxx” :key=“yyy”
可遍歷：數(shù)組、對象、字符串（用的很少）、指定次數(shù)（用的很少）

<div id="root">
    <!-- 遍歷數(shù)組 -->
    <h2>人員列表（遍歷數(shù)組）</h2>
    <ul>
        <li v-for="(p,index) of persons" :key="index">
            {{p.name}}-{{p.age}}
        </li>
    </ul>
    <!-- 遍歷對象 -->
    <h2>汽車信息（遍歷對象）</h2>
    <ul>
        <li v-for="(value,k) of car" :key="k">
            {{k}}-{{value}}
        </li>
    </ul>
    <!-- 遍歷字符串 -->
    <h2>測試遍歷字符串（用得少）</h2>
    <ul>
        <li v-for="(char,index) of str" :key="index">
            {{char}}-{{index}}
        </li>
    </ul>
    <!-- 遍歷指定次數(shù) -->
    <h2>測試遍歷指定次數(shù)（用得少）</h2>
    <ul>
        <li v-for="(number,index) of 5" :key="index">
            {{index}}-{{number}}
        </li>
    </ul>
</div>
<script>
	const vm = new Vue({
        el:'#root',
        data: {
			persons: [
				{ id: '001', name: '張三', age: 18 },
				{ id: '002', name: '李四', age: 19 },
				{ id: '003', name: '王五', age: 20 }
			],
			car: {
				name: '奧迪A8',
				price: '70萬',
				color: '黑色'
			},
			str: 'hello'
		}
    })
</script>

vue監(jiān)測data中的數(shù)據(jù)

<!-- 準(zhǔn)備好一個容器-->
<div id="root">
    <h2>學(xué)校名稱：{{name}}</h2>
    <h2>學(xué)校地址：{{address}}</h2>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
    const vm = new Vue({
        el:'#root',
        data:{
            name:'浙江師范大學(xué)',
            address:'金華',
            student:{
                name:'tom',
                age:{
                    rAge:40,
                    sAge:29,
                },
                friends:[
                    {name:'jerry',age:35}
                ]
            }
        }
    })
</script>

Vue.set 的使用

Vue.set(target，propertyName/index，value) 或

vm.$set(target，propertyName/index，value)

用法：

向響應(yīng)式對象中添加一個 property，并確保這個新 property 同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響

應(yīng)式對象上添加新 property，因為 Vue 無法探測普通的新增 property (比如 vm.myObject.newProperty = 'hi')

//代碼
<!-- 準(zhǔn)備好一個容器-->
<div id="root">
    <h1>學(xué)生信息</h1>
    <button @click="addSex">添加性別屬性，默認(rèn)值：男</button> <br/>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
    const vm = new Vue({
        el:'#root',
        data:{
            student:{
                name:'tom',
                age:18,
                hobby:['抽煙','喝酒','燙頭'],
                friends:[
                    {name:'jerry',age:35},
                    {name:'tony',age:36}
                ]
            }
        },
        methods: {
            addSex(){
                // Vue.set(this.student,'sex','男')
                this.$set(this.student,'sex','男')
            }
        }
    })
</script>

所以我們通過 vm._data.student.hobby[0] = ‘aaa’ // 不起作用

vue 監(jiān)測在數(shù)組那沒有 getter 和 setter，所以監(jiān)測不到數(shù)據(jù)的更改，也不會引起頁面的更新

vue對數(shù)組的監(jiān)測是通過包裝數(shù)組上常用的用于修改數(shù)組的方法來實現(xiàn)的。