vue指令、自定义指令

最新推荐文章于 2024-07-24 16:34:29 发布

pumark

最新推荐文章于 2024-07-24 16:34:29 发布

阅读量351

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/qq_38870665/article/details/109607493

版权

文章目录

一.什么是指令?

1.vue中内置的指令

在vue中提供了一些基础的指令,方便我们直接操作操作DOM节点,主要的内置指令有:

v-cloak:用于在数据还没插入到标签时,不显示原始文本,需要添加样式 .

 <style>
        [v-cloak]{
            display: none;
        }
</style>


 <span v-cloak>{{mess}}</span>

v-text:用于将数据填充到标签中,但是不会出现闪动问题,类似插值和v-cloak的效果.

//这两个效果一样
  <span v-text='mess'></span
  <span v-cloak>{{mess}}</span>

v-html:用于将HTML片段填充到标签中,可以解析HTML标签.

<p v-html="message"></p>
...
message:`<span>this is a message</span>`,

效果: 在这里插入图片描述
v-pre:用于显示原始信息.

 <p v-pre>{{message}}</p>

效果:
在这里插入图片描述
v-once:只渲染一次,后面元素中的数据变化时,都不会重新渲染.
v-for:用于遍历,类似于for …in…遍历

 <li v-for="(item,index) in items" :key="index">{{item}}</li>
 ...
 items:[1,2,3,4],

v-on:用于监听DOM事件.并触发绑定的javascript代码,简写为@.

 <button v-on:click>登录</button>
 <button @:click>登录</button>

v-bind:用于属性绑定,将属性动态和数据绑定.
v-model:实现表单数据和Model中的数据双向绑定.
v-if 、v-else-if、v-els:用于条件渲染,根据条件选择DOM节点显示.
v-show & v-if:用于显示和隐藏元素.
区别:
v-if:每次元素都会重新删除和创建,条件为false时,不会出现在DOM树上.
v-show:不会删除和创建,只是设置display:none样式.

2.vue自定义指令

除了核心的指令,Vue也允许注册自定义指令,在需要对DOM底层进行操作,这时候就会用到自定义指令.自定义指令包括全局自定义指令和局部指令.

二.自定义指令的用法

自定义指令语法:

 Vue.directive('Directive_Name',{Hook_Function:callback(el,binding)})

Directive_Name:自定义指令的名称(约定全小写),不需要加v-,使用时需要添加v-
Hook_Function 钩子函数
可选参数:
bind:当指令绑定到元素上时，就会执行该函数，执行一次；此时元素还未插入到 DOM 中去。
一般执行样式相关的操作。
inserted:被绑定元素插入父节点时会调用该函数，执行一次。
一般执行 JS 行为相关的操作。
update当 vnode 更新时执行该函数，可能执行多次。
el 用来绑定指令的元素，是一个原生 DOM 对象。
binding 记录自定义指令信息的对象，包含许多属性，例如
name 指令名，没有 v- 前缀。
value 指令的绑定值（表达式计算完成后的值）。
expression 指令绑定值的字符串形式（原样）。

注册一个v-focus指令,实现在页面加载完成后,输入框自动获取焦点.
全局自定义指令

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局自定义指令</title>
</head>

<body>
    <div id="app">
        <input type="text" name="" id="" v-focus>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        //全局注册一个自定义指令:v-focus
        Vue.directive('focus', {
            inserted: function (el) {
                el.focus()
            }
        })
        const vm = new Vue({
            el: '#app',
        })

    </script>
</body>

</html>

自定义局部指令:

<template>
  <div>
      <input type="text" name="" id="" v-focus>
  </div>
</template>
<script>
export default {
    name:'Directive',
    directives:{
        focus:{
            inserted:function(el){
                el.focus()
            }
        }
    }
}
</script>