vue 指令

最新推荐文章于 2023-04-13 23:14:01 发布
最新推荐文章于 2023-04-13 23:14:01 发布
阅读量603 收藏
点赞数
分类专栏： 前端个人笔记 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42094345/article/details/128435112
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>指令</title>
    <!-- vue2 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
    <div>
        <div v-hello="color">hello world</div>
    </div>
</div>
</body>
<script>
    // 指令，为了操作底层dom
    // Vue.directive("hello", {
    //     // 指令的生命周期函数
    //     // inserted第一次插入父节点中时触发
    //     inserted(el, binding) {
    //         // el dom节点 el只是个形参，参数名可以是自定义,
    //         // binding 指令的参数 参数名自定义
    //         console.log("inserted第一次插入父节点中时触发");
    //         // 加个背景色
    //         // el.style.background = red;
    //         el.style.background = binding.value;
    //     },
    //     // 每次更新时触发
    //     update(el, binding) {
    //         console.log("update,每次更新时触发");
    //         el.style.background = binding.value;
    //     },
    // });
    // 简写
    Vue.directive("hello", (el, binding) => {
        console.log("创建和更新都会执行......")
        el.style.background = binding.value;
    })

    // vue3名称有改变
    /***
     * created ----> 创建之后
     * beforeMount ------> 挂载前
     * mounted ------> 挂载后
     * beforeUpdate ------> 更新前
     * update ------> 更新后
     * beforeUnmount ------> 解绑前
     * unmounted ------> 解绑后
     *
     * 总结： 跟组件的生命周期差不多
     */
    new Vue({
        el: "#app",
        data: {
            color: "violet",
        },
    });
</script>
</html>
芳华汉服
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue指令
skr_Rany的博客
09-22 122
v-text 更新元素的 textContent <span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span> v-show 与v-if一样，v-show的真假控制的是css属性display，block和none <span v-show="false"></span> v-if 操作的时dom,当值为true，false时，分别销毁和创
Vue指令介绍及使用
AI_huihui的博客
11-06 2193
一、什么是指令 在 vue 中提供了些对页面和数据更方便的输出方式，实质上就是特殊的 html 标签属性，指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定, 特点: v- 开头。 二、插值表达式 在dom标签中直接插入内容，又叫声明式渲染/文本插值。 语法：{{ 表达式 }} 注意：dom中插值表达式赋值, vue的变量必须在data里声明 三、vue中常用 v-...
vue指令大全
qq_43235503的博客
04-13 1584
vue指令大全
Vue指令的钩子函数使用方法
08-31
Vue指令的钩子函数使用方法 Vue指令的钩子函数使用方法是指在Vue框架中自定义指令时，使用钩子函数来定义指令的生命周期。钩子函数是指令的生命周期中重要的一部分，它们可以帮助开发者更好地控制指令的行为。 一...
简单学习vue指令directive
09-01
在本文中，我们将深入学习Vue指令，特别是`directive`的使用方法。 首先，让我们了解如何注册指令。Vue提供了两种注册指令的方式：全局注册和局部注册。全局注册的指令可以在整个应用中使用，通过`Vue.directive()`...
Vue 指令实现按钮级别权限管理功能
10-17
主要介绍了Vue 指令实现按钮级别权限管理功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
ppt课件-第3章 Vue指令.zip
03-22
在这个“第3章 Vue指令”的PPT课件中，我们可以期待深入学习Vue指令的各个方面。 1. **Vue指令概述**：Vue指令是Vue.js中用于操纵视图的特殊属性，以响应数据模型的变化。它们以`v-`开头，如`v-if`, `v-for`, `v-...
Vue自定义指令写法与个人理解
01-19
什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来...
vscode导入项目并启动
热门推荐
努力努力再努力
02-12 7万+
打开vscode 如果之前没有添加过项目 可以点添加项目 也可以直接拖拽进去都是可以的 之前如果添加过 可以亦可以直接拖进去 但是只要项目之间互不干扰就可以。导入依赖（cnpm需要安装：https://blog.csdn.net/qq_42094345/article/details/100978092）如果导入失败 要么是node安装失败 要么是脚手架没搞好 或者项目有问题 好好排查一下 先看环境有没有装好 再看看项目配置啥的有没有问题。二、选择项目目录右键打开cmd（在终端中打开）
yrm的安装和使用
努力努力再努力
10-27 1万+
yrm 是一个 yarn源管理器，允许你快速地在yarn源间切换 安装 npm install -g yrm --registry=https://registry.npm.taobao.org 列出当前可用的所有镜像源 yrm ls 使用淘宝镜像源 yrm use taobao 测试访问速度 yrm test taobao 查看当前使用的源 npm config get registry // 查看npm当前镜像源 yarn config get registry // 查看yar
yarn 安装依赖包报错：Resolving packages... error An unexpected error occurred: “https://registry.npm.taobao.
努力努力再努力
10-29 5450
原因： https 协议走不通，得关掉ssl验证 方式：yarn config set strict-ssl false
npm install 报错 :npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR! errno UNABLE_TO_VERIFY_LEA 解决
努力努力再努力
10-29 4196
错误： npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR! errno UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR! request to https://registry.npmjs.org/express failed, reason: unable to verify the first certificate 原因： 无法验证第一证书，因为npm install走的是https协议，需要通过数字证书来保
vscode文件过滤
努力努力再努力
10-19 2497
【代码】vscode文件过滤。
小白windows下载安装node+vue
努力努力再努力
09-18 2094
最近用到了vue需要搭建nodejs和脚手架很麻烦昨天一下午加上今天一上午踩了很多坑终于弄好了把步骤总结了一下分享给大家。。。衷心的祝大家少踩坑。。这篇只是搭建环境需要用vscode来开发如果有错误可以跟我说 **下面开始======** 1、node官网下一个node.js 64-bit 的安装包https://nodejs.org/en/download/ 2、安装 使用默认安装就...
linux nginx 外部访问不了 本地可以： 解决
努力努力再努力
10-29 2073
关闭防火墙：systemctl stop firewalld
记一次前端启动报错npm ERR! 12@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.c
努力努力再努力
10-27 1809
问题： npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! 12@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the 12@1.0.0 dev script. npm ERR! This is probably not a pro
centos nodejs&npm版本太低怎么办？
努力努力再努力
10-16 1463
卸载你的nodejs 和 npm yum remove nodejs npm -y 然后进行以下操作： #以10.x 版本为例，要9.x的话只要把该命令中10.x改为9.x就好 curl --silent --location https://rpm.nodesource.com/setup_10.x | bash - yum install nodejs -y #查看版本 node -v && npm -v ...
vue指令和用法
最新发布
05-30
以下是常见的Vue指令及其用法： 1. v-bind: 绑定数据到DOM元素的属性上，例如绑定src属性、href属性等。 2. v-if: 根据条件表达式来控制DOM元素的显示与隐藏。 3. v-for: 遍历数组或对象，生成相应的DOM元素。 4...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

芳华汉服

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值