<div id="app">
<input type="text" v-limit.3="msg" v-focus>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
Vue.directive("focus",{
/* 方法一*/
/*
bind(el){
Vue.nextTick(function(){ // 在dom元素执行完之后执行
el.focus();
});
}*/
/* 方法二 */
inserted(el){ //绑定元素插入父节点时调用
el.focus();
}
}); Vue.directive("limit",function(el,bindings,vnode){
/*
el:元素
bindings:元素绑定的值
vue dom的更新是异步的
*/
console.log(el);
console.log(bindings);
console.log(vnode);
let [,len] = bindings.rawName.split(".");
/*思想就是 把在文本框输入的值手动改到虚拟dom中,在虚拟dom 中改变 vlaue的值*/
let ctx = vnode.context;
el.addEventListener("input",(e)=>{
let val = e.target.value.slice(0,len)
ctx[bindings.expression] = val;
console.log("ctx:",ctx[bindings.expression]);
el.value = val;
});
// el.value = ctx[bindings.expression].slice(0,len);
}); /*
Vue.directive("limit",{
//初始化的时候绑定
bind(el,bindings,vnode) {
let ctx = vnode.context;
ctx[bindings.expression]= el.value.slice(0,5);
},
//数据更新的时候绑定
update(el,bindings,vnode) {
let ctx = vnode.context;
ctx[bindings.expression]= el.value.slice(0,5);
}
});
*/
let vm = new Vue({
el:"#app",
data:{
msg:"hello vue"
}
});
</script>

vue基础----自定义组件directive ,bind,update,insert的更多相关文章

  1. 四、vue基础--自定义组件

    1.语法:Vue.component("组件名字",{data,template}),代码如下: a. data: 必须是一个函数,有一个返回值.和vue里面的使用方法一样 b. ...

  2. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  3. 【VUE】自定义组件

    [VUE]自定义组件 转载: ============================================ ======================================== ...

  4. Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

    Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...

  5. vue之自定义组件

    除了核心功能默认内置的指令外,vue也允许用户注册自定义指令.虽然在vue2.0中,代码复用和抽象的主要形式是组件,但是有些情况下,我们仍需要对普通DOM元素进行底层操作,这个时候就需要用到自定义指令 ...

  6. vue的自定义组件和组件传值

    <div id="app"> <div>{{pmessage}}</div> //父组件 <child :message="pm ...

  7. vue 相邻自定义组件渲染错误正确的打开方式

    话不多说看问题: 当封装自定义组件时例如(自定义下拉列表)两个相同的组件在多次v-if变化时偶尔会发生渲染错误,明明赋值正确但是组建中的ajax方法可能返回的数据乱掉,或者其他神逻辑错误. 经过查询发 ...

  8. 编程小白入门分享五:Vue的自定义组件

    前言 上篇博客简单介绍了vue,本篇博客要在对vue有一定了解后,才可以比较容易理解自定义组件.想要封装好一个组件,一定要熟练掌握这三个技能,父组件 -> 子组件传值(props).子组件 -& ...

  9. vue基础:组件的创建方式和组件的data值

    vue组件是什么: 组件是可复用的 Vue 实例,组件可以进行任意次数的复用 vue组件创建方式有3种: //第一种创建组件的方式// Vue.extend创建全局组件var com1 = Vue.e ...

随机推荐

  1. iOS宇宙大战游戏、调试工具、各种动画、AR相册、相机图片编辑等源码

    iOS精选源码 日期时间选择器,swift Space Battle 宇宙大战 SpriteKit游戏源码 LLDebugTool - 便捷的IOS调试工具(新增截屏功能) 相机扫描or长按识别二维码 ...

  2. Data Binding on Android

    Data Binbing框架是在2015年Google I/O大会上最早提出来的,一直在Android开发者中热议,但是很少有真正在项目中用到.本文简单介绍Data Binding框架的简单用法以及其 ...

  3. [LC] 17. Letter Combinations of a Phone Number

    Given a string containing digits from 2-9 inclusive, return all possible letter combinations that th ...

  4. svn merge Property conflicts

    svn merge代码的时候,出现Property conflicts的解决方案.可以参考:http://stackoverflow.com/questions/23677286/conflict-w ...

  5. openpyxl操作excel表格

    1.openpyxl 只支持打开.xlsx格式,其他excel类库基本也是 2.不能这里的工作面板直接右键新建表格,必须到文件夹下面去新建,可以把在别的目录新建的表格直接复制到当前目录下 3.从表格中 ...

  6. openCryptoki安装

    什么是OpenCryptoki OpenCryptoki提供Linux下的PKCS#11库和工具,支持包括TPM和IBM加密硬件以及软件令牌. 目前(2019/05/06)最新release版为3.1 ...

  7. iOS自动化登录测试demo

    <软件自动化测试开发>出版了 测试开发公开课培训大讲堂 微信公众号:测试开发社区 测试开发QQ群:173172133 咨询QQ:7980068 咨询微信:zouhui1003it

  8. Redis 机器内核参数优化

    " > /proc/sys/vm/overcommit_memory echo never > /sys/kernel/mm/transparent_hugepage/enabl ...

  9. kettle_errot_karafLifecycleListenter

    使用kettle 6.1 通过命令行批量执行作业的过程中,发现偶尔有作业执行时间会变慢几分钟,查看日志发现改作业开始就报了一个错 报错之后才会继续下面的作业,虽然不影响最终作业执行结果,但也延误了一些 ...

  10. SIM卡的消失会让运营商们恐慌吗?

    ​中国移动.联通.电信三大运营商原本高高在上,每天乐滋滋地数钱数到手抽筋,但近年来移动互联网的快速普及,让运营商的制霸状态不复存在.成为众多互联网公司的"流量通道",语音.短信等业 ...