<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自定义指令：directive</title>

    <script src="vue.js"></script>

</head>

<body>

<!--

    directive:

        bind  inserted:插入的  update

-->

<div id="demo">

    <h3 v-star="color">标题部分</h3>

    <input type="text" v-model="color" v-focus>

    <h1 v-hide="true">{{title}}</h1>

</div>

<script>

    new Vue({

        el: "#demo",

        data: {

            title: "百度一下就知道",

            color: "red"

        },

        directives: {

            star(el, bind) {

                var color = bind.value ? bind.value : 'red';

                el.style.cssText = "color:" + color;

            },

            focus: {

                inserted(el, bind) {

                    el.focus();

                }

            },

            hide(el,bind){

                if(bind.value){

                    el.style.cssText="display:none";

                }

            }

        }

    });

</script>

</body>

</html>

　　

051——VUE中自定义指令：directive的更多相关文章

  1. vue中自定义指令

    //vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...

  2. vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  3. vue中自定义指令的使用

    原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...

  4. Vue中自定义指令的使用方法！

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM ...

  5. Vue(九)---自定义指令(directive )

    1.无参数 自定义指令的方式:1. 使用Vue.directive 来自定义2. 第一个参数就是 指令名称 xart3. el 表示当前的html dom对象4. 在方法体内就可以通过 innerHT ...

  6. vue之自定义指令directive

    <template> <div> <input v-model="dir1" v-my-directive1="dir1"/> ...

  7. vue怎么自定义指令？？

    最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...

  8. vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）

    一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

  9. Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

    前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...

随机推荐

  1. python基础之递归、二分法

    一 递归 1. 必须有一个明确的结束条件2. 每次进入更深一层递归时,问题规模相比上次递归都应有所减少3. 递归效率不高,递归层次过多会导致栈溢出(在计算机中,函数调用是通过栈(stack)这种数据结 ...

  2. leetcode——Search for a Range 排序数组中寻找目标下标范围（AC）

    Given a sorted array of integers, find the starting and ending position of a given target value. You ...

  3. java-mybaits-00201-DAO-SqlSession使用范围

    1.SqlSession的使用范围 SqlSession中封装了对数据库的操作,如:查询.插入.更新.删除等. 通过SqlSessionFactory创建SqlSession,而SqlSessionF ...

  4. android唯一设备标识、设备号、设备ID的获取方法

    ##如何获取Android设备唯一ID? ###问题 每一个android设备都有唯一ID吗?如果有?怎么用java最简单取得呢? ###回答1(最佳) 如何取得android唯一码? 好处: 1.不 ...

  5. Windows2003 + IIS6 安装.Net FrameWork 4.0 兼容早期版本的测试

    看到文档说.net4的框架可以向下兼容2.0.3.0.3.5这几个版本,觉得是一件好事,以后服务器上就不用费时费力的安装 2.0.3.5之类的框架了.但是又觉得奇怪,2.0和3.5的框架都是很大的,为 ...

  6. eclipse导入Java源码

    eclipse导入Java源码 下载源码包(一般jdk都自带了, 我的没有) src.zip eclipse -> window -> preferences -> JAVA -&g ...

  7. Uva11374 Dijkstra

    机场快线是市民从市内去机场的首选交通工具.机场快线分为经济线和商业线两种,线路.速度和价格都不同,你有一张商业线车票,可以坐一站商业线,而其他时候,只能乘坐经济线.假设换乘时间忽略不计,你的任务是找一 ...

  8. python的构建工具setup.py

    一.构建工具setup.py的应用场景 在安装python的相关模块和库时,我们一般使用“pip install  模块名”或者“python setup.py install”,前者是在线安装,会安 ...

  9. iOS重签名脚本

    unzip xxx.ipa //解压ipa rm -rf Payload/ xxx.app/_CodeSignature //删除旧签名 cp newEmbedded.mobileprovision ...

  10. JAVA面试题整理（5）-数据库

    数据库 1.Oracle/mysql分页有什么优化 2.悲观锁.乐观锁 悲观锁(Pessimistic Concurrency Control,PCC):假定会发生并发冲突,屏蔽一切可能违反数据完整性 ...