vue基础----自定义组件directive ,bind,update,insert

<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>

原文地址:https://www.cnblogs.com/moon-yyl/p/11755147.html

时间: 2024-11-09 09:43:45

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

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

1.语法:Vue.component("组件名字",{data,template}),代码如下: a. data: 必须是一个函数,有一个返回值.和vue里面的使用方法一样 b. template: 用来标示这个组件的渲染后的具体的代码 <div id='app'> <button-count></button-count> <button-count></button-count> <button-count>&

vue中自定义组件(插件)

vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: 1.首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如: <template> <div> loading.............. </div

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

<div id="app"> <div>{{pmessage}}</div> //父组件 <child :message="pmessage"></child>//打开一个通道 绑定message </div> Vue.component('child',{ props:['message'], //使用props 来接收信息 template:'<h1>{{message}}<

vue.js自定义组件directives

自定义指令:以v开头,如:v-mybind. <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value = "this is mybind-bind" } } } 这时页面初始化时,input中会显示this is mybind-bind. 通过directives注册自定义指令mybind,每一个自定义指令中又提供若干钩子,如示例中的bind, bind的作用是定义一个在绑定时执行一次的初

Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)

在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着不重复发明轮子的原则).于是我就在 GitHub 上找寻.确实找到了不少,但是与需求之间的差距还比较大.从零开始写又不太现实(时间摆在那里,加之自己的前端也是刚学,还没有从零开始手撸一个控件的能力),所以在已有组件的基础上进行二次封装便成了一个比较可行的方法(几乎也是唯一解).遂在 npm 上以 c

vue 封装自定义组件

先说说组件的结构 最好单独放一个文件夹,有依赖的话装依赖 Sjld.vue 内容 <template id="sjld"> <label > <select v-model="selected" prop="selected" > <option v-for="option in sheng" :value="option.id" :label="opti

vue之自定义指令directive

<template> <div> <input v-model="dir1" v-my-directive1="example1"/> <input v-model="dir2" v-my-directive2="example2"/> </div> </template> <script> export default { data(){ r

vue之自定义组件的写法与用法

三个技能,父组件 -> 子组件传值(props).子组件 -> 父组件传值($emit).以及插槽(slot):对于一个独立的组件来说,props是用来为组件内部注入核心的内容:$emit用来使这个独立的组件通过一些逻辑来融入其他组件中.举个具体点的例子,假如你要做一辆车,车轮是要封装的一个独立组件,props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹,图案等:而$emit的作用则是让这些轮子能够和整辆车完美契合的运作起来. (1)使用props可以实现父子组件之间

Vue基础(环境配置、内部指令、全局API、选项、内置组件)

1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装完成后在命令行执行以下命令查看npm包管理器版本 npm -v npm中文文档:https://www.npmjs.cn/ 配置淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后执行 cnpm -v 查看版本信