Vue - 入門_ZenDei技術網路在線

零：前端目前形勢前端的發展史 HTML(5)、CSS(3)、JavaScript(ES5、ES6)：編寫一個個的頁面 -> 給後端(PHP、Python、Go、Java) -> 後端嵌入模板語法 -> 後端渲染完數據 -> 返回數據給前端 -> 在瀏覽器中查看 Ajax的出現 -> 後臺發送非同步請 ...

零：前端目前形勢

前端的發展史

HTML(5)、CSS(3)、JavaScript(ES5、ES6)：編寫一個個的頁面 -> 給後端(PHP、Python、Go、Java) -> 後端嵌入模板語法 -> 後端渲染完數據 -> 返回數據給前端 -> 在瀏覽器中查看
Ajax的出現 -> 後臺發送非同步請求，Render+Ajax混合
單用Ajax（載入數據，DOM渲染頁面）：前後端分離的雛形
Angular框架的出現（1個JS框架）：出現了“前端工程化”的概念（前端也是1個工程、1個項目）
React、Vue框架：當下最火的2個前端框架（Vue：國人喜歡用，React：外國人喜歡用）
移動開發（Android+IOS） + Web（Web+微信小程式+支付寶小程式） + 桌面開發（Windows桌面）：前端 -> 大前端
一套代碼在各個平臺運行（大前端）：谷歌Flutter（Dart語言：和Java很像）可以運行在IOS、Android、PC端
在Vue框架的基礎性上 uni-app：一套編碼編到10個平臺
在不久的將來，前端框架可能會一統天下

詳細的發展史：
https://zhuanlan.zhihu.com/p/337276087?utm_source=wechat_session&utm_medium=social&utm_oi=41967790587904

一：Vue介紹和基本使用

1.Vue介紹

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架

與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用

Vue 的核心庫只關註視圖層，不僅易於上手，還便於與第三方庫或既有項目整合

漸進式框架

可以一點一點地使用它，只用一部分，也可以整個工程都使用它

網站

官網：https://cn.vuejs.org/
文檔：https://cn.vuejs.org/v2/guide/

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：三目運算符、數組、對象

:style='js變數、字元串、js數組'
style：三目運算符、數組[{backgreound: ‘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')

Vue - 入門

零：前端目前形勢

前端的發展史

一：Vue介紹 和 基本使用

1.Vue介紹

漸進式框架

網站

2.Vue特點

易用

靈活

高效

3.M-V-VM思想

① MVVM介紹

② MVVM的特性

③ MVVM的邏輯

4.組件化開發、單頁面開發

組件化開發

單頁面開發

5.版本

6.引入方式

① CDN的方式引入

② 下載後導入

7.補充

解釋型的語言是需要解釋器的

nodejs：一門後端語言

8.簡單使用

index.html

雙向數據綁定測試

二：模板語法

1.插值語法

語法：{ { 變數、js語法、三目表達式 } }

index.html

三：指令

1.文本指令

v-html：讓HTML渲染成頁面

v-text：標簽內容顯示js變數對應的值

v-show：顯示/隱藏內容

v-if：顯示/刪除內容

2.事件指令

3.屬性指令

四：Style 和 Class

數據的綁定

語法：

下方試驗的命令

一：Vue介紹和基本使用

語法：`{ { 變數、js語法、三目表達式 } }`