Vue笔记(七)内置指令与自定义指令

最新推荐文章于 2022-04-28 01:31:08 发布
最新推荐文章于 2022-04-28 01:31:08 发布
阅读量185 收藏
点赞数
分类专栏： # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36154832/article/details/104630114
版权
常用内置指令
 
  •     v-show : 通过控制 display 样式来控制显示/隐藏
  •     v:text : 更新元素的 textContent
  •     v-html : 更新元素的 innerHTML
  •     v-if : 如果为 true, 当前标签才会输出
  •     v-else: 如果为 false, 当前标签才会输出到页面
  •     v-for : 遍历数组/对象
  •     v-on : 绑定事件监听, 一般简写为@
  •     v-bind : 强制绑定解析表达式, 可以省略 v-bind
  •     v-model : 双向数据绑定
  •     ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
  •     v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

自定义指令
1) 注册全局指令
Vue.directive('my-directive', function(el, binding)
{ el.innerHTML = binding.value.toupperCase() })

2) 注册局部指令
directives : { 'my-directive' : { bind (el, binding)
{ el.innerHTML = binding.value.toupperCase() } } }

3) 使用指令 v-my-directive='xxx'

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/vue.min.js"></script>
    <style>
        [v-cloak] {
            display: none
        }
    </style>
</head>

<body>
    <div id="test">
        <p v-text="url"></p>
        <p v-html="url"></p> <img :id="myid" :src="imageSrc">
        <p><span ref="message">atguigu.com</span> <button @click="showMsg">显示左侧文本</button> </p>
        <p v-cloak>{{url}}</p>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.19.0/moment.js"></script>
<script>
    alert('模拟加载慢') 
    new Vue({
        el: '#test',
        data: {
            url: '<a href="http://www.atguigu.com">尚硅谷</a>',
            myid: 'abc123',
            imageSrc: 'http://cn.vuejs.org/images/logo.png'
        },
        methods: {
            showMsg: function () {
                alert(this.$refs.message.textContent)
            }
        }
    })
</script>

</html>

 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/vue.min.js"></script>
</head>

<body>
    <div id="demo1">
        <p v-upper-text="msg"></p>
        <p v-lower-text="msg"></p>
    </div>
    <div id="demo2">
        <p v-upper-text="msg2"></p>
        <p v-lower-text="msg2"></p>
        <!--局部指令, 此处不能使用-->
    </div>
</body>
<script>
    //注册全局指令 
    Vue.directive('upper-text', function (el, binding) {
        el.innerHTML = binding.value.toUpperCase()
    })
    new Vue({
        el: '#demo1',
        data: {
            msg: 'NBA love this game!'
        },
        directives: { // 注册局部指令 
            'lower-text': {
                bind(el, binding) {
                    el.innerHTML = binding.value.toLowerCase()
                }
            }
        }
    })
    new Vue({
        el: '#demo2',
        data: {
            msg2: 'I Like You'
        }
    })
</script>

