2、VUE指令的使用

最新推荐文章于 2022-11-08 16:05:40 发布
最新推荐文章于 2022-11-08 16:05:40 发布
阅读量213 收藏
点赞数
分类专栏： # Vue学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sviptzk/article/details/109452634
版权

内容输出

大胡子语句image-20200928145735963

通过 大胡子语句 我们可以很方便的中模板中输出数据，但是这种方式会有一个问题，当页面加载渲染比较慢的时候，页面中会出现 大胡子语句 ，vue 提供了几个指令来解决这个问题

指令中的表达式不需要使用 大胡子语句

v-text

<p v-text="title"></p>

弊端：v-text 会填充整个 innerHTML

v-cloak

<p v-cloak>{{title}}</p>

需要配合 css 进行处理

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

v-html

为了防止 xss 攻击，默认情况下输出是不会作为 html 解析的，通过 v-html 可以让内容作为 html 进行解析

v-once

只渲染元素和组件一次，后期的更新不再渲染

v-pre

忽略这个元素和它子元素内容的编译

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>

    <div id="app">
        <!-- v-text指令会将内部全部inner HTML替换 -->
        <p v-text='title'>你好</p>

        <!-- 会输出文本和变量的值 -->
        <p v-cloak>你好，{{title}}</p>

        <!-- 会将content变量作为html输出 -->
        <p v-html='content'></p>

        <!-- 忽略语法，直接输出{{title}} -->
        <p v-pre>{{title}}</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        /**
         * 指令
         *  - 值是表达式模式
         *  - 不支持 大胡子语句 语法
         *
         * v-if 与 v-show 的区别
         *      v-if：值为true的时候渲染标签，false删除（不渲染）标签
         *      v-show：渲染结构，但是根据值来隐藏和显示标签
         * 使用v-if还是v-show：该结构是否经常变化
         *
         */
        let app = new Vue({
            el: '#app',
            data: {
                title: '小康',
                content: '<h1>小康</h1>'
            }
        });
    </script>
</body>

</html>

image-20200927194247024

逻辑处理

v-show与v-if

v-show根据表达式的值（布尔值），切换元素的显示与隐藏（display 属性）

适用于状态切换比较频繁的情况

v-if根据表达式的值（布尔值），创建或销毁元素

适用于状态切换不频繁的情况

当逻辑表达式为false

image-20200927195010721

逻辑表达式为true时

image-20200927195652604

v-else / v-else-if

与 v-else 配合

循环与列表

v-for

根据数据循环渲染 v-for 指令所在的元素及其子元素

可以循环的数据：Array | Object | number | string | Iterable (2.6 新增)

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

v-for 中也可以使用 of 语法，在 vue 中两者没有什么区别

let app = new Vue({
    data: {
        users: [
            { id: 1, username: 'zmouse' },
            { id: 2, username: 'mt' },
            { id: 3, username: 'hai' }
        ]
    },
});
app.$mount('#app');

<ul>
    <!-- for in 与 for of没有区别 -->
    <li v-for="(user,index) of users">
        <input type="checkbox"> {{index}} - {{user.username}}
    </li>
</ul>

<ul>
    <li v-for="i of 10">
        {{i}}
    </li>
</ul>

image-20200927201821367

:key

默认情况下，在渲染 DOM 过程中使用 原地复用 ，这样一般情况下会比较高效，但是对于循环列表，特别是依赖某种状态的列表，会有一些问题，我们可以通过 :key 属性，来给每个循环节点添加一个标识。

虚拟dom为了节约性能，因此只会变化需要变化的地方。也就是说如果数据没有发生变化，那么DOM不会被重新渲染。

<ul>
    <!-- for in 与 for of没有区别 -->
    <li v-for="(user,index) of users" :key="user.id">
        <input type="checkbox"> {{index}} - {{user.username}}
    </li>
</ul>

属性绑定

v-bind

绑定数据（表达式）到指定的属性上，<div v-bind:参数="值/表达式"></div>，这里的参数就是指定的属性名称

