Vue基礎之MVVM,模板語法和數據綁定

1. Vue概述

Vue官網

英文官網: https://vuejs.org/

中文官網: https://cn.vuejs.org/

MVVM架構模式

MVVM簡介

MVVM 由 M:Model 模型,V:View 視圖 ,VM:ViewModel 視圖模型(Vue實例對象) 三部分構成,Model 層代表數據模型,也可以在Model中定義數據修改和操作的業務邏輯;View 代表UI 組件,它負責將數據模型轉化成UI 展現出來,ViewModel 是一個同步View 和 Model的對象。

在MVVM架構下,View 和 Model 之間並沒有直接的聯系,而是通過ViewModel進行交互,Model 和 ViewModel 之間的交互是雙向的, 因此View 數據的變化會同步到Model中,而Model 數據的變化也會立即反應到View 上。

ViewModel 通過雙向數據綁定把 View 層和 Model 層連接瞭起來,而View 和 Model 之間的同步工作完全是自動的,無需人為幹涉,因此開發者隻需關註業務邏輯,不需要手動操作DOM, 不需要關註數據狀態的同步問題,復雜的數據狀態維護完全由 MVVM 來統一管理。

MVVM模式圖

  • Vue的設計受到MVVM模型的啟發
  • data中所有的屬性,最後都出現在瞭vm身上。
  • vm身上所有的屬性 及 Vue原型上所有屬性,在Vue模板中都可以直接使用。

Vue簡介

  • 是一個JavaScript MVVM庫,是一套動態構建用戶界面的漸進式框架
  • Vue用於構建用戶界面的漸進式框架,漸進式代表的含義是:主張最少。每個框架都不可避免會有自己的一些特點,從而會對使用者有一定的要求,這些要求就是主張,主張有強有弱,它的強勢程度會影響在業務開發中的使用方式。
  • 漸進式:Vue可以自底向上逐層地應用。簡單應用隻需一個輕量小巧的核心庫,復雜應用可以引入各式各樣的Vue插件

Vue特點

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

2. 初識Vue

  • 想讓Vue正常工作,就必須創建一個Vue實例,且要傳入一個配置對象;
  • root容器裡的代碼依然符合html規范,隻不過加入瞭一些特殊的Vue語法;
  • root容器裡的代碼被稱為 Vue模板 ;
  • Vue 實例和容器 是 一一對應的;
  • 真實開發中隻有一個Vue實例,並且會配合著組件一起使用;
  • {{xxx}}中的xxx要寫js表達式,且xxx可以自動讀取到data中的所有屬性;
  註意區分js表達式和js代碼(語句)
  1、表達式:一個表達式會產生一個值,可以放在任何一個需要值的地方
  	(1). a
  	(2). a+b
  	(3). demo(1)    //函數調用表達式
  	(4). x === y ? 'a' : 'b'      //三元表達式
  2、js代碼(語句)
  	(1). if(){}
  	(2). for(){}
  • 一旦data中的數據發生改變,那麼頁面中用到該數據的地方也會自動更新;
<!-- 準備好一個容器 -->
<div id="demo">
	<h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
</div>
<script type="text/javascript" >
	Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
//創建Vue實例
	new Vue({
		el:'#demo', //el用於指定當前Vue實例為哪個容器服務,值通常為css選擇器字符串。
		data:{ //data中用於存儲數據,數據供el所指定的容器去使用,值我們暫時先寫成一個對象。
		name:'bilibili',
		address:'上海'
		}
	})
</script>

3. 模板語法

Vue模板語法有2大類:

1、插值語法:

  • 功能:用於解析標簽體內容(起始標簽和結束標簽中間均為標簽體)。
  • 寫法:{{xxx}},xxx是js表達式,且可以直接讀取到data中的所有屬性。

2、指令語法:

  • 功能:用於解析標簽(包括:標簽屬性、標簽體內容、綁定事件…)。
  • 舉例: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 在啟動時生成生產提示。
	new Vue({
		el:'#root',
		data:{
			name:'月見',
			// 可以設置成多級結構
			address:{
				name:'百度',
				url:'http://www.baidu.com',
			}
		}
	})
</script>

4. 數據綁定

Vue中有2種數據綁定的方式:

1.單向綁定(v-bind)數據隻能從data流向頁面。

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

備註:

  • 雙向綁定一般都應用在表單類元素上(如:input、select等)
  • v-model:value 可以簡寫為 v-model,因為v-model默認收集的就是value值(隻有表單類元素才存在value)。
<div id="root">
	<!-- 普通寫法 -->
	單向數據綁定:<input type="text" v-bind:value="name"><br/>
	雙向數據綁定:<input type="text" v-model:value="name"><br/>
	<!-- 簡寫 -->
	單向數據綁定:<input type="text" :value="name"><br/>
	雙向數據綁定:<input type="text" v-model="name"><br/>
	<!-- 下面代碼是錯誤的,因為v-model隻能應用在表單類元素(輸入類元素)上 -->
	<h2 v-model:x="name">你好啊</h2> 
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
	new Vue({
		el:'#root',
		data:{
			name:'bilibili'
		}
	})
</script>

5. el與data的兩種寫法

1、el有2種寫法new

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

2、data有2種寫法

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

3、一個重要的原則:

由Vue管理的函數,一定不要寫箭頭函數,一旦寫瞭箭頭函數,this就不再是Vue實例瞭,而是window。

<div id="root">
	<h1>你好,{{name}}</h1>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
	//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的第二種寫法:函數式 
		// 把data寫成一個函數,且這個函數必須要返回一個對象,函數式寫法一般用於組件和框架
		// 註意:此函數不是自己調用,是Vue調用的
		data(){
			// console.log('@@@',this) //此處的this是Vue實例對象(data為普通函數時,否則this指window)
			return{
				name:'bilibili'
			}
		}
	})
</script>

總結

本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀: