1. Vue概述

Vue官網(wǎng)

英文官網(wǎng): https://vuejs.org/

中文官網(wǎng): https://cn.vuejs.org/

MVVM架構(gòu)模式

MVVM簡介

MVVM 由 M：Model 模型，V：View 視圖 ，VM：ViewModel 視圖模型（Vue實例對象） 三部分構(gòu)成，Model 層代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View 代表UI 組件，它負責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來，ViewModel 是一個同步View 和 Model的對象。

在MVVM架構(gòu)下，View 和 Model 之間并沒有直接的聯(lián)系，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數(shù)據(jù)的變化會同步到Model中，而Model 數(shù)據(jù)的變化也會立即反應(yīng)到View 上。

ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護完全由 MVVM 來統(tǒng)一管理。

MVVM模式圖

• Vue的設(shè)計受到MVVM模型的啟發(fā)
• data中所有的屬性，最后都出現(xiàn)在了vm身上。
• vm身上所有的屬性 及 Vue原型上所有屬性，在Vue模板中都可以直接使用。

Vue簡介

• 是一個JavaScript MVVM庫，是一套動態(tài)構(gòu)建用戶界面的漸進式框架
• Vue用于構(gòu)建用戶界面的漸進式框架，漸進式代表的含義是：主張最少。每個框架都不可避免會有自己的一些特點，從而會對使用者有一定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業(yè)務(wù)開發(fā)中的使用方式。
• 漸進式：Vue可以自底向上逐層地應(yīng)用。簡單應(yīng)用只需一個輕量小巧的核心庫，復(fù)雜應(yīng)用可以引入各式各樣的Vue插件

Vue特點

• 遵循MVVM模式
• 雙向數(shù)據(jù)綁定：vue.js會自動響應(yīng)數(shù)據(jù)的變化情況，并且根據(jù)用戶在代碼中預(yù)先寫好的綁定關(guān)系，對所有綁定在一起的數(shù)據(jù)和視圖內(nèi)容都進行修改
• 組件化：Vue.js通過組件，把一個單頁應(yīng)用中的各種模塊拆分到一個一個單獨的組件（component）中，我們只要先在父級應(yīng)用中寫好各種組件標簽（占坑），并且在組件標簽中寫好要傳入組件的參數(shù)（就像給函數(shù)傳入?yún)?shù)一樣，這個參數(shù)叫做組件的屬性），然后再分別寫好各種組件的實現(xiàn)（填坑），然后整個應(yīng)用就算做完了。采用組件化模式，提高代碼復(fù)用率、且讓代碼更好維護。
• 視圖、數(shù)據(jù)和結(jié)構(gòu)的分離，聲明式編碼：使數(shù)據(jù)的更改更為簡單,不需要進行邏輯代碼的修改,無需直接操作DOM，只需要操作數(shù)據(jù)就能完成相關(guān)操作，提高開發(fā)效率。
• 虛擬DOM 和 diff算法：可以預(yù)先通過JavaScript進行各種計算，把最終的DOM操作計算出來并優(yōu)化，由于這個DOM操作屬于預(yù)處理操作，并沒有真實的操作DOM，所以叫做虛擬DOM。最后在計算完畢才真正將DOM操作提交，將DOM操作變化反映到DOM樹上。

2. 初識Vue

• 想讓Vue正常工作，就必須創(chuàng)建一個Vue實例，且要傳入一個配置對象；
• root容器里的代碼依然符合html規(guī)范，只不過加入了一些特殊的Vue語法；
• root容器里的代碼被稱為 Vue模板 ；
• Vue 實例和容器 是 一一對應(yīng)的；
• 真實開發(fā)中只有一個Vue實例，并且會配合著組件一起使用；
• {{xxx}}中的xxx要寫js表達式，且xxx可以自動讀取到data中的所有屬性；

  注意區(qū)分js表達式和js代碼（語句）
  1、表達式：一個表達式會產(chǎn)生一個值，可以放在任何一個需要值的地方
  	(1). a
  	(2). a+b
  	(3). demo(1)    //函數(shù)調(diào)用表達式
  	(4). x === y ? 'a' : 'b'      //三元表達式
  2、js代碼（語句）
  	(1). if(){}
  	(2). for(){}

• 一旦data中的數(shù)據(jù)發(fā)生改變，那么頁面中用到該數(shù)據(jù)的地方也會自動更新；

<!-- 準備好一個容器 -->
<div id="demo">
	<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>
<script type="text/javascript" >
	Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
