vue.js内部自定义指令和全局自定义指令的详细实现(使用指令)

序

众所周知，在Vue中，当我们通常用数据驱动视图时，内部指令有时无法解决一些需求。这时，Vue给了我们一个实现自定义指令的好东西，就是指令。下面的话就不多说了，我们来看看详细的介绍：

管理的

这个词是我们写自定义指令的关键词

自定义指令为我们提供了几个钩子函数。这时，你一定很好奇什么是钩子函数。简单来说，就是专注于表达状态

Bind:只调用一次，当指令第一次绑定到元素时调用。使用这个钩子函数，您可以定义一个初始化动作，在绑定时执行一次。当绑定元素插入到父节点时，调用Inserted:(父节点存在时可以调用，但文档中不一定要存在)。无论绑定值是否更改，当绑定元素的模板更新时，都会调用Update:通过比较更新前后的绑定值，可以忽略不必要的模板更新(详细的钩子函数参数见下文)。当绑定元素的模板完成一个更新周期时，调用ComponentUpdated:Unbind:只调用一次，当指令与元素解除绑定时调用。让我们开始编码，这样我们可以更好地理解如何做自定义指令

！DOCTYPE html html lang=' en ' Head meta charset=' UTF-8 ' title document/title script src=' http :3359 unpkg.com/vue/dist/vue . js '/script/Head body div id=' app ' div class=' ab ' v-CSS=' { ' color ' : ' red '，' font-size ' : ' 30px ' } ' hello/div输入类型=' text ' v-focus/div/body/body

定制说明书时，我们必须带上v-

Vue.directive('css '，{ //hook function，el是当前插入的元素(el，binding){ //el binding element本身//binding是css指令中的对象元素，让styleobj=binding.value，arr=[]；for(让键入style obj){ arr . push(key ' : ' style obj[key])} arr=arr . join('；');El . style . CSS text=arr；}，bind(el，binding) {//当指令绑定到一个元素时，只执行一次} })；Newvue ({el:' # app '，data: {show: true}，direction ves : { focus : { insert(El，binding) {//el binding element本身//binding是css指令中的对象元素El . focus()；} } } });我们可以在js中看到

Vue.directive('css '，{})

我们在new Vue之外定义了这样一段代码，这是我们全局定制指令的模板方式

Css是自定义指令{}的名称。我们可以在里面写钩子函数。在我们所有的钩子函数中，基本上有两个参数el和El，binding

el:指令绑定的元素可以直接操作DOM。绑定元素本身的绑定对象

从上面我们可以看出，在绑定中保持绑定指令的名称和值是非常重要的

本地定制指令

Directives: { name: { }不同的是我们用new Vue编写，里面的api操作和上面的全局自定义指令是一样的

让我们开始看看代码运行结果

我们可以看到样式已经被引用

文本框也获得焦点

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。