vue 中自定义指令改变data中的值
通过局部自定义指令实现了一个拖动的指令
html:
<div style="position:absolute;width:100px;height:100px;border:1px solid red" v-drag="{set:set}"></div>
script:
methods:{
set(x,y){
this.data.x=x;
this.data.y=y;
}
},
directives:{
// 拖动的自定义指令
drag(el,binding){
//el为拖动的元素
var oDiv =el;
oDiv.onmousedown = function(e){
e.preventDefault();
e.stopPropagation();
var disX = e.offsetX;
var disY = e.offsetY;
document.onmousemove = function(e){
e.preventDefault();
e.stopPropagation();
var x=e.pageX-disX;
var y=e.pageY-disY
oDiv.style.left=x
oDiv.style.top=y
// 通过传参的形式，将methods中的函数传进来，以此来改变data中的值
binding.value.set(x,y)
};
document.onmouseup = function(){
document.onmousemove=null;
document.onmouseup=null;
};
};
}
},
以上所述是小编给大家介绍的vue 中自定义指令改变data中的值，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
简介 除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意，在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。下面这个例子将聚焦一个 input 元素，像这样： Vue.directive('focus', { inserted: function (el)
-
1. 前言 本小节我们介绍 Vue 中的自定义指令。包括全局指令的注册、局部指令的注册、指令钩子函数的使用以及动态指令传参。其中，指令钩子函数和动态指令参数是本节的难点。 同学们需要充分理解每个指令钩子函数执行的时机、对动态指令参数多加练习才能对指令的使用得心应手。 2. 慕课解释 Vue 除了提供了默认内置的指令外，还允许开发人员根据实际情况自定义指令，它的作用价值在于当开发人员在某些场景下需要
-
创建自定义指令 第一步，创建一个自定义命令类文件，新建application/common/command/Hello.php <?php namespace app\common\command; use think\console\Command; use think\console\Input; use think\console\input\Argument; use think\con
-
自定义指令可以使用 macro 指令来定义， 这是模板设计者所关心的内容。 Java程序员若不想在模板中实现定义指令，而是在Java语言中实现指令的定义， 这时可以使用 freemarker.template.TemplateDirectiveModel 类来扩展 (请参考 后续章节)。 基本内容 宏是有一个变量名的模板片段。可以在模板中使用宏作为自定义指令， 这样就能进行重复性的工作。例如，创建
-
本文向大家介绍Vue的土著指令和自定义指令实例详解，包括了Vue的土著指令和自定义指令实例详解的使用技巧和注意事项，需要的朋友参考一下 1.土著指令 当我开始学习Vue的时候，看官网的时候看到了“指令”两个字。我愣住了，what？指令是啥啊？后来继续往下看，像这种什么“v-for”“v-show”“v-if”都叫做指令。等到后来Vue玩的差不多了，开始写项目的时候发现，常见的指令也就那么几个，
-
本文向大家介绍vue自定义指令directive的使用方法，包括了vue自定义指令directive的使用方法的使用技巧和注意事项，需要的朋友参考一下 Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。 在开始之前，我们需要明确一点，自定义指