Directive指令：減少DOM操作的重復(fù)

Vue實例/組件用于數(shù)據(jù)綁定、事件監(jiān)聽、DOM更新

Vue指令主要目的就是原生DOM操作

減少重復(fù)

自定義指令

兩種聲明方式

方法一：聲明一個全局指令

Vue.directive(’x’, directiveOptions)

方法二：聲明一個局部指令

在options里寫，只能被那個Vue實例/組件使用

new Vue({ ..., directives:{ 'x'：directiveOptions }})

關(guān)于directiveOptions

directiveOptions是個對象，里面有五個函數(shù)屬性

bind(el, info, vnode, oldVnode)★

類似created，只調(diào)用一次，指令第一次綁定到元素時調(diào)用。

參數(shù)都是vue給我們的

① el綁定指令的那個元素

② info是個對象，我們想要的信息基本都在里面

③ vnode虛擬節(jié)點

④ oldVnode之前的虛擬節(jié)點

inserted(參數(shù)同上)★

類似mounted，被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。

update(參數(shù)同上)

類似 updated

componentUpdated(參數(shù)同上)

用得不多，見文檔

unbind(參數(shù)同上)★

類似destroyed，當(dāng)元素要消亡時調(diào)用。

bind示例

Mixins混入：復(fù)制

Mixins示例

減少重復(fù)

directives的作用是減少DOM操作的重復(fù)

mixins的作用是減少data、methods、鉤子的重復(fù)

options里的構(gòu)造選項都可以先放到一個js文件，之后哪個實例/組件需要就導(dǎo)入并且用mixins使用就行。

寫在了共同東西里的東西被組件引用了之后，組件還可以覆蓋他們，Vue會智能合并

全局的mixins：不推薦

Extends 繼承、擴(kuò)展

extends是比mixins更抽象一點的封裝

如果你嫌寫五次mixins麻煩，可以考慮extends一次

不過實際工作中用得很少

你可以使用Vue.extend或options.extends

provide & inject：提供&注入

祖先提供東西，后代注入東西

作用是大范圍、隔N代共享信息(data、methods等)

示例

總結(jié)

directive指令

全局用Vue.directive(’x’, {...})

局部用options.directives

作用是減少DOM操作相關(guān)重復(fù)代碼

mixins混入

全局用Vue.mixin({..})

局部用options.mixins: [mixin1, mixin2]

作用是減少options里的重復(fù)

extends繼承/擴(kuò)展

全局用Vue.extend({.})

局部用options.extends: {...}

作用跟mixins差不多，只是形式不同

provide | inject提供和注入

祖先提供東西，后代注入東西

作用是大范圍、隔N代共享信息

補(bǔ)充知識：表單和 v-model

思維導(dǎo)圖

form 做表單一定要用 form+button組合

<template> <div id='app'> 登錄 <form @submit.prevent='onSubmit'> //.prevent阻止默認(rèn)動作 <label><span>用戶名</span><input type='text' v-model='user.username'/> </label> <label><span>密碼</span><input type='password' v-model='user.password'/> </label> <button type='submit'>登錄 </button> </form> </div></template><script> export default { name: ’App’, data() { return { user: { username: ’’, password: ’’ }, x: ’’ } }, methods: { onSubmit() { console.log(this.user) } }, components: {} }</script>

v-model

<label><span>用戶名</span><input type='text' v-model='user.username'/></label>

上面的v-model等價于

<label><span>用戶名</span><input type='text' :value='user.username'@input = 'user.username = $event.target.value'/></label>

自己封裝一個

<template> <div class='red wrapper'> <input :value='value' @input='$emit(’input’,$event.target.value)'/> </div></template><script> export default { name: ’MyInput’, props: { value: { type: String } }, }</script><style scoped> .red { background: red; } .wrapper{ display: inline-block; }</style>

以上這篇Vue 構(gòu)造選項 - 進(jìn)階使用說明就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。