• Vue生命周期与自定义指令

    Vue内置指令 

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

    Vue自定义指令

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

    定义语法：

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

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

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

    备注：

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

    局部指令写法

    1. <body>
    2.     <div id="root">
    3.         <!-- 指令如果是多个单词组成，中间用 - 隔开 -->
    4.         <h1 v-big-number="num"></h1>
    5.         <button @click="num++">点我加一</button>
    6.         <input type="text" v-fbind:value="num">
    7.     </div>
    8. </body>
    9. <script type="text/javascript">
    10.  
    11.     new Vue({
    12.         el: "#root",
    13.         data: {
    14.             num: 10
    15.         },
    16.         directives: {
    17.             // haha函数何时会被调用，1.指令与元素成功绑定时(一上来) 绑定后才会渲染到页面。2.指令所在的模板被重新解析时
    18.             // element为自定义指令所在的标签的真实DOM,binding为自定义指令中的值
    19.             "big-number"(element, binding) {
    20.                 element.innerText = binding.value * 10;
    21.             },
    22.  
    23.             // 自定义指令的完整写法
    24.             fbind: {
    25.                 //指令与元素成功绑定时执行
    26.                 bind(element, binding) {
    27.                     element.value = binding.value;
    28.                 },
    29.                 //指令所在的元素被插入到页面时
    30.                 inserted(element, binding) {
    31.                     element.focus();
    32.                 },
    33.                 //指令所在的模板重新解析时
    34.                 update(element, binding) {
    35.                     element.value = binding.value;
    36.                     element.focus();
    37.                 }
    38.             }
    39.         }
    40.     })
    41. </script>

    全局指令写法

    1. <body>
    2.     <div id="root">
    3.         <!-- 指令如果是多个单词组成，中间用 - 隔开 -->
    4.         <h1 v-big-number="num"></h1>
    5.         <button @click="num++">点我加一</button>
    6.         <input type="text" v-fbind:value="num">
    7.     </div>
    8. </body>
    9. <script type="text/javascript">
    10.  
    11.     // 设置全局指令
    12.     Vue.directive("fbind", {
    13.         //指令与元素成功绑定时执行
    14.         bind(element, binding) {
    15.             element.value = binding.value;
    16.         },
    17.         //指令所在的元素被插入到页面时
    18.         inserted(element, binding) {
    19.             element.focus();
    20.         },
    21.         //指令所在的模板重新解析时
    22.         update(element, binding) {
    23.             element.value = binding.value;
    24.             element.focus();
    25.         }
    26.     })
    27.  
    28.     Vue.directive("big-number", function (element, binding) {
    29.         element.innerText = binding.value * 10;
    30.     })
    31.  
    32.     new Vue({
    33.         el: "#root",
    34.         data: {
    35.             num: 10
    36.         }
    37.     })
    38. </script>

    Vue生命周期

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

    生命周期流程

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

    生命周期流程与对应的函数

    1. 步骤2对应函数beforeCreate()。
    2. 步骤3对应函数created()。
    3. 步骤5对应函数beforeMount()。
    4. 步骤7对应函数mounted()。
    5. 步骤8对应函数beforeupdate()。
    6. 步骤10对应函数updated()。
    7. 步骤11对应函数beforeDestroy()。
    8. 被销毁时调用函数destroyed()。

    f 

  • 相关阅读:
    JUnit5单元测试提示“Not tests were found”错误
    Linux下c++串口编程
    奶茶新手加盟奶茶品牌培训哪些技能？
    Linux命令之usermod命令
    【网络攻防】常见的网络攻防技术——黑客攻防（通俗易懂版）
    sarsa算法和qlearning算法有什么不同
    github上star较多的三个c++ 内存池memory pool分析
    [MATLAB学习]：Matlab生成滑动平均滤波算法文件并移植到STM32单片机上运行——基于CubeMX
    三色标记过程
    RK3588S和ARM阵列服务器在虚拟化云平台的应用
  • 原文地址：https://blog.csdn.net/LYXlyxll/article/details/125605862