Vue - 入門
阿新 • • 發佈：2020-12-18
零：前端目前形勢
前端的發展史
1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：編寫一個個的頁面 -> 給後端(PHP、Python、Go、Java) -> 後端嵌入模板語法 -> 後端渲染完資料 -> 返回資料給前端 -> 在瀏覽器中檢視
2.Ajax的出現 -> 後臺傳送非同步請求，Render+Ajax混合
3.單用Ajax（載入資料，DOM渲染頁面）：前後端分離的雛形
4.Angular框架的出現（1個JS框架）：出現了“前端工程化”的概念（前端也是1個工程、1個專案）
React：外國人喜歡用）
6.移動開發（Android+IOS） + Web（Web+微信小程式+支付寶小程式） + 桌面開發（Windows桌面）：前端 -> 大前端
7.一套程式碼在各個平臺執行（大前端）：谷歌Flutter（Dart語言：和Java很像）可以執行在IOS、Android、PC端
8.在Vue框架的基礎性上 uni-app：一套編碼 編到10個平臺
9.在不久的將來 ，前端框架可能會一統天下
詳細的發展史：
一：Vue介紹 和 基本使用
1.Vue介紹
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架
與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用
Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合
漸進式框架
可以一點一點地使用它，只用一部分，也可以整個工程都使用它
網站
2.Vue特點
易用
- 通過 HTML、CSS、JavaScript構建應用
靈活
- 不斷繁榮的生態系統，可以在一個庫和一套完整框架之間自如伸縮。
高效
- 20kB min+gzip 執行大小
- 超快虛擬 DOM
- 最省心的優化
3.M-V-VM思想
① MVVM介紹
MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式，是一種事件驅動程式設計方式
Model：vue物件的data屬性裡面的資料，這裡的資料要顯示到頁面中View：vue中資料要顯示的HTML頁面，在vue中，也稱之為“檢視模板” （HTML+CSS）ViewModel：vue中編寫程式碼時的vm物件，它是vue.js的核心，負責連線 View 和 Model資料的中轉，保證檢視和資料的一致性，所以前面程式碼中，data裡面的資料被顯示中p標籤中就是vm物件自動完成的（雙向資料繫結：JS中變數變了，HTML中資料也跟著改變）
② MVVM的特性
- 低耦合：
檢視（View）可以獨立於Model變化和修改，1個ViewModel可以繫結到不同的View上，當View變化的時候 Model可以不變，當Model變化的時候 View也可以不變 - 可複用：可以把一些檢視邏輯放在1個ViewModel中，讓很多View
重用這端檢視的邏輯（以此減少程式碼冗餘） - 獨立開發：
開發人員可以專注於業務邏輯和資料的開發（ViewModel），設計人員可以專注於頁面設計 - 可測試：介面元素是比較難以測試的，而現在的測試可以
針對ViewModel來編寫
③ MVVM的邏輯
4.元件化開發、單頁面開發
元件化開發
類似於DTL中的include，每一個元件的內容都可以被替換和複用
單頁面開發
只需要1個頁面，結合元件化開發來替換頁面中的內容
頁面的切換隻是元件的替換，頁面還是隻有1個index.html
5.版本
1.X：使用得較少
2.X：普遍使用
3.X：剛出沒多久，只有Beta版
6.引入方式
① CDN的方式引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
② 下載後匯入
其實就是直接在瀏覽器中開啟https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然後複製下來，建立一個js檔案再貼上進去
<script src="js/vue.js"></script>
7.補充
解釋型的語言是需要直譯器的
js就是一門解釋型語言，只不過js直譯器被整合到了瀏覽器中
所以，在瀏覽器的Console中輸入命令，就和在cmd中輸入python後，進入互動式環境一樣
nodejs：一門後端語言
把chrome的v8引擎（直譯器），安裝到作業系統之上
8.簡單使用
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的簡單使用</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
{{name}}
</div>
</body>
<script>
let vm = new Vue({
el: '#box', // 在box這個div中可以寫 vue的語法
data: {
name: 'Hello World'
}
})
</script>
</html>
雙向資料繫結測試
vm._data.name='darker' // 修改js中變數的值
$('#box').text('hahah') // 修改HTML的div中的值
二：模板語法
1.插值語法
語法：{{ 變數、js語法、三目表示式 }}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插值</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li>字串：{{name}}</li>
<li>數值：{{age}}</li>
<li>陣列：{{list1}}</li>
<li>物件：{{obj1}}</li>
<li>字串：{{link1}}</li>
<li>運算：{{10+20+30+40}}</li>
<li>三目運算子：{{10>20?'是':'否'}}</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: '#box', // 在box這個div中可以寫 vue的語法
data: {
name: 'Darker', // 字串
age: 18, // 數值
list1: [1,2,3,4], // 陣列
obj1: {name: 'Darker', age: 19}, // 物件
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
}
})
</script>
</html>
三：指令
1.文字指令
| 指令 | 釋義 |
|---|---|
| v-html | 讓HTML渲染成頁面 |
| v-text | 標籤內容顯示js變數對應的值 |
| v-show | 放1個布林值：為真 標籤就顯示；為假 標籤就不顯示 |
| v-if | 放1個布林值：為真 標籤就顯示；為假 標籤就不顯示 |
v-show與v-if的區別：
- v-show：標籤還在，只是不顯示了（
display: none）- v-if：直接操作DOM，刪除/插入 標籤
v-html：讓HTML渲染成頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-html="link1"></li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: '#box', // 在box這個div中可以寫 vue的語法
data: {
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
}
})
</script>
</html>
v-text：標籤內容顯示js變數對應的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-text="link1"></li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: '#box', // 在box這個div中可以寫 vue的語法
data: {
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
}
})
</script>
</html>
v-show：顯示/隱藏內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<h3>案例：控制元件通過按鈕來控制顯示和小事</h3>
<button @click="handleClick()">點我</button>
<br>
<div v-show="isShow">isShow</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
isShow: true,
},
methods: {
handleClick(){
this.isShow = !this.isShow // this指的是當前的vue物件
},
}
})
</script>
</html>
v-if：顯示/刪除內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<h3>案例：控制元件通過按鈕來控制顯示和消失</h3>
<button @click="handleClick()">點我</button>
<br>
<div v-if="isCreated">isCreated</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
isCreated:true
},
methods: {
handleClick(){
this.isCreated = !this.isCreated // this指的是當前的vue物件
},
}
})
</script>
</html>
2.事件指令
| 指令 | 釋義 |
|---|---|
| v-on | 觸發事件（不推薦） |
| @ | 觸發事件（推薦） |
| @[event] | 觸發event事件（可以是其他任意事件） |
v-on:click 可以縮寫成@click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件指令</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<button v-on:click="handleClick1">點我1</button>
<!-- 下面這個用的多 -->
<button @click="handleClick2">點我2</button>
<!-- 如果不傳引數，是沒有區別的 -->
<button @click="handleClick3()">點我3-1(帶括號)</button>
<!-- 如果要傳引數 -->
<button @click="handleClick3(1,22,333)">點我3-2(帶括號+引數)</button>
<!-- 傳入事件 -->
<button @click="handleClick4($event)">點我4(帶事件引數)</button>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
},
methods: {
handleClick1() {
console.log('點我1')
},
handleClick2() {
console.log('點我2')
},
handleClick3(a,b,c) {
console.log(a,b,c)
},
handleClick4(event) {
console.log(event)
},
}
})
</script>
</html>
3.屬性指令
| 指令 | 釋義 |
|---|---|
| v-bind | 直接寫js的變數或語法（不推薦） |
| : | 直接寫js的變數或語法（推薦） |
v-bind:class='js變數'可以縮寫成：:class='js變數'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性指令</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<style>
.red {
color: rgba(255, 104, 104, 0.7);
}
.purple {
color: rgba(104, 104, 255, 0.7);
}
</style>
</head>
<body>
<div id="box">
<img v-bind:src="url" alt="" height="100">
<br>
<button @click="handleClick">點我變色</button>
<div :class="isActive?'red':'purple'">
<h1>我是一個div</h1>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=205441424,1768829584&fm=26&gp=0.jpg',
change: 'red',
isActive: true
},
methods: {
handleClick() {
this.isActive = !this.isActive
},
}
})
</script>
</html>
四：Style 和 Class
資料的繫結
語法：:屬性名='js變數/js語法'
:class='js變數、字串、js陣列'
class：三目運算子、陣列、物件{red: true}
:style='js變數、字串、js陣列'
style：三目運算子、陣列[{backgreound: 'red'},]、物件{background: 'red'}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Style 和 Class</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<style>
.red {
color: rgba(255, 104, 104, 0.7);
}
.font-20 {
font-size: 20px;
}
.be-bold {
font-weight: bold;
}
</style>
</head>
<body>
<div id="box">
<p>我是一個普通的p標籤</p>
<div :class="class_obj">
<p>我是一個不普通的p標籤1</p>
</div>
<button @click="handleClick">點選放大字型</button>
<div :style="style_obj">
<p>我是一個不普通的p標籤2</p>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
// class_obj: 'red', // 放1個是字串
class_obj: ['red', 'font-20', 'be-bold'], // 放2個是陣列
// class_obj: { red:true, be-bold:false}, // 也可以放物件
// 陣列.push() 從尾部新增1個元素
// 陣列.pop() 刪除最後1個元素 並返回
// 物件的寫法
style_obj: {
color: 'red',
fontSize: '20px'
}
// style_obj: [{background:'red'}, {fontSize:'20px'}]
},
methods: {
handleClick(){
this.style_obj['fontSize']='30px'
}
}
})
</script>
</html>
下方試驗的命令
vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.push('be-bold')
vm.class_obj.push('red')
vm.class_obj.push('font-20')