1.在自定义页面里使用
bind,inserted
bind:指令第一次绑定到元素时调用,在绑定时执行的初始化动作
inserted: 被绑定元素插入父节点时调用
<template>
<div id="app">
<button @click="age++">change</button>
<button @click="unbind">解绑</button>
<input type="text" v-focus/>
<p>{
{age}}</p>
</div>
</template>
<script>
export default {
data() {
return {
age:15,
};
},
directives: {
focus: {
//自定义指令名字
bind() {
console.log("绑定了元素");
},
inserted(el, binding) {
// 当页面刷新时,自动聚焦到input框上
el.focus();
console.log("已经插入文档");
},
update() {
console.log("数据将更新");
},
componentUpdated() {
console.log("数据更新");
},
unbind() {
console.log("解绑");
},
},
},
methods:{
unbind()