一、基礎知識
vm代表：new Vue()實例對象，vc代表：VueComponent實例對象，一個vc可認為就是一個組件對象
基礎知識大綱
1.創建Vue示例，new Vue(括號內寫配置內容對象);
綁定模版：
第一種是在構造Vue實例對象的時候通過el:"選擇器名稱"綁定
第二種是創建好Vue對象后，通過對象實例調用綁定方法.$mount()去設置綁定選擇器。
選擇器優先id選擇器，因為和vue實例是需要一 一對應的。如果使用class選擇器，則只有第一個綁定的選擇器才能綁定成功，后面的同名選擇器容器綁定無效。
綁定模版
vue初始化1
vue初始化2
模板指令
2.數據綁定
- 單向綁定v-bind，類似觀察者模式單方向監聽變化，數據變化作用于界面顯示上。一般用于非輸入型控件元素。
- 雙向綁定v-modle，和安卓mvvm框架原理類似，且v-model只能應用在表單類元素(輸入類元素)，輸入和輸出互相影響。
image.png
image.png
3.data與el的2種寫法
- el有2種寫法
(1)new Vue()時候配置el屬性。
(2)先創建Vue實例，隨后再通過vm.$mount('#root')指定el的值。 - data有2種寫法
(1)對象式data:{}
(2)函數式data:function(){ return { } }簡寫data(){ return { } }，vue3只支持函數式寫法。
如何選擇:一般兩種都行，但是寫組件時，data必須使用函數式，否則會報錯。養成習慣推薦使用函數式data -
一個重要的原則:一但寫了箭頭函數，this就不再是Vue實例了，箭頭函數的this會向上一層尋找。由Vue管理的函數，一定不要寫箭頭函數。
image.png
4.vue數據代理和雙向綁定原理
雙向綁定原理是基于mvvm模式理念來的，底層通過Object.defineProperty()將vm實例的“_data”變量中的子屬性添加到vm實例中，與“_data”同級。添加到vm后才能在頁面中簡寫{{name}}否則需要{{_data.name}}
image.png
image.png
image.png
image.png
Vue檢測對象改變都是通過setter()來實現的，也是通過它來實現響應式數據。數組特殊，不能通過直接索引值賦值“=”，可通過響應式的方法push()，pop()等設置，否則不會觸發響應式。如：this.mylist.splice(1,1,666);在下標1的地方刪除1個元素，加上666
image.png
針對數組，filter本身不響應式數據，但是舊數組被重新賦值后卻可以響應。遍歷每一項，過濾后生成新數組，用新數組賦值給舊數組。
數組響應式
image.png
Vue.set 和 this.$set 都可以用來添加或修改對象的屬性，并確保視圖更新。
以下方式均可以響應式確保視圖更新
<div>
<h1>學生信息</h1>
<button @click="student.age++">點擊年齡+1</button><br />
<button @click="addStudentSex">添加性別屬性，默認是男</button><br />
<button @click="student.sex='不曉得'">修改性別屬性，未知</button><br />
<button @click="addFriend">在列表首位添加一個盆友，打亂數據結構</button><br />
<button @click="changeFriend">修改第一個朋友的名字</button><br />
<button @click="addHobby">添加一個愛好</button><br />
<button @click="changeHobby">修改一個愛好</button><br />
<h3>姓名：{{student.name}}</h3>
<h3>年齡：{{student.age}}</h3>
<h3 v-if="student.sex">性別：{{student.sex}}</h3>
<h2>愛好</h2>
<ul>
<li v-for="(item,index) in student.hobby" :key="index">{{item}}</li>
</ul>
<h2>盆友們</h2>
<ul>
<li v-for="(item,index) in student.friends" :key="index">{{item}}</li>
</ul>
</div>
var vm = new Vue({
el: '#app-root-el',
data: {
student: {
name: "張三",
age: 18,
hobby: ['籃球', '足球'],
friends: [
{ "name": "李四", "age": 18 },
{ "name": "王五", "age": 20 },
]
}
},
methods: {
addStudentSex() {
// Vue.set(this.student, 'sex', '男')沒有則會先添加sex屬性，等價于
this.$set(this.student, 'sex', '女')
},
changeStudentSex() {
Vue.set(this.student, 'sex', '未知')
},
addFriend() {
this.student.friends.unshift({ "name": "流星", "age": 28 })
},
changeFriend() {
this.student.friends[0].name = '旺旺'
},
addHobby() {
this.student.hobby.push("打籃球")
}
,
changeHobby() {
//====綜合使用=====
//過濾賦值，更改源數組，均可以響應式確保視圖更新
// this.student.hobby = this.student.hobby.filter(function (item) {
// return item.indexOf('足') > -1
// })
// this.student.hobby.splice(0,1,'乒乓球1')
// this.$set(this.student.hobby,0,'乒乓球2')
Vue.set(this.student.hobby,0,'乒乓球3')
}
}
})
5.Vue的點擊事件使用：v-on:click="xxx"或者簡寫@click="xxx"。
-
前端事件觸發：捕獲動作是由外到內捕獲，冒泡事件是由內到外傳遞。$event參數可以將當前事件的對象通過綁定的函數參數傳遞出去。
事件.png
image.png
Vue中的事件修飾符:
1.prevent:阻止默認事件(常用);
2.stop:阻止事件冒泡(常用);
3.once:事件只觸發一次(常用);
4.capture:使用事件的捕獲模式;可以逆轉一下冒泡順序。
5.self:只有event.target是當前操作的元素時才觸發事件;
6.passive:事件的默認行為立即執行，無需等待事件回調執行完畢;（移動端常用）
<!--事件觸發后就會執行show方法，并且滾動條也會移動，類似異步操作。
如果不加.passive修飾，則必須等待show函數方法跑完才會觸發滾動條-->
<ul @wheel.passive="show" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
methods:{
show(){
//響應方法
}
}
-
鍵盤事件
按鍵別名和按鍵碼
自定義按鍵名
image.png
6.計算屬性computed
只含get()時可簡寫為 fullName(){ return xxx }。計算屬性還自帶緩存機制。
image.png
image.png
image.png
image.png
7.偵聽屬性：可以運用于某個屬性變化后需要的一系列配套變化響應功能
偵聽屬性watch:
1.當被監視的屬性變化時，回調函數自動調用，進行相關操作
2.監視的屬性必須存在，才能進行監視!!
3.immediate:ture可開啟初始化即執行監視
4.監視的兩種寫法:
(1).new Vue時傳入watch配置
(2).通過vm.$watch監視
簡寫形式：
watch:{
isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
或
vm.$watch('isHot',(newValue,oldValue)=>{
console.log('isHot被修改了',newValue,oldValue,this)
})
image.png
深度監視:
(1)vue中的watch默認不監測對象內部值的改變(第一層)
(2)配置deep:true可以監測對象內部值改變(多層)。
備注:
(1)Vue自身可以監測對象內部值的改變，但Vue提供的watch默認不可以!
(2)使用watch時根據數據的具體結構，決定是否采用深度監視。開啟會影響vue運行效率。
深度.png
監視總結.png
8.樣式綁定
image.png
-
綁定class樣式，在class前加冒號，其實就是v-bind:class=" "
image.png
image.png
-
style樣式，v-bind:style=" " ：給系統屬性的“-”去掉，后面的字母大寫開頭作為對象屬性的key值，如font-size變更為fontSize
image.png
9.判斷語句，條件渲染
v-if簡介
示例
10.for數組遍歷
image.png
觀察輸入框值
index為key.png
觀察輸入框值
唯一id為key.png
11.表單數據收集
type="radio"
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2-練習表單數據</title>
<!-- 嘗試 Vue.js 最簡單的方法是使用 Hello World 例子。你可以在瀏覽器新標簽頁中打開它，
跟著例子學習一些基礎用法。或者你也可以創建一個 .html 文件，然后通過如下方式引入 Vue： -->
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 或者： -->
<!-- 生產環境版本，優化了尺寸和速度 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
<style>
</style>
</head>
<body>
<div id="app-root-el">
<form @submit.prevent="showAlert(userinfo)">
<div><label for="zhanghao">賬號：</label><input id="zhanghao" type="text" placeholder="請輸入賬號"
v-model="userinfo.name"></div>
<div><label for="mima">密碼：</label><input id="mima" type="password" placeholder="請輸入密碼"
v-model="userinfo.pwd"></div>
<div><label for="age">年齡：</label><input id="age" type="number" placeholder="請輸入年齡"
v-model.number="userinfo.age"></div>
<div>性別：
男<input type="radio" name="sex" v-model.number="userinfo.sex" value="0">
女<input type="radio" name="sex" v-model.number="userinfo.sex" value="1"></div>
<div>愛好：
打籃球<input type="checkbox" v-model="userinfo.hobby" value="lq">
打羽毛球<input type="checkbox" v-model="userinfo.hobby" value="ymq">
打乒乓球<input type="checkbox" v-model="userinfo.hobby" value="ppq">
</div>
<div>所屬地方
<select title="city" v-model="userinfo.city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">廣州</option>
<option value="sz">深圳</option>
</select>
</div>
<div style="display: inline-flex;align-items: flex-start;margin-top: 20px;">其他信息<textarea title="content"
style="height: 300px;width: 200px;">{{userinfo}}</textarea></div>
<div><input title="xy" type="checkbox" placeholder="">閱讀并接受</div>
<button>提交</button> <button>提交2</button>
</form>
</div>
</body>
<script>
var vm = new Vue({
el: '#app-root-el',
data: {
userinfo: {
name: "張三",
pwd: '123',
sex: 0,
age: 18,
hobby: [],
city: "bj",
content: "",
friends: [
{ "name": "李四", "age": 18 },
{ "name": "王五", "age": 20 },
]
}
},
methods: {
showAlert(e) {
console.log('showAlert')
alert('Hello Vue!' + JSON.stringify(e))
}
},
computed: {
WeatherInfo() {
return '冷'
}
}
})
</script>
</html>
顯示結果
12.過濾器
image.png
過濾器第一個參數message不用寫入括號
13.v-html指令詳解，不要在內容提交輸入框等地方使用，不安全。
image.png
14.v-cloak屬性使用：等待加載完畢后顯示節點
image.png
15.v-pre屬性使用：跳過節點編譯
image.png
16.v-once屬性使用：只動態顯示初次數據內容
image.png
17.v-函數名，自定義屬性使用
在directives:{ }中定義自定義屬性函數，在函數方法內操作真實的DOM元素。element是DOM元素，binding是一個綁定的對象。
全局指令：通過在main.js或main.ts文件中全局注冊v-xxx指令，你可以在任何Vue組件中使用它，而不需要重復定義指令的邏輯。這使得代碼更加模塊化和可維護。
局部自定義.png
全局自定義.png
//===界面顯示冷/熱===
<div>
<span v-muxi="isHot"></span>
</div>
//===方式1，全局自定義屬性===
首先，在項目的入口文件（通常是`main.js`或`main.ts`）中全局注冊`muxi`指令：
Vue.directive('muxi', {
bind(el, binding) {
console.log(el)
console.log(binding)
el.textContent = binding.value ? '熱' : '冷'
}
});
//===方式2，局部自定義屬性===
new Vue({
directives: {
muxi:function(el,binding){
//簡寫，合并bind(el, binding)，update(el, binding)兩個函數
console.log(el)
console.log(binding)
el.textContent = binding.value ? '熱' : '冷'
}
muxi: {
//默認全寫方法
bind(el, binding) {
//綁定自定義屬性
console.log(el)
console.log(binding)
el.textContent = binding.value ? '熱' : '冷'
},
install(el, binding) {
//綁定插入頁面后觸發
el.focus()
},
update(el, binding) {
//遍歷模板，更新時觸發
console.log(el)
console.log(binding)
el.textContent = binding.value ? '熱' : '冷'
}
}
}
)}
二、生命周期
-
生命周期:
1.又名:生命周期回調函數、生命周期函數、生命周期鉤子。
2.是什么:Vue在關鍵時刻幫我們調用的一些特殊名稱的函數。
3.生命周期函數的名字不可更改，但函數的具體內容是程序員根據需求編寫的。
4.生命周期函數中的this指向是vm 或組件實例對象。
5.在beforeUpdate()中頁面和數據還沒有保持同步，此時只是改變了data:{}對象數據，只有updated()周期才把數據和頁面綁定改變。
6.beforDestroy()執行數據釋放、清除定時器、資源回收等。在這個生命周期如果對data:{}做出更改，數據會改變，因為vm還沒銷毀，但是不會觸發數據監聽和updated()。
7.mounted是一個重要的生命周期，在里面執行網絡操作、開啟定時器、操作業務邏輯等
-
四對生命周期
1.beforeCreate()、created()，創建
2.beforeMounted()、mounted()，掛載。
3.beforeUpdate()、updated()，更新
4.beforeDestroy()，destroyed()，銷毀
image.png
lifecycle.png
image.png
image.png
image.png
image.png
