Vue基礎整理1

MVC、MVVM關係圖解

1. mvc（後端思想）

2. mvvm（前端思想）

簡單指令

1.v-cloak

<div v-cloak>{{ msg }}</div>
解決插值表示式的閃爍問題(頁面重新整理載入時出現的{{}})
$注：配合樣式[v-cloak]dislpay:none$
**

• 不解析標籤
• 只替換預留位置，不覆蓋原本內容

2. v-text

<div v-text = "msg"></div>

• 預設沒有閃爍問題
• 覆蓋元素中的內容
• 不解析標籤

3.v-html

<div v-html= "msg"></div>

• 覆蓋元素中內容
• 會解析標籤

4.v-bind:（簡寫為‘:’）

<input type='button' v-bind:title='mytitle'></div>
繫結屬性,資料單向繫結
不加v-bind時，則認為’mytitle’為字串，加上後則為變數或者合法js表示式

5.v-on:（簡寫‘@’）

繫結事件

• 點選：v-on:click = ‘方法名’ -------@click
• 懸浮：v-on:mouseover = ‘方法名’ -------@mouseover
• 離開：v-on:mouseout = ‘方法名’ -------@mouseout
• 行動端 touchstart、touchend、touchmove…

6.事件修飾符

寫在繫結事件名後：如 @click.stop

• .stop：阻止冒泡
• .prevent：阻止預設行為
• .capture：改為事件捕獲
• .self：事件在該元素本身觸發時 觸發回撥
• .once：只觸發一次

7.資料雙向繫結指令 v-model

<input type ='text' v-module = '屬性名'>
$注：僅適用於表單元素$

8.v-for迴圈遍歷

<p v-for = '(值, 索引) in 陣列名/物件名' :key=''></p>

• key的值只能為 srting 或者 number型別
• 使用繫結屬性的形式指定key的值

9.v-if、v-show

<p v-if = '條件'></p>
<p v-show = '條件'></p>

• v-if 刪除或建立元素
• 有較高切換效能消耗，若元素需頻繁切換，不適用v-if
• v-show 隱藏或顯示元素，等同切換 display值 => ‘none’
• 有較高初始渲染消耗，若元素並不需要顯示，不適用v-show

過濾器

用作常見的文字格式化，可使用在：mustache插值 和 v-bind表示式；
{{ msg | 過濾器名稱(傳參)}} ===> 先通過過濾器對資料進行處理後，在返回給name顯示；
‘|’ => 管道符；
過濾器呼叫 採用就近原則，當全域性過濾器與私有過濾器重名，則優先採用私有過濾器；

1.全域性過濾器

