vue15 自定义元素指令、标签指令

最新推荐文章于 2024-08-15 09:15:06 发布
最新推荐文章于 2024-08-15 09:15:06 发布
阅读量90 收藏
点赞数
文章标签： javascript ViewUI 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
    </style>
    <script src="vue.js"></script>
    <script>
        Vue.directive('red',function(){
            this.el.style.background='red';//this是vm对象，
        });
        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    msg:'welcome'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <span v-red>  <!-- 自定义指令，v-开头，属性指令-->
            asdfasd
        </span>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
    </style>
    <script src="vue.js"></script>
    <script>
        Vue.directive('a-red',function(){//directive扩展指令，
            this.el.style.background='red';
        });
        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    msg:'welcome'
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <span a-red>
            asdfasd
        </span>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        Vue.directive('red',function(){
            this.el.style.background='red';
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    msg:'welcome'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <span v-red>
            asdfasd
        </span>
        <span v-red>
            asdfasd
        </span>
        <span v-red>
            asdfasd
        </span>
    </div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        Vue.directive('red',function(color){
            this.el.style.background=color;
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    a:'blue'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <span v-red="a"> <!-- 传递参数 -->
            asdfasd
        </span>
    </div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        Vue.directive('red',function(color){
            this.el.style.background=color;
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box'
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <span v-red="'blue'"> <!-- 传递参数 -->
            asdfasd
        </span>
    </div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        Vue.directive('red',{
            bind:function(){
                this.el.style.background='red';
            }
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box'
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <span v-red>
            asdfasd
        </span>
    </div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
    </style>
    <script src="vue.js"></script>
    <script>
        Vue.directive('drag',function(){
            var oDiv=this.el;//div
            oDiv.onmousedown=function(ev){
                var disX=ev.clientX-oDiv.offsetLeft;
                var disY=ev.clientY-oDiv.offsetTop;

                document.onmousemove=function(ev){
                    var l=ev.clientX-disX;
                    var t=ev.clientY-disY;
                    oDiv.style.left=l+'px';
                    oDiv.style.top=t+'px';
                };
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                };
            };
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    msg:'welcome'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
        <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
    </div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        zns-red{
            width:100px;
            background: black;
            height:100px;
            display: block;
        }
    </style>
    <script src="vue.js"></script>
    <script>  //元素指令 用的少
        Vue.elementDirective('zns-red',{
            bind:function(){
                this.el.style.background='red';
            }
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    a:'blue'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <zns-red></zns-red>
    </div>

</body>
</html>

 

vue-custom-element：Vue自定义元素-Vue.js的Web组件自定义元素
02-06
目录 演示版 您可以在查看Vue-custom-element演示 安装 NPM npm install vue-custom-element --save import vueCustomElement from 'vue-custom-element' Vue . use ( vueCustomElement ) ; 要使用vue-cli构建Web组件，必须使用以下命令： vue-cli-service build --target lib --name your-component-name src/main.js 注意：命令vue-cli-service build --ta
Vue自定义弹窗指令的实现代码
10-18
在Vue.js框架中，自定义指令是一种扩展Vue组件行为的方式，它们可以被添加到任何元素上。这篇文章主要讲解了在Vue2.0版本中如何创建一个自定义弹窗指令，使得具有该指令的标签在被点击时能够显示一个弹窗。 ### ...
vue与自定义元素的关系
weixin_33979203的博客
03-02 308
你可能已经注意到 Vue.js 组件非常类似于自定义元素——它是 Web 组件规范的一部分。实际上 Vue.js 的组件语法参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是，有几个关键的不同： Web 组件规范仍然远未完成，并且没有浏览器实现。相比之下，Vue.js 组件不需要任何补丁，并且在所有支持的浏览器（IE9 及更高版本）之下表现一致。必要时，Vue.js...
Vue自定义元素组件库教程
最新发布
gitblog_00970的博客
08-15 280
Vue自定义元素组件库教程 vue-custom-element项目地址:https://gitcode.com/gh_mirrors/vu/vue-custom-element 本教程将引导您了解并使用从GitHub获取的karol-f/vue-custom-element开源项目。此项目旨在让您能够轻松创建和集成Vue自定义元素到您的Web应用中。以下是关于项目的关键组成部分的详细介绍： 1...
vue 交互 HTML,Vue 自定义元素交互
weixin_32940203的博客
06-20 484
#概览非兼容：自定义元素白名单现在在模板编译期间执行，应该通过编译器选项而不是运行时配置来配置。非兼容：特定 is prop 用法仅限于保留的 标记。新增：有了新的 v-is 指令来支持 2.x 用例，其中在原生元素上使用了 v-is 来处理原生 HTML 解析限制。#自主定制元素如果我们想添加在 Vue 外部定义的自定义元素 (例如使用 Web 组件 API)，我们需要“指示”Vue 将其视为...
Vue 3.0 自定义元素交互
2201_75866484的博客
03-17 514
提示：本节仅影响直接在页面的 HTML 中写入 Vue 模板的情况。在 DOM 模板中使用时，模板受原生 HTML 解析规则的约束。如果我们想添加在 Vue 外部定义的自定义元素 (例如使用 Web 组件 API)，我们需要“指示”Vue 将其视为自定义元素。特殊 prop 的使用是在模拟 native attribute 在浏览器中普遍可用之前的作用。需要注意的是，运行时配置只会影响运行时模板编译——它不会影响预编译的模板。的 Vue 组件，这将阻止上面提到的自定义内置元素的原生使用。
vue全局自定义指令-元素拖拽的实现代码
10-17
本文介绍了如何利用Vue的全局自定义指令功能来实现元素的拖拽操作。通过编写自定义指令，将拖拽逻辑封装起来，可以在整个Vue应用中复用该功能。实现拖拽时，需要掌握相关的DOM属性和事件，以及Vue指令的生命周期函数...
详解在Vue中通过自定义指令获取dom元素
12-08
总结来说，Vue自定义指令为我们提供了一种灵活的方式来操作DOM，即使在不使用构建工具的小型项目中，也能避免不必要的组件化。通过结合自定义指令和Vue实例的`data`，我们可以安全地存储和访问DOM元素，从而在需要的...
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
10-18
自定义指令是Vue.js灵活和强大的体现之一，通过掌握自定义全局指令及其生命周期，开发者可以更好地控制DOM操作，实现复杂且高效的应用逻辑。希望本文能帮助您在实际项目中更有效地使用Vue2的自定义指令。
Vue自定义指令封装节流函数的方法示例
08-27
Vue自定义指令封装节流函数的方法示例 今天，我们来讨论 Vue 自定义指令封装节流函数的方法示例。节流函数是一种常用的前端开发技术，用于避免过多的性能消耗。在《JavaScript高级程序设计》一书中，就有一个典型的...
Vue：把组件作为自定义元素来使用以及Identifier ' simple_couter' is not in camel case问题解决
灿灿大王搭建的黄金屋
05-28 1万+
这里介绍两种组件调用的方法： 1、直接在当前组件（HelloVue.vue）中使用Vue.component插入一个子组件button-counter： <template> <div id="vue"> <div id="components-demo"> <button-counter></button-coun...
05Vue - Vue.js 入门（与自定义元素的关系）
阿甘兄
07-26 491
你可能已经注意到 Vue.js 组件非常类似于自定义元素——它是 Web 组件规范的一部分。实际上 Vue.js 的组件语法参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是，有几个关键的不同： 1.Web 组件规范仍然远未完成，并且没有浏览器实现。相比之下，Vue.js 组件不需要任何补丁，并且在所有支持的浏览器（IE9 及更高版本）之下表现一致。必要时，Vue.j...
vue中自定义属性
weixin_33691817的博客
04-12 2068
<div v-bind:id="name"></div> //v-bind:id="变量" or :id="变量" 转载于:https://www.cnblogs.com/lanshu123/p/10693590.html
vue如何获取自定义元素属性参数值的方法
coldriversnow的专栏
04-13 5354
偶尔还是会陷入到DOM操作上面去，其实你应该关心的是数据传递，而不是操作DOM。如果你是想获取data-num的数据，可以这样写： <span @click="getData($event,'21')">55</span> getData:function (e,num) { console.log(num) } 这样就可以取到这个值了，如果你是确实想操作DOM，那你可以这样写： <span data-num="21" ref="dataNum" @c
vue 自定义标签页
秋殇阁
12-19 9524
本篇文章我们通过以前学习过的知识来构建一个自己的标签页组件。 首先我们创建一个基于vue的项目，我用的IDE是webstorm。 创建好的工程目录结构： 我们先来分析一下我们需要做哪些工作，常见的标签页就像下面的图片： 大家可以看到标签页的最上边是我们的标题区域，而下面则是我们对应的内容区域。 第一眼看到这个布局，我就在想这个好像没有什么难度的，标题栏我用v-for渲染出来，下面的内容有几个...
vue.js自定义标签(自定义组件)
热门推荐
GoodIdea
06-24 1万+
分为三个部分:1.template模版：123456&lt;script type="text/x-template" id="todo-form-template"&gt;    &lt;form v-on:submit.prevent="addtodo(newtodo)"&gt;        &lt;input type="text" v-model="newtodo.ti
Vuejs如何给元素添加自定义属性
qq_35149546的博客
11-02 4717
1.Vuejs如何给元素添加自定义属性
Vue2.0自定义指令开发技巧与实例合集
资源摘要信息: "Vue自定义指令合集（Vue2.0版本）" 1. Vue.js简介 Vue.js是一个流行的JavaScript框架，用于构建用户界面和单页应用程序（SPA）。它由尤雨溪（Evan You）创建，并且遵循MVVM（Model-View-ViewModel）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值