2021 CCPC網路賽重賽
阿新 • • 發佈：2021-10-13
本文基於B站尚矽谷的Vue學習教程，推薦大家去觀看。
一. Vue簡介
Vue是一套用於構建使用者介面的漸進式js框架，它的學習可以分為以下6個部分。
- Vue基礎
- vue-cli
- vue-router
- vuex
- element-ui
- vue3
Vue有三個主要的特點：
-
採用元件化模式，提高程式碼複用率、且讓程式碼更好維護。
-
宣告式編碼，讓編碼人員無需直接操作DOM，提高開發效率。
-
使用虛擬DOM+優秀的Diff演算法，儘量複用DOM節點。
這裡推薦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的兩種寫法
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例項物件
視訊裡的圖示特別清晰明瞭