1佑颇、npm install
安裝npm包
問題：
1低零、npm install報(bào)錯(cuò)npm ERR Could not resolve dependency: npm ERR peer...
報(bào)錯(cuò)原因
在新版本的npm中征绸，默認(rèn)情況下则剃，npm install遇到?jīng)_突的peerDependencies時(shí)將失敗拢切。
解決辦法
使用--force或--legacy-peer-deps可解決這種情況巾兆。
--force 會(huì)無視沖突猎物，并強(qiáng)制獲取遠(yuǎn)端npm庫資源，當(dāng)有資源沖突時(shí)覆蓋掉原先的版本角塑。
--legacy-peer-deps：安裝時(shí)忽略所有peerDependencies蔫磨，忽視依賴沖突，采用npm版本4到版本6的樣式去安裝依賴圃伶，已有的依賴不會(huì)覆蓋堤如。
建議用--legacy-peer-deps 比較保險(xiǎn)一點(diǎn)
在終端重新安裝即可解決
npm install --legacy-peer-deps
2、package.json文件
"scripts": { "dev": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },
dev：鼠標(biāo)放在上面點(diǎn)擊運(yùn)行腳本窒朋，就會(huì)啟動(dòng)項(xiàng)目
build：鼠標(biāo)放在上面點(diǎn)擊運(yùn)行腳本搀罢，就會(huì)打包
lint：代碼檢測(cè)
"dependencies":
這里面就是依賴的第三方庫
3、第三方類庫的存放位置
在項(xiàng)目中引入的第三方類庫都放在這個(gè)文件夾下面：
4炼邀、iView組件庫這個(gè)要看一下
(1)Vue應(yīng)用IView中魄揉，table中使用Poptip被遮擋顯示不全
添加transfer參數(shù)
參考：https://blog.csdn.net/qq_40743463/article/details/104894357
5、差值表達(dá)式
{{}} 可以在視圖中顯示data中的數(shù)據(jù)
（1）其用的數(shù)據(jù)必須在data中存在
（2）不能使用js語句if for啥的
（3）不能在屬性中使用
6拭宁、vue指令
vue指令其實(shí)就是html標(biāo)簽的特殊屬性洛退，一共有14個(gè)v-開頭的指令
v-這些指令是干啥的，怎么用杰标，用的時(shí)候注意什么
-
v-bind
用于訪問data中的數(shù)據(jù)兵怯，在標(biāo)簽的屬性中使用
v-bind:src 可以簡(jiǎn)寫為 :src
-
v-model
（1）用于表單元素上，<input> <textarea> < select >腔剂，創(chuàng)建數(shù)據(jù)的雙向綁定媒区。
（2）會(huì)忽略掉表單元素原本的value
（3）v-model雙向綁定實(shí)現(xiàn)的原理
用到的技術(shù)是數(shù)據(jù)劫持，ES5中的一個(gè)語法：Object.defineProperty，所以vue不支持IE8以下的版本袜漩。
給對(duì)象的某個(gè)屬性添加修飾：
let temp = 屬性
Object.defineProperty(對(duì)象,屬性名,{修飾對(duì)象
//里面重寫set和get方法
get() {
return temp
},
set(value) {
temp = value
input.value = value
}
})
-
v-on
作用：用來給元素注冊(cè)點(diǎn)擊事件
語法：v-on:事件名="事件函數(shù)"
v-on:click="clickEvent"可以簡(jiǎn)寫為@click="clickEvent"
注意點(diǎn)：
（1）傳參數(shù)
//事件函數(shù)加上()即可绪爸，里面?zhèn)魅雲(yún)?shù)
<button type="button" @click="parameClick(name)">傳參數(shù)</button>
<script>
export default {
data() {
return {
name: '你好'
}
},
methods: {
parameClick(name) {
console.log(name)
}
}
}
</script>
（2）事件修飾符
在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實(shí)現(xiàn)這點(diǎn)宙攻，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯奠货，而不是去處理 DOM 事件細(xì)節(jié)。
為了解決這個(gè)問題座掘，Vue.js 為 v-on 提供了事件修飾符递惋。之前提過，修飾符是由點(diǎn)開頭的指令后綴來表示的溢陪。
.stop
.prevent
.capture
.self
.once
.passive
其中.stop 和 .prevent是最常用的
<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面（即阻止默認(rèn)事件） -->
<form v-on:submit.prevent="onSubmit"></form>
（3）按鍵修飾符
在監(jiān)聽鍵盤事件時(shí)萍虽，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：
<input @keyup.enter="aClick()" />
-
v-show VS v-if
（1）v-show控制元素顯示和隱藏形真，v-show=”bool“杉编，他是通過樣式display屬性來控制的顯示和隱藏
（2）v-if也是控制元素顯示和隱藏，但是v-if是銷毀和創(chuàng)建没酣，用于一次性的顯示隱藏
-
v-for
我們可以用 v-for 指令基于一個(gè)數(shù)組來渲染一個(gè)列表王财。v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數(shù)據(jù)數(shù)組裕便，而 item 則是被迭代的數(shù)組元素的別名。
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
注意點(diǎn)
（1）:key是必須的见咒，提高渲染效率
（2）也可以用 v-for 來遍歷一個(gè)對(duì)象的 property偿衰。
（3）也可以在 <template> 上使用 v-for
（4）也可以在組件上使用 v-for
7、計(jì)算屬性
首先來看例子：
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計(jì)算屬性的 getter
reversedMessage() {
// `this` 指向 vm 實(shí)例
return this.message.split('').reverse().join('')
}
}
})
（1）計(jì)算屬性要寫到computed中
（2）計(jì)算屬性寫法上是一個(gè)函數(shù)改览，但實(shí)質(zhì)上是一個(gè)屬性下翎，其對(duì)應(yīng)的是函數(shù)的返回值
（3）計(jì)算屬性只會(huì)計(jì)算一次，結(jié)果會(huì)緩存起來宝当，高效
（4）計(jì)算屬性只有依賴的數(shù)據(jù)發(fā)生了變化视事，才會(huì)重新計(jì)算
（5）什么時(shí)候使用計(jì)算屬性？需要在插值表達(dá)式或者指令中使用復(fù)雜的邏輯庆揩，都應(yīng)該使用計(jì)算屬性
（6）計(jì)算屬性的setter
計(jì)算屬性默認(rèn)只有g(shù)etter
computed: {
total() {
return this.num1 + this.num2
}
}
但是當(dāng)v-model雙向綁定的是一個(gè)計(jì)算屬性的話俐东，就需要書寫計(jì)算屬性的完整形態(tài)，否則會(huì)報(bào)錯(cuò)订晌，代碼如下：
computed: {
total: {
get() {
return
},
set() {
}
}
}
8虏辫、監(jiān)聽屬性
（1）監(jiān)聽屬性寫在watch中
（2）作用，監(jiān)聽data中數(shù)據(jù)的改變
（3）語法簡(jiǎn)單類型 ：watch:{ msg(newValue, oldValue) {} }
復(fù)雜類型：
//這是一個(gè)對(duì)象
list: {
handler(value) {
localStorage.setItem('todos', JSON.stringify(value))
},
deep: true, //深層次監(jiān)聽
immediate:true //是否立刻監(jiān)聽
}
9锈拨、VUE的生命周期
-
初始化階段
（1）new Vue（）初始化Vue實(shí)例
（2）初始化內(nèi)部的一些事件砌庄、生命周期
（3）初始化vue內(nèi)部的數(shù)據(jù)，把data中的數(shù)據(jù)都劫持給vm，這一步開始vm上就有數(shù)據(jù)
（4）判斷是否有el 1.指定el參數(shù) 2.vm.$mount[#'app']
（5）確定是否有模板 1.如果有templete娄昆，直接templete作為模板 2.如果沒有templete佩微，那么el本身就是模板
（6）結(jié)合數(shù)據(jù)和模板，動(dòng)態(tài)渲染結(jié)構(gòu)萌焰，然后把原來的el替換掉
-
數(shù)據(jù)更新階段
（1）等待數(shù)據(jù)發(fā)生改變
（2）視圖自動(dòng)更新數(shù)據(jù)發(fā)生改變的那部分
-
銷毀階段
（1）等待調(diào)用vm.$destrory()方法
（2）卸載vue內(nèi)部的事件和監(jiān)聽喊衫、vue的數(shù)據(jù)再次發(fā)生改變頁面不再更新
鉤子函數(shù)：
vue生命周期4組8個(gè)常用 創(chuàng)建前后，掛載前后杆怕，更新前后族购，銷毀前后
beforeCreate() {
console.log('beforeCreate', '創(chuàng)建前');
},
created() {
console.log('created', '創(chuàng)建完成');
},
beforeMount() {
console.log('beforeMount', '掛載前');
},
mounted() {
console.log('mounted', '掛載完成');
},
beforeUpdate() {
console.log('beforeUpdate', '更新前');
},
updated() {
console.log('updated', '更新完成');
},
beforeDestroy() {
console.log('beforeDestroy', '銷毀前');
clearInterval(this.interID)
},
destroyed() {
console.log('Destroy', '銷毀完成');
}
常用的鉤子函數(shù)
- created 創(chuàng)建完成 可以獲取this ajax加載 開啟定時(shí)器
- mounted 掛載完成（內(nèi)容以及渲染完畢） 可以獲取dom節(jié)點(diǎn)
- beforeDestroy 銷毀前 清除定時(shí)器 移除監(jiān)聽事件
vue父子組件生命周期執(zhí)行順序
- 加載渲染過程：父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted
- 子組件更新過程：父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated
- 父組件更新過程：父beforeUpdate —> 父updated
- 銷毀過程：父beforeDestroy —> 子beforeDestroy —> 子destroyed —> 父destroyed
10、過濾器
vue提供了過濾器的語法陵珍，常用于格式化我們的文本寝杖，vue3中已經(jīng)移除，可以用計(jì)算屬性代替
11互纯、組件
（1）組件化和模塊化的區(qū)別
- 組件化：是從UI界面的角度進(jìn)行劃分瑟幕，方便UI組件的重用
- 模塊化：是從代碼邏輯的角度進(jìn)行劃分，帶有業(yè)務(wù)留潦，功能模塊的單一化
12只盹、refs
作用：
（1）獲取元素
<div>
<input type="text" value="123" ref="input">
</div>
export default {
data(){
return{
}
},
mounted() {
console.log(this.$refs.input)
}
}
（2）獲取子組件中的data或者method
// 父組件
<template>
<div id="app">
<Son ref="myref"></Son>
</div>
</template>
<script>
import Son from "./components/son";
export default {
mounted() {
console.log(this.$refs.myref.name); //輸出子組件data中的name的值：myhua
this.$refs.myref.logName();//子組件中的方法
},
components: {
Son
}
};
</script>
13、js文件路徑簡(jiǎn)介
- '/'開頭： 代表根目錄
- './'開頭：代表當(dāng)前目錄
- '../'開頭：代表上一級(jí)目錄
- '@/'開頭：此特殊情況兔院，@為自定義的殖卑，一般為模塊目錄開始
14、路由
15坊萝、nrm
nrm是一個(gè)npm源管理工具孵稽，使用它可以快速切換npm源。
- 1十偶、安裝
npm install -g nrm - 2菩鲜、查看源列表（前面帶*的為當(dāng)前源）
nrm ls - 3、添加新的npm源
nrm add 別名 源地址 - 4惦积、切換源
nrm use 源名稱 - 5接校、刪除源
nrm del 源名稱
16、svg圖片的導(dǎo)入使用（vite+ts）
主要觀看這個(gè)視頻
https://www.bilibili.com/video/BV17V4y1s7Hc/?spm_id_from=333.999.0.0
- npm引入svg庫
- 配置vite.config.ts文件
- 寫svg組件
- main.ts全局引用組件
- 在需要的地方直接使用
