Vue生命周期与自定义指令

最新推荐文章于 2023-11-30 11:40:15 发布

io无心

最新推荐文章于 2023-11-30 11:40:15 发布

阅读量585

点赞数 1

分类专栏： web前端 Vue 文章标签：前端 javascript java

需转载请联系QQ:846581636

本文链接：https://blog.csdn.net/LYXlyxll/article/details/125605862

版权

web前端同时被 2 个专栏收录

42 篇文章 6 订阅

订阅专栏

Vue

35 篇文章 0 订阅

订阅专栏

Vue内置指令

v-bind ：单向绑定解析表达式，可简写为 :xxx。
v-model ：双向数据绑定。
v-for ：遍历数组/对象/字符串。
v-on ：绑定事件监听，可简写为@。
v-if ：条件渲染（动态控制节点是否存在）
v-if-else ：条件渲染（动态控制节点是否存在）
v-else ：条件渲染（动态控制节点是否展示）
v-text：
1. 作用：向其所在的节点中渲染文本内容。
2. 与插值语法的区别：v-text会替换节点中的内容，{{xxx}}只替换{{xxx}}的内容。
v-html ：向所在节点中渲染文本内容，会把html文本解析。
v-cloa：
1. Vue加载后会自动删除标签中的v-cloak。
2. 一般配合<style>[v-cloak]{display: none;}</style>使用。
v-noce:
1. 只会执行一次例如：<h1 v-noce>{{n}}</h1>，无论n怎么变h1中的n初始化之后就不会变了。
2. v-noce所在的节点在初次动态渲染后，就视为了静态内容了，以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
v-pre：
1. 跳过其所在节点的编译过程。
2. 可利用它跳过没有使用指令语法、没有插值语法的节点，会加快编译。

Vue自定义指令

注意：所有指令相关函数的this都是window。

定义语法：

局部指令：new Vue({directives:{指令,配置对象})。
全局指令：Vue.directive(指令名,配置对象)

配置对象中常用的三个回调：

bind：指令与元素成功绑定时调用。
inserted：指令所在元素被插入页面时使用。
update：指令所在的模板结构被重新解析时调用。

备注：

指令定义时不加v-,但使用时要加v-。
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

局部指令写法

<body>
    <div id="root">
        <!-- 指令如果是多个单词组成，中间用 - 隔开 -->
        <h1 v-big-number="num"></h1>
        <button @click="num++">点我加一</button>
        <input type="text" v-fbind:value="num">
    </div>
</body>
<script type="text/javascript">

    new Vue({
        el: "#root",
        data: {
            num: 10
        },
        directives: {
            // haha函数何时会被调用，1.指令与元素成功绑定时(一上来) 绑定后才会渲染到页面。2.指令所在的模板被重新解析时
            // element为自定义指令所在的标签的真实DOM,binding为自定义指令中的值
            "big-number"(element, binding) {
                element.innerText = binding.value * 10;
            },

            // 自定义指令的完整写法
            fbind: {
                //指令与元素成功绑定时执行
                bind(element, binding) {
                    element.value = binding.value;
                },
                //指令所在的元素被插入到页面时
                inserted(element, binding) {
                    element.focus();
                },
                //指令所在的模板重新解析时
                update(element, binding) {
                    element.value = binding.value;
                    element.focus();
                }
            }
        }
    })
</script>

全局指令写法

<body>
    <div id="root">
        <!-- 指令如果是多个单词组成，中间用 - 隔开 -->
        <h1 v-big-number="num"></h1>
        <button @click="num++">点我加一</button>
        <input type="text" v-fbind:value="num">
    </div>
</body>
<script type="text/javascript">

    // 设置全局指令
    Vue.directive("fbind", {
        //指令与元素成功绑定时执行
        bind(element, binding) {
            element.value = binding.value;
        },
        //指令所在的元素被插入到页面时
        inserted(element, binding) {
            element.focus();
        },
        //指令所在的模板重新解析时
        update(element, binding) {
            element.value = binding.value;
            element.focus();
        }
    })

    Vue.directive("big-number", function (element, binding) {
        element.innerText = binding.value * 10;
    })

    new Vue({
        el: "#root",
        data: {
            num: 10
        }
    })
</script>

Vue生命周期

生命周期的别名：生命周期回调函数，生命周期函数，生命周期钩子。
生命周期是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this是指向vm或者组件实力对象。

生命周期流程

new Vue()。
初始化：生命周期，事件，但数据代理还未开始。
1. 此时：无法通过vm访问到data中的数据，methods中的方法。
初始化：数据监测，数据代理
1. 此时：可以通过vm访问到data中的数据，methods中配置的方法。
Vue开始解析模板，生成虚拟DOM(内存中)，页面还不能显示解析好的内容。
页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效。
把页面中的虚拟DOM转成真实DOM插入到页面。
页面中呈现的是未经Vue编译的DOM，对DOM的操作均有效（尽可能避免），至此初始化过程结束，一般在此进行：开启定时器，发送网络请求，订阅消息，绑定中自定义时间，等初始化操作。
此时数据是新的，页面时旧的：数据未和页面保持同步。
根据新数据，生成新的虚拟DOM，锁喉与旧的虚拟DOM进行比较，最终完成呢过页面更新，完成呢过Model到view的更新。
此时：数据是新的，页面也是新的，即：页面和数据保持同步。
此时：vm中所有的：data,methods，指令等等，都处于可用状态，马上要执行销毁过程，一般处于此阶段：关闭定时器，取消订单消息，解绑定义事件等收尾操作。