1.前言
最近梳理
vue知识的时候想起一件事情首先大家都知道常规的
vue里面传值,存储
vuex或者自己写event bus,路由那套先不说但是呢和之前的一些同事沟通发现,他们在公司里面郑州某银行工作了3-4年,这些都没用而是用了一个非常基础的东西
dataset
2. data-语法
哈哈很多人想不起吧 其实就是 HTML 标签上
data-attribute及对应DOM的dataset.property
string = element.dataset.camelCasedName; element.dataset.camelCasedName = string;
3.实例
<div id="user" data-id="1234567890" data-user="yzs" data-date-of-birth>yzs-郑州 </div> <script> el.dataset.id === '1234567890' // el.dataset.user === 'yzs' // el.dataset.dateOfBirth === '' el.dataset.dateOfBirth = '1960-10-03 el.dataset.someDataAttr = 'mydata'; </script>
简单理解就是属性转为JS操作后只需要标签data-属性后的内容-而且采用小驼峰的形式
属性名称 data-abc-def 与键值 abcDef 相对应。
4. vue 自定义钩子-dataset-传值
Vue.directive("red",{ bind:function(el){ el.dataset.id = "100100" }, // 当指令绑定的元素插入到DOM中时,触发 inserted:function(el){ // el获取当前绑定的DOM元素节点 el.style.color = "red"; console.log("dataset-传值:",el.dataset.id); } });
