Vue基礎知識學習1
阿新 • • 發佈：2021-10-17
本文基於B站尚矽谷的Vue學習教程，推薦大家去觀看。
一. Vue簡介
Vue是一套用於構建使用者介面的漸進式js框架，它的學習可以分為以下6個部分。
- Vue基礎
- vue-cli
- vue-router
- vuex
- element-ui
- vue3
Vue有三個主要的特點：
-
採用元件化模式，提高程式碼複用率、且讓程式碼更好維護。
-
宣告式編碼，讓編碼人員無需直接操作DOM，提高開發效率。
-
使用虛擬DOM+優秀的Diff演算法，儘量複用DOM節點。
理解元件化的含義，元件字尾為.vue，包括html，css，和js程式碼
這裡推薦vue的官網，裡面有文件和很多學習資源。
學習Vue之前要掌握的JavaScript基礎知識包括ES6語法規範，ES6模組化，包管理器，原型、原型鏈，陣列常用方法，axios，promise等等。
二. 搭建Vue開發環境
簡單配置：
- 官網下載開發版本vue.js
- 瀏覽器安裝vue devtools（一般瀏覽器外掛庫裡可以搜到）
- 在html檔案對vue.js進行引用即可完成一些簡單的實驗。
三. vue的知識點
1. vue的入門常識
示例程式碼
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>vue模板語法</title> <script type="text/javascript" src="vue.js"></script> </head> <body> <!-- 初識Vue: 1.想讓Vue工作，就必須建立一個Vue例項，且要傳入一個配置物件; 2.root容器裡的程式碼依然符合html規範，只不過混入了一些特殊的Vue語法; 3.root容器裡的程式碼被稱為Vue模板; 4.Vue例項和容器是一一對應的; 5.真實開發中只有一個Vue例項， 並且會配合著元件一起使用; 6.{{xxx}}中的xxx要寫js表示式，且xx可以自動讀取到data中的所有屬性; 7.且data中的資料發生改變，那麼模板中用到該資料的地方也會自動更新; --> <!-- 建立一個容器 為Vue提供模板，展示Vue的工作成果 --> <div id="root"> <h2>hello {{name}} {{school.address}}</h2> <!-- {{}}是分隔符（插值語法） 裡面需要是js表示式--> </div> <script type="text/javascript"> //修改全域性配置 Vue.config.productionTip=false;//阻止Vue在啟動時生成生產提示 //建立Vue例項 // const x= Vue實際上是一個建構函式 new Vue({ el:'#root', //el用於指定當前Vue例項為哪個容器服務，值通常為css選擇器字串 data:{ //data中用於儲存資料，資料供el所指定的容器去使用，值我們暫時先寫成一個物件 name:'hhh', school:{ name:'法拉希', address: '北京西路', } } });//只傳一個引數——配置物件 //容器和例項是一一對應的關係 </script> </body> </html>
2. 兩大類模板語法
示例程式碼
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>vue模板語法</title> <script type="text/javascript" src="vue.js"></script> </head> <body> <!-- Vue模板語法有2大類: 1.插值語法: 功能:用於解析標籤體內容。 寫法: {{xxx}}, xxx是js表示式，且可以直接讀收到data中的所有屬性。 2.指令語法: 功能:用於解析標籤(包括:標籤屬性、標籤體內容、繫結事件.....)。 舉例: v-bind:href="xxx" 或簡寫為 :href="xxx", xxx同樣要寫js表示式， 且可以直接讀取到data中的所有屬性。 備註: Vue中有很多的指令，且形式都是: v-????，此處我們只是拿v-bind舉個例子。 --> <div id="root"> <h1>插值語法</h1> <h2>hello {{name}} {{school.address}}</h2> <!-- {{}}是分隔符（插值語法） 裡面需要是js表示式--> <h1>指令語法</h1> <a v-bind:href="url">百度</a> <!--動態繫結 url就變成了js表示式--> <a :href="url.toUpperCase()">百度</a> </div> <script type="text/javascript"> //修改全域性配置 Vue.config.productionTip=false; //建立Vue例項 // const x= Vue實際上是一個建構函式 new Vue({ el:'#root', //el用於指定當前Vue例項為哪個容器服務，值通常為css選擇器字串 data:{ //data中用於儲存資料，資料供el所指定的容器去使用，值我們暫時先寫成一個物件 name:'hhh', url:'http://www.baidu.com', school:{ name:'法拉希', address: '北京西路', } } }); </script> </body> </html>
3. 資料繫結
示例程式碼
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue2資料繫結</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!--
Vue中有2種資料繫結的方式:
1.單向繫結(v-bind):資料只能從data流向頁面。
2.雙向繫結(v-model):資料不僅能從data流向頁面，還可以從頁面流向data。
備註:
1.雙向繫結都應用在表單類元素上(如: input、 select等)
2.v-model:value可以簡寫為v-model,因為v-model 預設收集的就是value值。
-->
<div id="root">
單向資料繫結：<input type="text" v-bind:value="name"><br/>
雙向資料繫結：<input type="text" v-model:value="address">
<!-- 簡寫-->
單向資料繫結：<input type="text" :value="name"><br/>
雙向資料繫結：<input type="text" v-model="address">
<!-- v-model只能應運用在表單類元素上（輸入類元素），對value進行修改-->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
new Vue({
el:'#root',
data:{
name:'hhh',
address:'French',
}
})
</script>
</html>
4. el和data的兩種寫法
示例程式碼
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue2資料繫結</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="root">
單向資料繫結：<input type="text" v-bind:value="name"><br/>
雙向資料繫結：<input type="text" v-model:value="name">
</div>
</body>
<!--
data與e1的2種寫法
1.e1有2種寫法
(1).new Vue時候配置el屬性。
(2).先建立Vue例項，隨後再通過vm.$mount('#root')指定e1的值。
2. data有2種寫法
(1).物件式
(2).函式式
如何選擇:目前哪種寫法都可以，以後學習到元件時，data必須使用函式式，否則會報錯
3.一個重要的原則:
由Vue管理的函式如data()，一定不要寫箭頭函式，一旦寫了箭頭函式，this就不再是Vue例項了。
-->
<script type="text/javascript">
Vue.config.productionTip=false;
// el的兩種寫法
const v=new Vue({
// el:'#root', //第一種方法
data:{
name:'併發地',
}
})
//延時器 例項與容器相配的第二種方法 稱為掛載，會更加靈活一些
setTimeout(()=>{
v.$mount('#root'); //成功了，兩秒之後動態
},2000);
//data的兩種寫法
new Vue({
el:'#root',
// 第一種方法 物件式
/*data:{
name:'併發地',
}*/
//第二種方法 函式式 寫成data()也可以
data:function (){
console.log('$$',this);
return{
name:'啦啦啦'
}
}
})
</script>
</html>
5. MVVM模型
-
Model：對應data中的資料
-
View：模板，也就是使用者介面
-
ViewModel：檢視模型，也就是Vue例項物件，模型通過它可以將資料繫結到頁面上，檢視可以通過它將資料對映到模型上。
MVVM的優點？
- 低耦合。檢視（View）可以獨立於Model變化和修改。
- 可重用性。你可以把一些檢視邏輯放在一個ViewModel裡面，讓很多view重用這段檢視邏輯。
- 前後端分離。開發人員可以專注於業務邏輯（ViewModel）和資料的開發，設計人員可以專注於頁面設計。
視訊裡的圖示特別清晰明瞭
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MVVM模型</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!-- vm（Vue例項物件）和Vue原型物件上所有的屬性和方法在模板中都能被識別到-->
<div id="root">
<h1>{{name}}</h1>
<h1>{{address}}</h1>
<h1>測試1{{1+1}}</h1>
<h1>測試2{{$options}}</h1>
<h1>測試3{{$emit}}</h1>
<h1>測試4{{_c}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm=new Vue({
el:'#root',
data:{
name:'rered',
address: 'beijing',
a:1
}
})
</script>
</html>
6. Object.defineProperty
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Object.defindProperty</title>
</head>
<body>
<script>
let number=18;
let person={
name:'張三',
sex:'男',
}
//給相應物件新增相對屬性
Object.defineProperty(person,'age',{
value:18,
enumerable:true,//控制屬性是否可列舉
writable:true,//控制屬性是否可被修改，預設為false
configurable:true,//控制屬性是否可被刪除
//當讀取person的age屬性時，get函式(getter)就會被呼叫，且返回值就是age的值
get:function (){
return number;
},
//當修改person的age屬性時，setter就會被呼叫，且會收到修改的具體值
set(value){
console.log();
number=value;
}
//雙向繫結的原理，面試常問，類似於java中的類的修改器和訪問器
});
console.log(Object.keys(person));
console.log(person);
</script>
</body>
</html>
7. 資料代理
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>什麼是資料代理</title>
</head>
<body>
<!--
資料代理：通過一個物件代理對另一個物件中屬性的操作（讀寫）
比如這裡，obj2可以對obj中的屬性進行操作，即代理
-->
<script type="text/javascript">
let obj={x:100};
let obj2={y:200};
Object.defineProperty(obj2,'x',{
get(){
return obj.x;
},
set(value){
obj.x=value;
}
})
</script>
</body>
</html>
Vue中的資料代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的資料代理</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!--
1.Vue中的資料代理:
通過vm物件來代理data物件中屬性的操作(讀/寫)
2.Vue中資料代理的好處:
更加方便的操作data中的資料
3.基本原理:
通過0bject.defineProperty()把data物件中所有屬性新增到vm上。
為每個新增到vm上的屬性，都指定個getter/setter。
在getter/setter內部去操作(讀/寫) data中對應的屬性。
-->
<div id="root">
<h1>{{name}}</h1>
<h1>{{address}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm=new Vue({
el:'#root',
data:{
name:'rered',
address: 'beijing',
a:1,
}
})
</script>
</html>
如圖，本來應該寫成{{_data.name}}的形式，但由於有資料代理，於是上面的程式碼中可以直接寫成{{name}}去獲取屬性值，可以看到底下有data中各個屬性的get和set。
8. Vue中的事件
（1）事件處理
示例程式碼
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件處理</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!--
事件的基本使用:
1.使用v-on:xXx或@xx繫結事件，其中xxx是事件名:
2.事件的回撥需要配置在methods物件中，最終會在vm上;
3. methods中配置的函式，不要用箭頭函式!否則this就不是vm了，就變成windows了;
4. methods中配置的函式，都是被Vue所管理的函式，this的指向是vm或元件例項物件;
5. @click=" demo"和@click= "demo($event)"效果一致， 但後者可以傳參;
所有被Vue管理的函式儘量寫成普通函式，而不是箭頭函式。
vm只會為data中的資料做代理，所以回撥函式不要寫到data中，那樣會給vue造成負擔。
-->
<div id="root">
<h1>啦啦啦你好！{{name}}</h1>
<button v-on:click="showInfo1">提示資訊1（不傳參）</button>
<button @click="showInfo2(66,$event)">提示資訊2（傳參）</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm=new Vue({
el:'#root',
data:{
name:'rered',
address: 'beijing',
a:1
},
//可以配置很多事件的回撥
methods:{
//傳了個事件物件
showInfo1(event){
alert('tonxuenihao1');
console.log(event.target.innerText);
console.log(this);//就是Vue例項物件vm
},
showInfo2(number,event){
alert('tonxuenihao2');
// console.log(event.target.innerText);
// console.log(this);//就是Vue例項物件vm
console.log(number,event);
}
}
})
</script>
</html>
（2）事件修飾符
示例程式碼
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件修飾符</title>
<script type="text/javascript" src="vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: skyblue;
}
.box1{
padding: 5px;
background-color: skyblue;
}
.box2{
padding: 5px;
background-color: orange;
}
.list{
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li{
height: 100px;
}
</style>
</head>
<body>
<!--
捕獲由外到內，冒泡由內到外，在冒泡階段處理事件
Vue中的事件修飾符:
1.prevent:阻止預設事件(常用) ;
2.stop:阻止事件冒泡(常用) ;
3.once: 事件只觸發一次(常用) ;
4.capture:使用事件的捕獲模式;
5.self:只有event.target是當前操作的元素時才觸發事件;
6.passive:事件的預設行為立即執行，無需等待事件回撥執行完畢;
主要記住前三個，後三個作為拓展
修飾符可以連續寫，比如@click.prevent.stop
-->
<div id="root">
<h1>啦啦啦你好！{{name}}</h1>
<!-- //使用prevent就阻止了預設事件-->
<a href="http://www.baidu.com" @click.prevent="showInfo">點我提示資訊</a>
<!-- 阻止事件冒泡(常用) stop-->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">點我冒泡</button>
</div>
<!-- once: 事件只觸發一次(常用)-->
<button @click.once="showInfo">點我冒泡</button>
<!-- 使用事件的捕獲模式-->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是當前操作的元素時才觸發事件-->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">點我呀呀呀</button>
</div>
<!-- 事件的預設行為立即執行，無需等待事件回撥執行完畢-->
<!-- 滾動有兩個單詞 scroll(滾動條） and wheel(滾輪）-->
<ul class="list" @wheel="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm=new Vue({
el:'#root',
data:{
name:'rered',
address: 'beijing',
a:1
},
methods:{
showInfo(e){
// alert("同學你好！");
console.log(e.target);
},
showMsg(msg){
console.log(msg);
},
demo(){
console.log('@');
}
}
})
</script>
</html>
（3）鍵盤事件
示例程式碼
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>鍵盤事件</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!-- 記住常用的按鍵
1.Vue中常用的按鍵別名:
回車=> enter
刪除
=> delete (捕獲“刪除”和“退格”鍵)
退出=> esc
空格=> space
換行
=> tab 適合keydown
上=>up
下=>down
左=> left
右=> right
2.Vue未提供別名的按鍵，可以使用按鍵原始的key值去繫結，但注意要轉為kebab-case(短橫線命名)
3.系統修飾鍵(用法特殊) : ctrl、alt、 shift、 meta
(1).配合keyup使用:按下修飾鍵的同時，再按下其他鍵，隨後釋放其他鍵，事件才被觸發。
(2) .配合keydown使用:正常觸發事件。
4.也可以使用keyCode去指定具體的按鍵(不推薦)
5. Vue. config. keyCodes.自定義鍵名=鍵碼，可以去定製按鍵別名
-->
<div id="root">
<h1>啦啦啦你好！{{name}}</h1>
<input type="text" placeholder="回車提示輸入" @keyup="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
Vue.config.keyCodes.huiche=13;//相當於定義了回車的別名
const vm=new Vue({
el:'#root',
data:{
name:'rered',
address: 'beijing',
a:1
},
methods:{
showInfo(e){
console.log(e.key,e.keyCode);
//可以加個判斷是否是回車按鍵再進行輸出，或者在前面@keyup.enter
if(e.keyCode!==13)
return ;
console.log(e.target.value);
},
}
})
</script>
</html>