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

Posted on by

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的更多內容!

推薦閱讀：