所有的vm範例都共用
定義：Vue.filter(‘過濾器名稱’, function(msg,arg){ //資料處理 })
定義位置：在vm範例外面定義
引數：

• msg：管道符前面的資料
• arg：接收的引數

2.私有過濾器(區域性)

定義位置：vm內部，filters: {}，與methods同級
定義：filters:{ 過濾器名稱(管道符前資料，接受的引數) {}}
《=========》
(小知識)：string.padStart(2, ‘0’) 用來給個位數補零

自定義指令

自定義指令名以 ‘v-’ 開頭

1.全域性

定義：Vue.directive(‘自定義指令嗎’, {})
引數1：指令名稱 定義時，自定義指令名不加 ‘v-’ 字首，呼叫時需加上
引數2：物件，物件中有一些指令相關函數，在特定階段執行相應操作
例：焦點事件
<input type='text' v-focus>

Vue.directive('focus', {
每個函數第一個引數為 el，表示被繫結指令的元素，此時可使用原生的方法
	bind:function(el){ //指令繫結到元素上時執行，僅一次
		el.focus() //元素還未插入到DOM 中,不生效
		//多為與樣式相關的操作
	}
	inserted:function(el){ //元素插入到 DOM 中的時候執行，僅一次
		el.focus() //元素已經插入到DOM 中，生效
		//多為與js相關的操作
	}
	updated:function(){ //VNode 更新時執行,可能觸發多次

	}
})

函數相關引數

2.私有

定義位置：在vm範例內定義，與 methods 同級
定義：directives: {'自定義指令名': {相關函數}}
函數簡寫(全域性/私有)：

範例生命週期

生命週期函數與 methods 同級

**html:**
<div id='app'>
	<input type='button' value='改變msg' @click="msg='No'">
	<p id='p'>{{ msg }}</p>
</div>
**js:**
var vm = new Vue({
	el: '#app',
	data: {
		msg: 'ok'
	},
	methods: {
		show() { console.log('執行了show方法') }
	},
})

***建立期間的生命週期函數***
beforCreate(){ //範例被完全建立之前執行
	//在這個生命週期內，data 和 methods 中的資料未初始化
	console.log(this.msg); //undefined
	this.show()  //報錯，this.show() is not a function
}

created() {
	//在這個生命週期內，data 和 methods 中的資料初始化完成
	//可呼叫 methods 中的方法和操作 data 中的資料
	console.log(msg) //ok
	this.show() //執行了show方法
}

beforeMount() { //模板在記憶體中編譯完成，還未渲染到頁面中
	//在這個生命週期內，頁面中的元素未被替換，還是原來寫好的模板字串
	console.log(document.getElementById('p').innerHtml) //{{ msg }}
}

mounted() { 範例建立期間的最後一個生命週期函數
	//將編譯好的記憶體中的模板掛在到頁面中
	console.log(document.getElementById('p').innerHtml) //ok
}

***元件執行階段的生命週期函數***
beforeUpdate() {  //介面還未被更新，但資料已被更新
	//元件/資料被改變時觸發
	//例：當點選input按鈕時：
	console.log(document.getElementById('p').innerHtml) // ok ===>頁面未更新
	console.log(this.msg) // No ===>資料已經改變
}
undaated(){ //頁面與資料都已更新
	//元件/資料被改變時觸發
	//例：當點選input按鈕時：
	console.log(document.getElementById('p').innerHtml) // No ===>頁面已更新
	console.log(this.msg) // No ===>資料已經改變
}

***元件銷燬階段的生命週期函數***
beforeDestroy() {
	//還未執行銷燬過程
}
destroyed() {
	//元件被完全銷燬，此時元件中所有的資料、方法、指令、過濾器等 都不可用
}

動畫

將需要動畫的元素使用 標籤包裹
樣式：
v-enter, v-leave-to {} ——>進入和離開
v-enter-active, v-leave-active {} ——>中間過程動畫

點選檢視：vue動畫詳細介紹

元件

定義：拆分vue範例的程式碼量，不同元件劃分不同功能模組，需要時呼叫

1.全域性建立

<div id='app'>
	<my-com1></my-com1>//參照元件
</div>
<template id='tmp1'>
	<div> //根元素
		<p>建立的元件</p>
	</div>
</template>

****Vue.component('元件名稱', { //建立的元件模板物件 })****
Vue.component('myCom1', {
	template: '#tmp1'
}) 
注：
	1.若元件名稱使用駝峰命名時，呼叫時用小寫，並且單詞之間‘-’連線，若未使用駝峰命名，則直接參照元件名；
	2.常見的模板物件必須有一個根元素包裹

2.區域性建立(私有)

範例內部，與methods同級

components: { //定義範例內部私有元件
	元件名: {
		template: ''
	}
}

3.元件中 data、methods

Vue.compontent('com1', {
	template: '',
	data: function() {
		return {}
		//元件中的 data 為一個函數，且必須 return 一個物件
	},
	methods: {}
})

4.元件切換

<component :is="'元件名'"></component>

5.元件傳值

1.父傳子

<div id='#app'>
	<com1 :parentmsg='msg' v-on:func='show'></com1>
</div>

<template id='son'>
	<div>
		<input type='button' value='點選呼叫父元件傳遞的方法' @click=‘parentfunc’>
		<p>子元件---{{ parentmag }}</p>
	</div>
</template>

var vm = new Vue({
	el: '#app',
	data: {
		msg: '父元件資料'
	},
	methods: {
		show() {
			console.log('呼叫了父元件方法')
		}
	},
	//定義子元件：
	components: {
		com1: {
			template: '#son',
			props: ['parentmsg'], //將父元件傳遞的parentmsg屬性在props陣列中定義，然後才能使用，但是不做更改
			methods: {
				parentfunc() {
					this.$emit(‘func’)
				}
			}
		}
	}
})
總結：
	（1）在父元件呼叫子元件的地方，繫結一個自定義屬性，屬性值為要傳遞的資料，在子元件定義的地方通過props陣列接收
	（2）若呼叫父元件的方法，在父元件呼叫子元件的地方，使用事件繫結方式，自定義事件名,在子元件的方法中，通過this.$emit('方法名')呼叫父元件方法

2.子傳父
通過子元件呼叫父元件方法的方式，將要傳給父元件的資料以引數形式回傳，在父元件中，呼叫方法時接受該引數,若傳遞的為物件，則在父元件data中定義變數接收