//創(chuàng)建Vue實例
	new Vue({
		el:'#demo', //el用于指定當前Vue實例為哪個容器服務(wù)，值通常為css選擇器字符串。
		data:{ //data中用于存儲數(shù)據(jù)，數(shù)據(jù)供el所指定的容器去使用，值我們暫時先寫成一個對象。
		name:'bilibili',
		address:'上海'
		}
	})
</script>

3. 模板語法

Vue模板語法有2大類：

1、插值語法：

• 功能：用于解析標簽體內(nèi)容（起始標簽和結(jié)束標簽中間均為標簽體）。
• 寫法：{{xxx}}，xxx是js表達式，且可以直接讀取到data中的所有屬性。

2、指令語法：

• 功能：用于解析標簽（包括：標簽屬性、標簽體內(nèi)容、綁定事件…）。
• 舉例：v-bind:href="xxx" 或 簡寫為 :href="xxx"，xxx同樣要寫js表達式，且可以直接讀取到data中的所有屬性。
• 備注：Vue中有很多的指令，且形式都是：v-xxx，此處以v-bind舉例

<!-- 準備好一個容器-->
<div id="root">
	<h1>插值語法</h1>
	<h3>你好，{{name}}</h3>
	<hr/>
	<h1>指令語法</h1>
	<a v-bind:href="address.url.toUpperCase()" x="hello">點我去{{address.name}}1</a>
	<a :href="address.url" x="hello">點我去{{address.name}}2</a>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
	new Vue({
		el:'#root',
		data:{
			name:'月見',
			// 可以設(shè)置成多級結(jié)構(gòu)
			address:{
				name:'百度',
				url:'http://www.baidu.com',
			}
		}
	})
</script>

4. 數(shù)據(jù)綁定

Vue中有2種數(shù)據(jù)綁定的方式：

1.單向綁定(v-bind)：數(shù)據(jù)只能從data流向頁面。

2.雙向綁定(v-model)：數(shù)據(jù)不僅能從data流向頁面，還可以從頁面流向data。

備注：

• 雙向綁定一般都應(yīng)用在表單類元素上（如：input、select等）
• v-model:value 可以簡寫為 v-model，因為v-model默認收集的就是value值（只有表單類元素才存在value）。

<div id="root">
	<!-- 普通寫法 -->
	單向數(shù)據(jù)綁定：<input type="text" v-bind:value="name"><br/>
	雙向數(shù)據(jù)綁定：<input type="text" v-model:value="name"><br/>
	<!-- 簡寫 -->
	單向數(shù)據(jù)綁定：<input type="text" :value="name"><br/>
	雙向數(shù)據(jù)綁定：<input type="text" v-model="name"><br/>
	<!-- 下面代碼是錯誤的，因為v-model只能應(yīng)用在表單類元素（輸入類元素）上 -->
	<h2 v-model:x="name">你好啊</h2> 
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
	new Vue({
		el:'#root',
		data:{
			name:'bilibili'
		}
	})
</script>

5. el與data的兩種寫法

1、el有2種寫法new

• Vue時候配置el屬性。
• 先創(chuàng)建Vue實例，隨后再通過vm.$mount('#root')指定el的值。

2、data有2種寫法

• 對象式
• 函數(shù)式
• 如何選擇：兩種寫法都可以，但使用到組件時，data必須使用函數(shù)式，否則會報錯。

3、一個重要的原則：

由Vue管理的函數(shù)，一定不要寫箭頭函數(shù)，一旦寫了箭頭函數(shù)，this就不再是Vue實例了，而是window。

<div id="root">
	<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
	//el的兩種寫法 -----------
	const v = new Vue({
		//el:'#root', //第一種寫法
		data:{
			name:'bilibili'
		}
	})
	console.log(v)
	v.$mount('#root') //第二種寫法 
	// 例：
	setTimeout(() => {
		v.$mount('#root')
	},1000);       //定時器：頁面過1秒后再顯示vue效果
// ---------------------
	//data的兩種寫法
	new Vue({
		el:'#root',
		//data的第一種寫法：對象式
		/* data:{
			name:'bilibili'
		} */
		//data的第二種寫法：函數(shù)式 
		// 把data寫成一個函數(shù)，且這個函數(shù)必須要返回一個對象，函數(shù)式寫法一般用于組件和框架
		// 注意：此函數(shù)不是自己調(diào)用，是Vue調(diào)用的
		data(){
			// console.log('@@@',this) //此處的this是Vue實例對象（data為普通函數(shù)時，否則this指window）
			return{
				name:'bilibili'
			}
		}
	})
</script>

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

最新評論