<div id="app">
    <p v-bind:id='id'></p>
    <p v-bind:id='"id"'></p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            id: 'test'
        }
    })
</script>

image-20200927210741884

缩写

有的一些常用指令会有对应的缩写，v-bind 对应的缩写为：:

<p :id='id'></p>

样式

针对样式属性，v-bind 值有一些特殊的写法

style

原生普通写法

<div style="width: 100px; height: 100px; background: red"></div>

v-bind 写法

<div :style="'width: 100px; height: 100px; background: red'"></div>

对象写法

<div :style="style1"></div>

...
<script>
new Vue({
	el: '#app',
	data: {
		style1: {
      width: '100px',
      height: '100px',
      background: 'green'
    }
	}
});
</script>

数组写法

<div :style="[style1, style2]"></div>

...
<script>
new Vue({
	el: '#app',
	data: {
		style1: {
      width: '100px',
      height: '100px',
      background: 'green'
    }
	},
  style2: {
    border: '1px solid black'
  }
});
</script>

image-20200927210917692

class

原生普通写法

<div class="box1 box2"></div>

v-bind 写法

<div :class="'box1 box2'"></div>

数组写法

<div :class="['box1', 'box2']"></div>

对象写法

<p :class="{'test1':flag}">xiaokang.me</p>

<script>
    let app = new Vue({
        data: {
            flag: true,
        }
    });
    app.$mount('#app');

</script>

image-20200927211218924

使用对象写法，可以根据值（boolean）动态添加对应的 class，如上述代码，会根据变量flag的值动态判断是否添加这个class。

双向数据流

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <div id="app">
        <input type="text" v-model='text'>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        // 模板 => vdom => dom

        let app = new Vue({
            data: {
                text: '文本'
            }
        });
        app.$mount('#app');

    </script>
</body>

</html>

当数据text更新时，也会更新试图。更新试图时，数据也会更新。

0229caa6-1200-4bda-adcf-077d365295a8

  • 对于text和textarea

    双向数据绑定默认绑定的是value属性

  • checkbox和box

    绑定的是checked属性

  • select

    单选绑定到值，多选绑定到数组

指令修饰符

  • lazy

    取代input监听，change事件。

    <input type="text" v-model.lazy='v1'>

    8ef5108c-402e-499e-baf4-7811499fa017

  • number

    将输入的字符串转为有效数字

  • trim

    输入首尾空格过滤

自定义指令

自定义指令在VUE内部提供了两种注册方式：全局指令和局部指令。

全局指令即全局部分注册即可。

Vue.directive('指令名称', {指令配置});

局部指令注册即在某个对象内注册，指令的生效范围为当前对象的。例如在创建Vue对象内注册的指令，可以在这个对象的内使用。

new Vue({
  el: '#app',
  directives: {
    '指令名称': {指令配置}
  }
});

注册命令时不需要使用v-前缀，但使用时需要使用v-前缀

指令生命周期（钩子函数）

指令的运行方式很简单，它提供了一组指令生命周期钩子函数，我们只需要在不同的生命周期钩子函数中进行逻辑处理就可以了

  • bind : 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  • inserted : 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
  • update : 所在组件更新的时候调用
  • componentUpdated : 所在组件更新完成后调用
  • unbind : 只调用一次，指令与元素解绑时调用

不同的生命周期钩子函数在调用的时候同时会接收到传入的一些不同的参数

  • el : 指令所绑定的元素，可以用来直接操作 DOM
  • binding : 一个对象，包含以下属性：
    • name : 指令名，不包括 v- 前缀
    • value : 指令的绑定值（作为表达式解析后的结果）
    • expression : 指令绑定的表达式（字符串）
    • arg : 传给指令的参数，可选
    • modifiers : 传给指令的修饰符组成的对象，可选，每个修饰符对应一个布尔值
    • oldValue : 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用，无论值是否改变都可用

