Vue核心基础6：Vue内置指令、自定义指令、生命周期

news2025/11/4 14:42:26

1 Vue中的内置指令

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                n: 1,
                m: 100,
                name: 'Vue',
                str: '<h3>你好</h3>'
            }
        })
    </script>

1.1 v-text

<div v-text="name"></div>

1.2 v-html

<div v-html="str"></div>

1.3 v-cloak

1.4 v-once

<h2 v-once>初始化的n值: {{n}}</h2>
<h2>当前的n值: {{n}}</h2>
<button @click="n++">加1</button>

1.5 v-pre

<h2 v-pre>Vue其实很简单的</h2>
<h2>当前的n值: {{m}}</h2>
<h2 v-pre>当前的n值: {{m}}</h2>
<button @click="m++">加1</button>

2 自定义指令

【代码】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 需求1：定义一个v-big指令，和 v-text功能类似，但会把绑定的数值方法10倍 -->
    <!-- 需求2：定义一个v-fbind指令， 和v-bind功能类似，但可以让其绑定的input元素默认获得焦点-->

    <div id="root">
        <h2>当前的n值: <span v-text="n"></span></h2>
        <h2>放大十倍后的n值: <span v-big="n"></span></h2>
        <button @click="n++">加1</button>
        <hr>
        <!-- <input type="text" v-bind:value="n"> -->
        <input type="text" v-fbind:value="n">
    </div>
    <script>
            /*     // 定义全局指令
                Vue.directive('fbind', {
                    // 1.指令和元素成功绑定时（一上来的时候）；
                    bind(element, binding) {
                        element.value = binding.value
                    },
                    // 2.指令所在元素被插入页面时调用
                    inserted(element, binding) {
                        element.focus()
                    },
                    // 3.指令所在模板被重新解析时调用
                    update(element, binding) {
                        // console.log('update')
                        element.value = binding.value
                    },
                })  */


        const vm = new Vue({
            el: '#root',
            data: {
                name: 'Vue',
                n: 1
            },

            // 所有指令相关的函数中的this都指向window
            directives: {
                // big函数何时会被调用
                // 1.指令和元素成功绑定时（一上来的时候）；
                // 2.指令所在的模板被重新解析时；
                big(element, binding) {
                    element.innerHTML = binding.value * 10
                },
                fbind: {
                    // 1.指令和元素成功绑定时（一上来的时候）；
                    bind(element, binding) {
                        element.value = binding.value
                    },
                    // 2.指令所在元素被插入页面时调用
                    inserted(element, binding) {
                        element.focus()
                    },
                    // 3.指令所在模板被重新解析时调用
                    update(element, binding) {
                        // console.log('update')
                        element.value = binding.value
                    },
                }
            }
        })
    </script>
</body>

</html>

3 生命周期

【代码】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分析生命周期</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- <h2 :style="{opacity: opacity}">欢迎学习Vue</h2> -->
        <h2>当前的n值是: {{n}}</h2>
        <button @click="add">加1</button>

        <button @click="destory">点我销毁vm</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                n: 1,
            },
            methods: {
                add() {
                    this.n++
                },
                destory() {
                    console.log('销毁vm')
                    this.$destroy()
                }
            },
            beforeCreate() {
                console.log('beforeCreate', this)
                // debugger
            },
            created() {
                console.log('created', this)
            },
            beforeMount() {
                console.log('beforeMount', this)
            },
            mounted() {
                console.log('mounted', this)
            },
            beforeUpdate() {
                console.log('beforeUpdate', this)
            },
            updated() {
                console.log('updated', this)
            },
            beforeDestroy() {
                console.log('beforeDestroy', this)
            },
            destoryed() {
                console.log('destoryed', this)
            }


        })
    </script>
</body>

</html>