Vue基礎整理1

MVC、MVVM關系圖解

1. mvc（后端思想）

2. mvvm（前端思想）

簡單指令

1.v-cloak

<div v-cloak>{{ msg }}</div>
解決插值運算式的閃爍問題(頁面重繪加載時出現的{{}})
注 ： 配 合 樣 式 [ v ? c l o a k ] d i s l p a y : n o n e \color{red}{注：配合樣式 [v-cloak] { dislpay: none }} 注：配合樣式[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 = '屬性名'>
注 ： 僅 適 用 于 表 單 元 素 \color{red}{注：僅適用于表單元素} 注：僅適用于表單元素

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中定義變數接收