Vue 自定义指令练习

Vue.directive(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象

取值:

 <div v-demo="{ color: ‘white‘, text: ‘hello!‘ }"></div>

Vue.directive("demo", function (el, binding) {
        alert(binding.value.color);
        alert(binding.value.text);
    })

实例:

用自定义指令实现全选和取消全选
<div id="app">
    <ul>
        <li v-for="item in list">
            <input type="checkbox" v-sel="item.checked" />  {{item.name}}
        </li>
    </ul>
    <br />
    {{list}}
    <br />
    <button v-on:click="clickall(true)">全选</button>
    <button v-on:click="clickall(false)">取消全选</button>

</div>
<script type="text/javascript">
    Vue.directive("sel", function (el, v) {
        if (v.value) {
            $(el).attr("checked", "checked");
        } else {
            $(el).removeAttr("checked");
        }

    });

    var vm = new Vue({
        el: "#app",
        data: {
            list: [{ name: "足球", checked: true }, { name: "篮球", checked: false }, { name: "乒乓球", checked: true }]
        },
        mounted:function() {
        }
        ,
        methods: {
            clickall: function (flag) {
                if (flag) {
                    this.list.forEach(function (v, i) {
                        v.checked = true;
                    });
                } else {
                    this.list.forEach(function (v, i) {
                        v.checked = false;
                    });
                }
            }
        }
    });
</script> 

高级功能:

    <div v-pin:true.left.bottom="true"></div>

   Vue.directive("pin", function (el, binding) {

        var pinned = binding.value;//取引号中的值
        var warning = binding.arg;//取:后面的值
        var position = binding.modifiers;//取.后页的参数

        for (var key in position){
            if (position[key]) {
                el.position[key] = ‘10px‘;
            }
        }
    });
时间: 2024-10-27 19:55:54

Vue 自定义指令练习的相关文章

vue自定义指令(Directive中的clickoutside.js)的理解

.array p { counter-increment: longen; margin-left: 10px } .array p::before { content: counter(longen) "." } .alink { font-size: 16px; color: blue } 阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DO

vue自定义指令

什么是指令? 指令 (Directives) 是带有 v- 前缀的特殊属性. 它可以写在DOM元素上,对html进行操作.常用的指令比如有:v-if,v-else,v-show,v-for等.这些都是官方直接给定的,另外Vue也允许注册自定义指令,有时这很有用. 自定义指令方法 自定义一个指令很简单,官网给出一个简单的例子,自定义一个聚焦指令v-focus: // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中

vue自定义指令clickoutside使用以及扩展用法

vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如要求选择器的弹出框中,增加搜索过滤(跟目前element的输入建议不太一样).于是想说说之前修改element组件,并定制为业务组件过程中遇到的问题. ps:因为对某些组件改动很大,所以是直接拷贝了一份源码,然后再进行修改,但是这样会遇到挺多问题,建议对于vue组件如果改动不大,只是简单功能扩展,就

使用vue自定义指令合并iview表格单元格

使用vue自定义指令合并iview表格单元格, 我们在开发过程中发现iview表格组件,官网只提供了合并表头的demo,并没有合并表格中的单元格. ivew表头分组:https://www.iviewui.com/components/table#BTFZ 效果图如下: 具体实现思路,通过vue自定义属性来操作dom,达到我们想要的效果: 代码如下: demo.vue  表格页面 <template> <div class="demo"><Table :c

vue 自定义指令

除了默认设置的核心指令(v-model和v-show),vue也允许注册自定义指令.在vue2.0版本中,代码复用的主要形式和抽象是组件--然而,有的情况下,你仍然需要对DOM元素进行底层操作,这时候就会用到自定义指令. 当页面加载时,元素将获得焦点(注意:autoFocus在移动版safari中不工作),事实上,你访问后,还没点击任何内容,input就获得了焦点.现在让我们完善这个指令: // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑

vue 自定义指令directive

//自定义指令:directive 的传参--可以数据也可以是字符串 Vue.directive('scroll', function (binding) { window.addEventListener('scroll', function () { if (document.body.scrollTop + window.innerHeight >= document.body.clientHeight-20) { var fnc = binding; fnc(); } }) }); 调用

vue自定义指令的创建和使用

一.自定义指令的创建和使用 Vue自带的指令很多,v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...但是这些指令都是比较偏向于工具化,有些时候在实现具体的业务逻辑的时候,发现不够用,如何来自定义指令. 1.自定义指令①创建 new Vue({ directives:{ change:{ bind:function(){}, update:function(){}, unbind:function(){}

Vue自定义指令获取DOM元素

我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export default { data(){ return{ msg : 'oldMsg' } } methods : { changeMsg : function(){ this.msg = 'newMsg' } } } 当调用了changeMsg方法,msg被修改为 ' newMsg ' ,我们可以把这次修改理解为数据

Vue自定义指令和路由

一.自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一个全局指令 v-focus,该指令的功能是在页面加载时,元素获得焦点: <div id="app"> <p>页面载入时,input 元素自动获取焦点:</p> <input v-focus> </div> <script> // 注册一个全局自定义指令 v-focus Vue.direct