Vue 自定义指令的钩子函数

最新推荐文章于 2022-01-20 17:13:52 发布

当铺鬼

最新推荐文章于 2022-01-20 17:13:52 发布

阅读量88

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/dangpugui/article/details/115013505

版权

<!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/vue-router@3.4.3/dist/vue-router.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex@3.5.1/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>

当铺鬼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 自定义指令的钩子函数

<!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">
复制链接

扫一扫