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的作用是定义一个在绑定时执行一次的初始化动作，观察bind函数，它将指令绑定的DOM作为一个参数，在函数体中，直接操作DOM节点为input赋值。

自定义指令的钩子函数：

 bind: function () {},
 inserted: function () {},
 update: function () {},
 componentUpdated: function () {},
 unbind: function () {}

官方说明：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。

钩子函数还提供了一些参数，如上面示例中bind:function (el)的el，

钩子函数参数的官方说明：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀。
value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

动手实践一下理解更加深刻

代码地址：https://github.com/Demon-han/vue_demo/

其中directives.vue为该实例，其他组件将在其他文章中详细介绍

总结

以上所述是小编给大家介绍的vue.js自定义组件directives的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue项目引进ElementUI组件的方法

    环境要求 Nodejs Nodejs 官网下载地址:http://nodejs.cn/download/具体安装参考其他资料 打开cmd命令行,输入npm -v,如果出现如下图的显示,说明已经安装正确. 如果安装版本比较老,想升级新版本 npm install npm -g 安装 webpack 安装webpack npm install webpack -g -g 表示安装为全局 安装 vue-cli 安装 vue 脚手架项目初始化工具 vue-cli npm install vue-cli

  • 详解Vue组件插槽的使用以及调用组件内的方法

    组件传参 通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数 export default { props: ['options'], data(){ return {} } } 但是这个方法有局限性, 例如我写了一个对话框组件, 对话框的内容是自定义的 如果我只是显示文字的话, 我可以简单的将字符串传进去props: ['message'] 但是如果需要在其中添加一个按钮的话, 这种方法就显得很笨重了, 所以我们用另一种办法 插槽 slot 插槽 slot的使用就像

  • 详解Vue 动态组件与全局事件绑定总结

    最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握的知识点,然后发现问题解决问题,我们的能力才能得以提升,要不然就有点眼高手低了. 基于这个想法于是就开始自己去撸了一个旅游网站,旅游网站嘛避免不了城市的选择,所以在实现城市选择列表的时候碰到的一些问题,以及解决办法今天就记录下来做一个总结. 城市列表选择组件 首先说说我们要实现一个什么样的城市选择组

  • vue组件从开发到发布的实现步骤

    vue组件从开发到发布的实现步骤

    本文介绍了vue组件从开发到发布的实现步骤,分享给大家,具体如下: 组件化是前端开发非常重要的一部分,从业务中解耦出来,可以提高项目的代码复用率.更重要的是我们还可以打包发布,俗话说集体的力量是伟大的,正因为有许许多多的开源贡献者,才有了现在的世界. 不想造轮子的工程师,当不了合格的搬运工 .让我们来了解一下vue组件从开发到打包发布流程,并配置Github主页. 本文以 vue-clock2 组件为例,欢迎star _~~ 项目地址 目标框架:vue 打包工具:webpack 发布源:npm

  • 详解如何制作并发布一个vue的组件的npm包

    前提:1.会vue基础,以及vue的组件(官网:https://cn.vuejs.org/v2/guide/components.html)相关的基础. 因为本文主要是讲如何把一个vue组件做成npm包并发布. 分为2大步骤: 一.按照相应格式写我们的vue代码(就如同写一个jquery插件时.有其固定的格式一样). 二.发布到npm上的流程 一.书写一个vue组件 不用脚手架,我们自己从头开始做起,因为脚手架会附带很多没用的东西. 就做一个最简单的vue组件:就是传入用户名字,页面打印出'he

  • Vue组件之单向数据流的解决方法

    子组件能够通过自身的props选项获取父组件上的数据,但是在默认情况下,props是单向绑定的---当父组件数据(属性)发生变化的时候会传递给子组件,引起子组件的变化,但不能反过来并且不允许子组件直接改变父组件的数据,会报错的.例如: 也就是说当通过一种方法改变父组件数据的时候,子组件与之相关联的props数据也会发生改变,从而影响子组件,但是子组件直接改变从父组件拿过来的props数据却不能影响父组件的原始数据.也就是说一般情况下只能是"父影响子,而不是子影响父". 两种情况: 1.

  • 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实现输入框绑定的实例代码

    Vue.js实现输入框绑定的实例代码

    实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=

  • vue.js自定义组件实现v-model双向数据绑定的示例代码

    我们都清楚v-model其实就是vue的一个语法糖,用于在表单控件或者组件上创建双向绑定. //表单控件上使用v-model <template> <input type="text" v-model="name" /> <input type="checkbox" v-model="checked"/> <!--上面的input和下面的input实现的效果是一样的--> <

  • vue.js表格组件开发的实例详解

    vue.js表格组件开发的实例详解

    前言 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件开发的基础 组件可以扩展 HTML 元素,封装可重用的代码.我理解为功能模块的模板吧. 对于vue来说,组件是这个样子的,我们在html里面写 <div id="example"> <my-compone

  • Vue.js 父子组件通讯开发实例

    Vue.js 父子组件通讯开发实例

    vue.js,是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.(这是官方的一个解释!) 小编没使用过angularjs,也没使用过react.js,不能详细的说明三者的区别,想了解的话,在官方有一个分析,请点这里查看 小编从业前端开发也有了一年多的时间,刚开始的时候,前端开发展现的技术太多,小编有心无力,兼顾不过来,经过了解之后,还是选择了学原生js基础兼并jquery的学习上路.小编使用vue.js,也是因为业务的需求

  • vue.js el-table虚拟滚动完整实例代码

    目录 前言 实例代码 总结 前言 基于Element-UI的Table 组件开发的虚拟滚动组件,支持动态高度,解决数据量大时滚动卡顿的问题 实例代码 <template> <div ref="listWrap" style="height: 400px; overflow-y: scroll; margin-top: 20px; padding: 10px" @scroll="scrollListener" > <d

  • 详解Vue.js自定义tipOnce指令用法实例

    vuejs自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的. 最近碰到一种业务场景,业务场景如图: 有个操作提示点击可以显示,足够了吧?如图: 不够!好吧,产品说要求自动淡出提示! 后台操作复杂需要有个明显提示给业务人员更好地操作,而且这种提示,只需要一种提示就足够.于是我就想到了自己实现自定义指令. 整个vuejs场景是利用了构建模式开发,在我的main.js代码是这

  • vue.js实现条件渲染的实例代码

    vue.js实现条件渲染的实例代码

    一.初探条件渲染 vue 的条件渲染,仍旧依赖于指令系统,下面逐个介绍: (1)v-if <div id="app"> <div v-if="c1">c1</div> </div> ...... var app = new Vue({ el: '#app', data: { c1: false } }); 当 c1 为真值的时候,渲染出 v-if 所绑定的元素,否则不渲染出该元素.渲染结果如下: <div id=

  • vue实现自定义日期组件功能的实例代码

    vue实现自定义日期组件功能的实例代码

    实现一个日期组件,如图: components.js代码如下: Vue.component('sc-calendar',{ template:'<div class="scCalendar">' + '<div class="calendar_header">' + '<div class="prev" @click="prevMonth"> < </div>' + '&l

  • vue.js树形组件之删除双击增加分支实例代码

    html代码: <script type="text/x-template" id="item-template"> <li> <div :class="{bold: isFolder}" @click="toggle"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span&

随机推荐