<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>

<div id="app">

   <div>

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

    </div>

</div>

<script>

const app = new Vue({

  el: '#app',

  data:{

  dir1:'111',

dir2:'222'

  },

   directives:{

            myDirective1:function(val){

                console.log("===="+val)

            }

        }

})

</script>

</body>

</html>

vue directive demo的更多相关文章

  1. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  2. Vue.directive()的用法和实例

    官网实例: https://cn.vuejs.org/v2/api/#Vue-directive https://cn.vuejs.org/v2/guide/custom-directive.html ...

  3. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  4. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

  5. Vue directive 回调运用

    Vue的官方自定义directive,基本调用简洁如下: Vue.directive('my-directive', { bind: function () {},// 指令与被绑定元素第一次绑定时触 ...

  6. Vue.directive 自定义指令的问题

    1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor&q ...

  7. Vue.directive添加全局指令详解

    自定义指令创建: Vue.directive( 'mycolor(指令名称:推荐全部小写,驼峰命名会出现问题,看最后面)' , { bind:function(){}, //本例只介绍inserted ...

  8. Vue.directive注册指令

    指令定义函数提供了几个钩子函数(可选): vue指令的生命周期 bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定 ...

  9. Vue.directive自定义指令

    Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...

随机推荐

  1. Spring Boot 必须先说说 Spring 框架！

    现在 Spring Boot 非常火,各种技术文章,各种付费教程,多如牛毛,可能还有些不知道 Spring Boot 的,那它到底是什么呢?有什么用?今天给大家详细介绍一下. Spring Boot ...

  2. [暑假集训--数位dp]UESTC250 windy数

    windy定义了一种windy数. 不含前导零且相邻两个数字之差至少为22 的正整数被称为windy数. windy想知道,在AA 和BB 之间,包括AA 和BB ,总共有多少个windy数? Inp ...

  3. Nginx合并静态资源，以减轻web服务器压力

    Nginx concat模块由淘宝开发,并且淘宝已经在使用这个Nginx模块.这个模块类似于apache中的modconcat.如果需要使用它,需要使用两个?问号.Nginx concat通过合并静态 ...

  4. angular中关于文件引入

    var angular = require('angular'); module.exports = angular.module('app.mymodule2', []).controller('H ...

  5. Python struct 详解

    最近在学习python网络编程这一块,在写简单的socket通信代码时,遇到了struct这个模块的使用,当时不太清楚这到底有和作用,后来查阅了相关资料大概了解了,在这里做一下简单的总结. 了解c语言 ...

  6. PHP读取APK的包信息，包括包名，应用名，权限，LOGO等

    [转]PHP读取APK的包信息,包括包名,应用名,权限,LOGO等 声明本文转自: 原文链接:https://www.jb51.net/article/53780.htm: 感谢分享! <?ph ...

  7. Larevel5.1 打印SQL语句

    Larevel5.1 打印SQL语句 为了方便调试,开发时需要打印sql. 方法一(全局打开): SQL打印默认是关闭的, 需要在/vendor/illuminate/database/Connect ...

  8. (40)C#windows服务控制

    ServiceController类 可以使用 ServiceController 类连接到现有服务并控制其行为. 构造函数 1.ServiceController () ServiceControl ...

  9. k8s之nginx-ingress、 Daemonset实现生产案例

    上一篇中用node ip + 非80端口,访问k8s集群内部的服务.实际生产中更希望用node ip + 80端口的方式,访问k8s集群内的服务. # 修改mandatory.yaml中创建控制器部分 ...

  10. JavaSwing仿QQ登录界面，注释完善，适合新手学习

    使用说明: 这是一个java做的仿制QQ登录界面,界面仅使用一个类, JDK版本为jdk-11 素材包的名字为:素材(下载)请在项目中新建一个名字为“素材”的文件夹. 素材: https://pan. ...