示例：点击按钮获取焦点

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <div id="app">
        <h1>{{title}}</h1>
        <hr>

        <input type="text" v-focus="isFocus" />

        <button v-on:click="isFocus = !isFocus">按钮</button>
    </div>

    <script src="./js/vue.js"></script>

    <script>

        Vue.directive('focus', {
            bind(el) {
                // 该生命周期执行完成的时候，虽然可以得到所在的dom节点对象，但是并不代表该节点已经渲染到页面（dom树）中
                // el.focus();
            },
            inserted(el, binding) {
                // 当元素插入到页面时执行
                console.log(binding);
                binding.value && el.focus();
            },
            update(el, binding, vNode, oldVNode) {
                // 页面更新时会执行
                console.log('binding', binding, vNode, oldVNode);
                binding.value && el.focus();

            }
        });

        let app = new Vue({
            el: '#app',
            data: {
                title: '指令',
                isFocus: false
            }
        });

    </script>

</body>

</html>

通过isFocus属性控制是否获取焦点。

案例：拖拽案例

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>

    <div id="app">
        <button v-on:click="isCanDrag = !isCanDrag">拖拽 - {{isCanDrag}}</button>
        <div class="box" v-drag.limit="isCanDrag"></div>
    </div>

    <script src="./js/vue.js"></script>

    <script>

        // 注册全局指令 drag
        Vue.directive('drag', {
            // 将值结构
            bind(el, { value: isCanDrag, modifiers: { limit } }) {
                // 为元素绑定事件
                let x = 0;
                let y = 0;
                let isDown = false;
                el._isCanDrag = isCanDrag;

                el.addEventListener('mousedown', function (e) {

                    if (!this._isCanDrag) return;

                    x = e.clientX - this.offsetLeft;
                    y = e.clientY - this.offsetTop;
                    isDown = true;

                    e.preventDefault();
                });

                el.addEventListener('mousemove', function (e) {
                    if (isDown) {
                        let L = e.clientX - x;
                        let T = e.clientY - y;

                        if (limit) {
                            if (L < 0) {
                                L = 0;
                            }
                        }

                        this.style.left = L + 'px';
                        this.style.top = T + 'px';
                    }
                });

                el.addEventListener('mouseup', function (e) {
                    isDown = false;
                });

            },
            // 更新值
            update(el, { value: isCanDrag }) {
                el._isCanDrag = isCanDrag;
            }
        });

        let app = new Vue({
            el: '#app',
            data: {
                title: '指令',
                isCanDrag: false
            }
        });

    </script>

</body>

