Open vaakian opened 4 years ago
插件暴露一个install方法,使用Vue.use()安装该插件。
install
Vue.use()
// userVideo.vue组件 <template> // 透传所有参数、属性、监听 <video v-bind="{...$props, ...$attrs, ...$listeners}" ref="userVideo"></video> </template> <script> export default { props: { height: { type: [Number, String], default: 200 }, width: { type: Number, default: 200 }, autoplay: { type: Boolean, default: true }, controls: { type: Boolean, default: false } }, data() { return {}; }, methods: { initLocalVideo() { const el = this.$refs.userVideo; navigator.mediaDevices .getUserMedia({ video: true, audio: true }) .then(mediaStream => { el.srcObject = mediaStream; el.autoplay = true; }) .catch(reason => { throw new Error(reason); }); } }, mounted() { this.initLocalVideo(); } }; </script>
// MyPlg.js import UserVideo from '../components/UserVideo' export default { install(Vue, options) { // 注册全局组件,使用<v-cam /> Vue.component('v-cam', UserVideo); Vue.directive('cam', { bind() { }, // 注册全局指令,使用<video v-cam /> inserted(el, binding, vnode, oldVnode) { if (el instanceof HTMLVideoElement) { navigator.mediaDevices.getUserMedia({ video: true, audio: true }) .then(mediaStream => { el.srcObject = mediaStream; el.autoplay = true; }).catch(reason => { throw error(reason) }); } else { throw error('the element is not HTMLVideoElement') } }, update() { }, componentUpdated() { }, unbind() { } }) } }
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
bind
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
inserted
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
update
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
componentUpdated
unbind:只调用一次,指令与元素解绑时调用。
unbind
指令钩子函数会被传入以下参数:
el
binding
property
name
value
v-my-directive="1 + 1"
2
oldValue
expression
"1 + 1"
arg
v-my-directive:foo
modifiers
vnode
oldVnode
Vue高阶开发
一、插件开发
插件暴露一个
install
方法,使用Vue.use()
安装该插件。钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind
:只调用一次,指令与元素解绑时调用。钩子函数参数
指令钩子函数会被传入以下参数:
el
:指令所绑定的元素,可以用来直接操作 DOM。binding
:一个对象,包含以下property
:name
:指令名,不包括 v- 前缀。value
:指令的绑定值,例如:v-my-directive="1 + 1"
中,绑定值为2
。oldValue
:指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。无论值是否改变都可用。expression
:字符串形式的指令表达式。例如v-my-directive="1 + 1"
中,表达式为"1 + 1"
。arg
:传给指令的参数,可选。例如v-my-directive:foo
中,参数为 "foo"。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。vnode
:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode
:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。 除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。