<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<body>
<div id="app">
<div class="container">
<app-test v-if="flag" :text="text"></app-test>
<button @click="create">加载</button>
<button @click="update">更新</button>
<button @click="destory">关闭</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js"></script>
<script>
Vue.directive('test', {
bind: function (el) {
console.log('bind', el.parentNode);
},
inserted: function (el) {
console.log('inserted', el.parentNode);
},
update: function (el) {
console.log('update', el.innerHTML);
},
componentUpdated: function (el) {
console.log('componentUpdated', el.innerHTML);
},
unbind: function (el) {
console.log('unbind');
}
});
/* Vue.directive('test', function (el, binding) {
// bind
// update
}); */
const vm = new Vue({
el: '#app',
name: 'App',
components: {
appTest: {
template: '<h1 v-test>{
{text}}</h1>',
props: {
text: String
}
}
},
data: {
flag: true,
text: 'hello',
},
methods: {
create() {
this.flag = true
},
update() {
this.text = 'hi'
},
destory() {
this.flag = false
}
},
});
</script>
</body>
</html>
Hook function of Vue custom instruction
Guess you like
Origin blog.csdn.net/dangpugui/article/details/115013505
Recommended
Ranking