</html>

 

 
 
 
钦拆大仁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【Vue】基础系列（十一）Vue指令-常用内置指令-自定义指令-全局指令-局部指令
YK菌的博客
01-25 1816
学习Vue常用内置指令与自定义指令
Vue 通过自定义指令回顾v-内置指令(小结)
12-12
Vue.js 的各种指令（Directives）更加方便我们去数据驱动 DOM，例如 v-bind、v-on、v-model、v-if、v-for、v-once 等内置指令，这些指令的职责就是当表达式改变时将某些行为应用到 DOM 上，尽量不去操作增删改 DOM。通过了解如何去自定义指令，可以想象内置指令是如何完成的。 内置指令 指令名称 描述 使用 v-model 绑定数据 <\input v-model=”message”> v-text 输出文本,不能解析标签 <\p v-text=”message”></p> v-html 输出文本,可解析标签 <\p v-ht
vue内置指令、自定义指令及自定义过滤器
weixin_30279751的博客
07-25 131
内置指令 指令名称 描述 使用 v-model 绑定数据 <\input v-model="message"> v-text 输出文本,不能解析标签 <\p v-text="message"></p> v-html 输出文本,可解析标签 <\p v-html="message">/p> v-once 只绑定一次数据 &...
vue内置指令与自定义指令
weixin_30457551的博客
05-11 145
一、内置指令 1、v-bind：响应并更新DOM特性；例如：v-bind:href v-bind:class v-bind:title v-bind:bb 2、v-on：用于监听DOM事件； 例如：v-on:click v-on:keyup 3、v-model：数据双向绑定；用于表单输入等；例如：<input v-model="message"> 4、v-show：条件...
Vue中的内置指令+自定义指令
Pig-pig-pig的博客
04-28 1208
一、内置指令 我们已经学习了 v-bind v-on的指令， 他们都是内置指令 1、回顾 2、v-text 注意1：v-text会替换掉标签里的内容 注意2： v-text不能解析标签 v-text总结 3、v-html指令 3.1 简介 3.2 安全性问题 使用cookie-editor从Google浏览器偷取cookie信息 来到火狐浏览器，再通过cookie-editor导入，刷新页面，即可登录进去了 伪造两个cookie来演示安全性问题 ...
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
10-17
Vue内置了一些指令，如`v-text`和`v-html`，它们用于改变元素的文本内容或HTML内容。`v-text`会覆盖元素的所有子节点，而`v-html`则会将内容解析为HTML。 总的来说，Vue.js是一个强大且灵活的前端框架，它的核心...
Vue笔记，Vue笔记，Vue笔记
07-18
Vue笔记主要涵盖了从基础到进阶的各种Vue知识，通过一系列的学习日程，旨在帮助开发者深入理解和熟练掌握Vue框架。 在"Day 01"，通常会介绍Vue的基础概念，包括Vue实例的创建、模板语法、数据绑定（如`v-bind`和`v-...
【狂神说】Vue笔记（全部完整）.zip
01-22
3. **指令系统**：Vue提供了丰富的内置指令，如`v-if`、`v-else`、`v-for`、`v-show`等，用于控制DOM的条件渲染和循环渲染。 4. **组件化**：Vue的核心是组件系统，允许开发者将UI拆分为可复用的部件。组件可以拥有...
Vue笔记个人课程.zip
08-28
这篇“Vue笔记个人课程”旨在帮助初学者掌握Vue的核心概念和技术，通过案例实践来提升编程技能。 1. **Vue的基本概念** - **Vue实例**：Vue应用的核心就是Vue实例，它是Vue构造函数的产物，包含了Vue的所有选项，...
vue2+vue3学习笔记
02-20
内置指令与自定义指令 Vue 提供了多种内置指令，如 `v-bind`、`v-model` 等。也可以自定义指令来满足特定的需求。 minin minin 是一个小型的 Vue 项目，用于快速构建 Vue 应用程序。 todolist 编辑功能 ...
Vue的14个内置指令、自定义指令和5个指令钩子函数
dz13271116886的博客
08-18 1004
声明：部分内容来自vue官方文档或网络。 一、从Vue官方文档中可以了解Vue的14个内置指令，如表格所示： 序号 指令代码 作用 1 v-text 更新元素的 textContent。 2 v-html 更新元素的 innerHTML。 3 v-show 根据表达式之真假值，切换元素的 display CSS 属性。 4 v-if 根据表达式的值的真假条件渲染元素。 ...
Vue自定义指令 「干货」
More_Action的博客
12-16 403
在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。 Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。 批量注册指令，新建 directives/index.js 文件 import copy from '...
10分钟，从0到1学会Vue内置指令与自定义指令（图文并茂版）
高大志leo的博客
01-17 3371
目录 前言 正文 Vue指令的含义 Vue指令的特点 Vue内置指令 v-text v-html v-show v-if v-else v-else-if v-for v-on v-bind v-model v-slot v-pre v-cloak v-once v-memo v-is Vue自定义指令 全局自定义指令 注册局部指令 钩子函数 钩子函数参数 前言 Vue指令无论是在面试中还是在工作中，都是高频知识点。因此，学会Vue指令非常有必要，本文
Vue_(组件)自定义指令
weixin_30700977的博客
02-26 395
　　Vue.js自定义指令　　传送门 　　自定义指令：除了内置指令，Vue也允许用户自定义指令 　　注册指令：通过全局API Vue.directive可以注册自定义指令 　　自定义指令的钩子函数参数：自定义指令的钩子函数可以传递4个参数，分别是el、binding、vnode、oldVnode 　　Learn 　　　　一、自定义指令钩子函数 　...
Vue011_ 内置指令与自定义指令
乔治大哥的博客
12-30 250
内置指令与自定义指令 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页面 4) v-else: 如果为 false, 当前标签才会输出到页面 5) v-show : 通过控制 display 样式来控制显示/隐藏 6) v-for : 遍历...
Vue.js的自定义指令实现
DOM曼珠沙华的博客
06-16 552
直接看vue.js自定义指令官网 自定义指令产生的原因： 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。如输入框自动聚焦的例子。 当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态
工作中 9 成概率会用到的 8 个 Vue 自定义指令，十分实用！
全栈修炼
12-18 572
作者：lzg9527https://juejin.cn/post/6906028995133833230Vue 自定义指令在 Vue，除了核心功能默认内置的指令 ( v-model 和 ...
Angular中的内置指令和自定义指令
Wang的专栏
05-05 9803
NG中的指令，到底是什么(what)？ 为什么会有(why)？以及怎样使用(how)？ What：   在NG中，指令扩展HTML功能，为 DOM 元素调用方法、定义行为绑定数据等。 Why：    最大程度减少DOM操作，实现数据绑定，与业务逻辑进行交互。 How：    指令主要分为两种：内置指令和自定义指令，通过下面的例子，简单记录一下如何去使用。 内置
vue 插入dom_vue: 自定义指令
weixin_35208293的博客
01-26 1546
内置指令v-html、v-on。 v-是值这是特殊的vue的指令，html是值增加html元素，on是值绑定事件。自定义指令:官方文档: https://cn.vuejs.org/v2/guide/custom-directive.htmlVue.directive()定义全局指令在入口文件main.js中第一个参数: 定义指令名字第二个参数: 是对象形式的配置项，有5个钩子函数 第...
vue2和vue3的自定义指令
最新发布
03-09
在Vue.js中，自定义指令是一种扩展Vue.js功能的方式，可以用于在DOM元素上添加特定的行为。 在Vue.js 2中，自定义指令通过`Vue.directive`方法来定义。自定义指令可以用于操作DOM元素、监听事件、修改样式等。例如...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值