2、VUE指令的使用

最新推荐文章于 2022-11-01 17:17:27 发布
最新推荐文章于 2022-11-01 17:17:27 发布
阅读量215 收藏
点赞数
分类专栏： # 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
    评论
专栏目录
angular监听输入框值的变化_angular2+监测属性的变化
weixin_35778603的博客
01-26 1138
angular项目中通过@Input来实现从父component到子component属性的传值。angular框架本身提供了一系列的钩子函数， 其中ngOnchange是对传入值进行监测，只要传入值有所变化，就会进入ngOnchange钩子函数。曾经一度也是认为，属性的监测理所当然应该是在ngChange里操作。但自从远方的朋友给了这样一个comments:查阅了相关资料，setter相较于ng...
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...
Angular2 ngOnChanges用法
m0_45406092的博客
06-04 7009
a
angular OnChange事件
weixin_30855099的博客
04-25 3675
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.compon...
angular生命周期钩子以及父子组件之间生命周期钩子执行顺序
letianxf的博客
11-01 1211
angular生命周期钩子以及父子组件之间生命周期钩子执行顺序
Vue指令的钩子函数使用方法
08-31
Vue指令的钩子函数使用方法 Vue指令的钩子函数使用方法是指在Vue框架中自定义指令时，使用钩子函数来定义指令的生命周期。钩子函数是指令的生命周期中重要的一部分，它们可以帮助开发者更好地控制指令的行为。 一...
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-...
Angular生命周期钩子ngOnChanges的使用 - 补充监听子组件
小妖666个人笔记
10-26 6522
时机：当被绑定的输入属性的值发生变化时调用，不过首次调用是会发生在ngOnInit()之前的。当然必须是父组件使子组件输入属性值变化时才会调用，子组件自己改变输入属性的值不会调用。 ngOnChanges()方法获取了一个对象，它可以同时观测多个绑定的属性值，它把每个发生变化的属性名都映射到了一个SimpleChange对象， 该对象中有属性的当前值和前一个值。触发条件：@input属性(输入属性...
angular5 路由生命周期
阿龙的博客
01-29 983
Angular 5.0 来了! 有这些大变化 https://blog.csdn.net/li420520/article/details/84500092 路由器生成周期事件 我们给路由器添加了新的生命周期事件，让开发者可以跟踪running guard启动到激活完成的各个阶段。这些事件可在有子组件更新时，在一个特定的路由器出口上展示加载动画，或者测量性能。 新的事件（按顺序）是Guar...
angular13 + ng-zorro通过路由重用实现Tab页签
zxf3800的博客
08-24 1404
angular13 + ng-zorro通过路由重用实现Tab页签
angularjs事件指令--ngClick、ngDbclick、ngCut、ngChange、ngKeydown...
ICode联盟
05-23 2586
转载于：点击打开链接 ngClick 适用标签：所有 触发条件：单击 #html "LearnCtrl"> "click()">click me "click()">click me #script angular.module('learnModule', []) .controller('LearnCtrl', function ($
AngularJS指令开发（1）——参数详解
weixin_33836223的博客
11-01 519
费了不少时间泡在自己的Angular UI for mobile计划，但看来是要搁置一下。一个是因为最近公司项目紧，自己还要忙着考驾照，心力交瘁啊。当然，最重要的原因还是，在Angular的使用上，钻得越深，发现水越深，不得不停下来，重新整理一下知识点。 赶紧开始。 指令，很重要 AngularJS与JQuery最大的区别在哪里？我认为，...
自定义Angular路由复用策略（页面前进后退时，能保持之前的状态）
DragonOfMoon的博客
06-16 892
Angular路由复用策略，保存之前页面的状态。
agular6.x 生命周期个人理解
黄彪博客
07-15 332
文章目录文章参考构造函数必须掌握的ngOnInitngAfterViewInitngOnDestroy需要了解的ngDoCheckngAfterContentCheckedngAfterViewCheckedngOnChange 文章参考 构造函数 组件运行的最早的函数，比任何一个生命周期函数要早 用于依赖注入service等组件 变量的初始化 必须掌握的 ngOnInit 构造函数之...
Angular学习笔记（二） --- 生命周期钩子
wangdan_2013的博客
05-16 1481
生命周期函数简介 当前版本：6.0.0-build 简介 指令和组件的实例有一个生命周期：新建、更新和销毁。 通过实现一个或多个 Angular core 库里定义的生命周期钩子接口，开发者可以介入该生命周期中的这些关键时刻。 分类 指令与组件共有的钩子 ngOnChanges ngOnInit ngDoCheck ngOnDestroy 组件特有的钩子 ngA...
vue2自定义指令的使用
08-19
在Vue.js中，你可以通过注册自定义指令来扩展Vue的功能。自定义指令可以用来配置和重写某一项数据的方法。在Vue2中，有两种方式来注册自定义指令，全局注册和局部注册。 全局注册自定义指令需要使用`Vue.directive()`方法。该方法接收两个参数，第一个参数是字符串，表示我们需要注册的指令名称。第二个参数是一个对象，其中包含了多个回调钩子函数。这些钩子函数可以在指令的生命周期中执行不同的操作。每个钩子函数都会接收多个参数，可以访问到DOM节点以及绑定的value数据。 例如，我们可以通过下面的代码全局注册一个自定义指令： ```javascript Vue.directive('myDirective', { bind: function (el, binding, vnode) { // 在绑定时执行的操作 }, inserted: function (el, binding, vnode) { // 在被绑定元素插入父节点时执行的操作 }, // 其他钩子函数... }) ``` 使用全局注册的自定义指令可以在应用的任何地方使用。 另一种方式是局部注册自定义指令。这意味着你只能在特定的组件中使用该指令。局部注册可以在组件的`directives`选项中注册自定义指令。例如： ```javascript export default { directives: { myDirective: { bind: function (el, binding, vnode) { // 在绑定时执行的操作 }, inserted: function (el, binding, vnode) { // 在被绑定元素插入父节点时执行的操作 }, // 其他钩子函数... } }, // 组件的其他选项... } ``` 在上述代码中，我们将自定义指令`myDirective`注册到组件的`directives`选项中。这样，该指令只能在该组件中使用。 通过全局注册或局部注册自定义指令，你可以在Vue应用中自定义和配置特定的行为和功能。<span class="em">1</span> #### 引用[.reference_title] - *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_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值