首页 > 其他分享 >万象更新 Html5 - vue.js: vue 指令(自定义指令)

万象更新 Html5 - vue.js: vue 指令(自定义指令)

时间:2024-09-24 11:16:30浏览次数:9  
标签:vue 自定义 万象更新 webabcd 指令 Html5

源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - vue.js: vue 指令(自定义指令)

示例如下:

vue\directive\vcustom.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 指令(自定义指令)</title>
    <script src="../../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>

<div id="root">
    <!--使用自定义指令-->
    <div v-webabcd="128">自定义指令</div>
</div>

<script>
    var app = Vue.createApp({});

    // 定义一个自定义指令(注:定义的名称不包括 v- 前缀)
    // el - 指定绑定的元素
    // binding - 一个对象
    //   name - 指令名,不包括 v- 前缀
    //   value - 指令的绑定值(比如 v-webabcd="1 + 1" 其 value 为 2)
    //   expression - 指令的表达式,字符串类型(比如 v-webabcd="1 + 1" 其 expression 为 "1 + 1")
    //   arg - 指令的参数(比如 v-webabcd:abc 其 arg 为 "abc")
    //   modifiers - 指令的修饰符对象(比如 v-webabcd.x.y 其 modifiers 为 { x: true, y true })
    app.directive('webabcd', function (el, binding) {
        el.style.fontSize = binding.value + "px";
    });

    var vm = app.mount('#root');
</script>

</body>
</html>

源码 https://github.com/webabcd/Html5
作者 webabcd

标签:vue,自定义,万象更新,webabcd,指令,Html5
From: https://www.cnblogs.com/webabcd/p/18428758/html5_vue_directive_vcustom

相关文章

  • 万象更新 Html5 - vue.js: vue 组件 1
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-vue.js:vue组件1示例如下:vue\component\sample1.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>vue组件1</t......
  • 万象更新 Html5 - vue.js: vue 组件 2
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-vue.js:vue组件2示例如下:vue\component\sample2.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>vue组件2</t......
  • 万象更新 Html5 - vue.js: vue 路由基础
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-vue.js:vue路由基础示例如下:vue\router\sample1.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>vue路由基础</titl......
  • Vue组件使用/单个组件的生命周期
    props和$emitprops:用于父组件传递data数据给子组件,比如在index.vue中,data函数里面有个list数据,把它传给List组件(下图1),在List组件内用list属性来接收(下图2)$emit:事件触发,在index.vue中在两个子组件内传入了两个方法:adddelete。这俩方法作为父组件给子组件的两个......
  • 万象更新 Html5 - vue.js: vue 模板语法基础(MVVM, 插值, 指令等)
    源码https://github.com/webabcd/Html5作者webabcd万象更新Html5-vue.js:vue模板语法基础(MVVM,插值,指令等)示例如下:vue\basic.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>vue模板语法基础......
  • go基础-10.自定义数据类型
    在Go语言中,自定义类型指的是使用type关键字定义的新类型,它可以是基本类型的别名,也可以是结构体、函数等组合而成的新类型。自定义类型可以帮助我们更好地抽象和封装数据,让代码更加易读、易懂、易维护自定义类型结构体就是自定义类型中的一种除此之外我们使用自定义类型,还可......
  • 【开题报告】基于django+vue宿舍管理系统(论文+程序)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着高校规模的不断扩大和学生人数的持续增长,宿舍管理成为了高校日常管理中的一项重要且复杂的任务。传统的宿舍管理模式往往依赖于人工记......
  • 子比主题美化-右上角显示用户自定义头像
    前言使用子比主题的都会发现,在右上方不管用户有没有自定义过头像,都只会显示默认的头像,这就很不科学,也不够个性,所以就有了这个教程,让右上角显示用户自定义的头像效果对比修改前修改后教程开始宝塔面板路径:wp-content/themes/zibll/inc/functions/zib-header.php 156行-......
  • 【JS】Object.defineProperty与Proxy的对比并通过Vue2、3的实现证明Proxy性能优于Obje
    一、Object.defineProperty这里只是简单描述,具体请看另一篇文章:Object.defineProperty。Object.defineProperty是JavaScript中用于定义或修改对象属性的功能强大的方法。它可以精确地控制属性的行为,如是否可枚举、可配置、可写等。基本用法Object.defineProperty(obj......
  • vue实现点击按钮发出警报声
    Vue的音乐文件夹叫做assets,assets文件夹在Vue项目的根目录下。assets文件夹用于存放项目中使用的静态资源文件,包括图片、音乐、视频等。在assets文件夹中,可以创建一个单独的文件夹用于存放音乐文件,命名可根据需要自定义,一般而言命名为music或audio。音频文件:在这里免费下载  h......