</html>
Dreamy.TZK
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue指令的钩子函数使用方法
08-31
Vue指令的钩子函数使用方法 Vue指令的钩子函数使用方法是指在Vue框架中自定义指令时，使用钩子函数来定义指令的生命周期。钩子函数是指令的生命周期中重要的一部分，它们可以帮助开发者更好地控制指令的行为。 一...
angular监听输入框值的变化_angular2+监测属性的变化
weixin_35778603的博客
01-26 1137
angular项目中通过@Input来实现从父component到子component属性的传值。angular框架本身提供了一系列的钩子函数， 其中ngOnchange是对传入值进行监测，只要传入值有所变化，就会进入ngOnchange钩子函数。曾经一度也是认为，属性的监测理所当然应该是在ngChange里操作。但自从远方的朋友给了这样一个comments:查阅了相关资料，setter相较于ng...
angular ngOnChange内部for..in报[tslint]error的问题
AloneAsFoam的博客
07-26 903
通过ngOnChange钩子来监听组件属性值变化 ngOnchange( name: string ) {       for ( let myName in nameList ) { ...... } } ngOnChange内部出现for..in..语句时 , 会出现一个错误 这个错误并不会影响程序的正常执行 , 只是在编辑器内部显示出来 引起这个错误的原因 :  我们先...
Angular2 ngOnChanges用法
m0_45406092的博客
06-04 7000
a
angular OnChange事件
weixin_30855099的博客
04-25 3672
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.compon...
react 生命挂钩_角生命周期挂钩：ngOnChanges，ngOnInit等
cumi6497的博客
08-16 635
react 生命挂钩 为什么我们需要生命周期挂钩？ (Why do we need lifecycle hooks?) Modern front-end frameworks move the application from state to state. Data fuels these updates. These technologies interact with the data wh...
vue2自定义指令-防抖
最新发布
08-22
在Vue2中，自定义指令（Custom Directives）是一种扩展Vue功能的方式，允许开发者对DOM进行更精细的操作。本文将深入探讨如何创建一个防抖（Debounce）自定义指令，以优化性能，尤其是在处理频繁触发的事件时，如...
vue使用自定义指令实现拖拽
10-16
主要为大家详细介绍了vue使用自定义指令实现拖拽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue自定义指令写法与个人理解
01-19
什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来...
Vue自定义指令使用方法详解
08-29
本文将深入探讨Vue自定义指令的使用方法。 ### 1. 自定义指令的语法 创建自定义指令的基本语法是通过`Vue.directive()`方法，它接收两个参数：指令ID和定义对象。例如： ```javascript Vue.directive('my-...
vue内置指令详解
08-27
下面将详细介绍 Vue 内置指令的使用方法和应用场景。 一、v-bind 指令 v-bind 指令用于响应并更新 DOM 特性，例如绑定属性，动态更新 HTML 元素上的属性。其基本语法为：...
Vue2的自定义指令-拖动指令.js.zip
12-25
在Vue2中，自定义指令（Custom Directives）是一种扩展Vue功能的方式，允许开发者对DOM进行底层操作。在这个“Vue2的自定义指令-拖动指令.js.zip”压缩包中，包含了一个名为“拖动指令.js”的文件，该文件应该实现了...
2.vue指令.ppt
04-10
vue指令
vue自定义指令实现方法详解
10-17
自定义指令的使用方式与Vue内置指令类似，将指令ID放在`v-`前缀后面，接着是表达式或动态绑定。例如： ```html 我是自定义指令 ``` 在上面的例子中，`v-color`是一个自定义指令，`red`是绑定的值，可以通过Vue实例...
vue指令实现防止连点
07-08
应用vue指令，实现防止按钮连点，此文件内容只是局部指令，全局指令需要自己完成，但是核心功能是一样的
Angular 冷知识 —— OnInit 与 OnChange 使用的时机
KenkoTech的博客
11-08 1213
Angular 冷知识
angular生命周期钩子以及父子组件之间生命周期钩子执行顺序
letianxf的博客
11-01 1205
angular生命周期钩子以及父子组件之间生命周期钩子执行顺序
angular 指令
Jq的博客
09-12 2187
Angular 指令的不同类型如下： 组件 —— 带有模板的指令。这种指令类型是最常见的指令类型。 属性型指令 —— 更改元素、组件或其他指令的外观或行为的指令。 结构型指令 —— 通过添加和删除 DOM 元素来更改 DOM 布局的指令。 内置指令 内置属性型指令： 常见的内置属性型指令 作用 NgClass 添加和删除一组 CSS 类 NgStyle 添加和删除一组 HTML 样式 NgModel 将数据双向绑定添加到 HTML 表单元素 内置结构型指令 结构型指令的职责是
初次使用angular开发某管理系统遇到的一些问题
weixin_44788637的博客
08-06 326
初次使用angular开发某管理系统遇到的一些问题 1、加载完成自动提示功能 项目有个异步加载需要几分钟，想实现一个异步加载完成时中提示用户加载完成。在加载过程中，用户可以进行界面路由之间的跳转，但是angular路由切换后组件就已经销毁了，所以不能通过组件内的变量记录加载过程。所以思路是用localstorage存储一个变量记录完成，但是怎么获取localstorage存的值是值发生改变呢？最后思路是自定义一个localstorage.setItem事件，在组件初始化的时候直接监听该事件，判断值是否发生改
vue2自定义指令的使用
08-19
- *1* [Vue2中使用自定义指令](https://blog.csdn.net/qq_60961397/article/details/126822757)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值