Vue.js -生命周期、自定义指令

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

weixin_43331769

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

阅读量177

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43331769/article/details/104071473

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Vue.js -自定义指令

一、生命周期
二、钩子函数
三、自定义指令的基本用法
四、局部指令

一、生命周期

1.1 创建阶段

1：beforeCreate：此时data、methods函数还未初始化
2：create：此时data、methods函数初始化
3：beforeMount，模板在内存中编译完成，但尚未渲染到页面
4：mounted：模板渲染到页面。
在这里插入图片描述

1.2 运行阶段

1：beforeUpdate：此时页面中显示的数据还是旧的，但是data中的数据已经得到了更新
2：updated：此时页面中的显示和data中的数据保持一致
在这里插入图片描述

1.3销毁阶段

在这里插入图片描述

二、钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

三、自定义指令的基本用法

作用：eg:加载页面后自动获得焦点

    <script type="text/javascript">
      window.onload = function () {  
         Vue.directive('fo',{ fo表示该自定义指令的名字 
             inserted:function(el){ el就是个变量，表示所选定的元素，谁用这个指令，el就是指谁
                 el.focus();  该选定的元素聚焦
             }
         });
        var vm = new Vue({
          el:'#app',
          data:{
            message:'我是一个div'
          },
        })
      }
    </script>
</head>
<body>
    <div id="app">
        <input type="text" v-fo>
    </div>
</body>

结果：加载完页面后，光标自动聚焦到该输入框
在这里插入图片描述

举例2：（改变元素的背景色）
自定义指令格式：

Vue.directive(‘color’,{
bind:function(el, binding){ 此处的bind换成inserted额可以
el.style.backgroundColor = binding.value.color;
}
})

指令的用法：

< input type=“text” v-color = ‘msg’>

    <script type="text/javascript">
      window.onload = function () {
        Vue.directive('color',{   color表示自定义的名字
          bind:function(el, binding){  binding表示传入的参数，el表示调用该函数的元素
            el.style.backgroundColor = binding.value.color;
          }
        })
        const vm = new Vue({
          el:'#app',
          data:{
            msg:{    此处的msg表示的是一个对象
              color:'orange'
            }
          },
        })
      }
    </script>
</head>
<body>
    <div id="app">
      <input type="text" v-color = 'msg'>
    </div>
</body>

结果显示：
在这里插入图片描述

四、局部指令

用法：data域中：

directives:{
color:{
bind:function(el, binding){
el.style.backgroundColor = binding.value.color;
}
}
}

 <script type="text/javascript">
      window.onload = function () {
        const vm = new Vue({
          el:'#app',
          data:{
            msg:{
              color:'red'
            }
          },
          directives:{   只是在局部组件中有用
            color:{
              bind:function(el, binding){
                el.style.backgroundColor = binding.value.color;
              }
            }
          }
        })
      }
    </script>
</head>
<body>
    <div id="app">
      <input type="text" v-color = 'msg'>
    </div>
</body>

显示结果：
在这里插入图片描述

weixin_43331769

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js -生命周期、自定义指令

Vue.js -自定义指令一、钩子函数二、自定义指令的基本用法三、局部指令一、钩子函数一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。二、自定义指令的基本用法作用：eg:加载页面后自动获得焦点 ...
复制链接

扫一扫

专栏目录