最简单的方式理解Vue的自定义指令与混合
2024-10-14 05:00:41
vue.js 自定义指令
钩子函数:
bind
inserted
update
componentUpdated
unbind
钩子函数完整实例:
html:
<div id="hook-arguments-example" v-demo:hello.a.b="message" v-color-swatch="bgColor" ></div>
js:
Vue.directive('demo', { bind: function (el, binding, vnode) { var s = JSON.stringify; // 用于从一个对象解析出字符串 el.innerHTML = 'name: ' + s(binding.name) + '<br>' +'value: ' + s(binding.value) + '<br>' +'expression: ' + s(binding.expression) + '<br>' +'argument: ' + s(binding.arg) + '<br>' +'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }); Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value; }); new Vue({ el: '#hook-arguments-example', data: { message: 'hello!', bgColor: 'red' } });
结果:
Vue混合:
// 定义一个混合对象 var mixin = { methods: { foo: function () { console.log('foo'); }, conflicting: function () { console.log('from mixin'); } } }; var vm = new Vue({ mixins: [mixin], methods: { bar: function () { console.log('bar'); }, conflicting: function () { console.log('from self'); } } }); vm.foo(); vm.bar(); vm.conflicting();
最新文章
- Kooboo CMS 之TextContent详解
- sudo su权限案例
- NBU bplabel命令擦除磁帶數據
- [C程序设计语言]第四部分
- python内存管理机制
- 看完com本质论第一章
- linux PCI设备初始化过程
- C语言清空输入缓冲区的N种方法对比
- innode 节点
- Python 基本数据类型_常用功能整理
- Plupload上传插件自定义图片的修改
- MyBatis 关系映射XML配置
- linux命令详解:pgrep命令
- 关于C#中的++运算符的一些拓展思考
- python 机器学习
- Servelet开发步骤和生命周期
- 散列之HashTable学习
- Fiddler抓包7-post请求(json)
- spring aop通过注解实现日志记录
- Redis学习笔记(1)- CentOS 6.4 安装Redis