vue指令模式添加埋点

埋点也叫浏览足迹，有多种类型，如浏览页面、点击、搜索等等。

我使用Vue的自定义指令来添加埋点，使用起来比较简单方便，下面是我的代码

Dom代码：

<div class="main" v-track="{act:'browse'}">
</div>

<el-button v-track="{act:'click'}">Test</el-button>

指令代码：

import Vue from 'vue'
// 埋点指令
Vue.directive('track', {bind: (el, binding, vnode) => {// console.log(el)// console.log(binding)// console.log(vnode)if (binding.value && binding.value.act) {switch (binding.value.act) {case 'browse':// 在此插入埋点数据(调用API)console.log('browse')breakcase 'click':el.onclick = function () {// 在此插入埋点数据(调用API)console.log('click')}break}}}
})

最后请不要忘了在main.js中将指令导入

import './directive/track'

这样就实现了埋点的功能。各位大牛要有更好的方式，欢迎留言交流

vue指令模式添加埋点相关推荐

vue给元素添加指令_Vue指令动态模糊元素
vue给元素添加指令 v模糊 (v-blur) Vue directive to blur an element dynamically. Useful to partially hide eleme ...
vue全套笔记，前端工程化+vue指令+脚手架
文章目录一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用注意,实际开发不需要自己配置webpack ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...
4.Vue指令（Directives）
目录 1. Vue环境搭建(Node) 2. npm与yarn详细使用 3. Vue介绍及其基本使用 4. Vue指令(Directives) 5. Vue修饰符(Modifier) 6. Vue计算 ...
VUE指令大全(详解)
大家好我是迁客,一个初入行的小白!痴迷技术,对programming有着极大的兴趣和爱好.从今天起,开始写自己个人成长的第一篇博客!既是对自己的一个学习技术的一个记录,也是督促自己,坚持下去!加油Fi ...
vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API 安装:vue-devtools 学习和调试vue必备之利器 - 官方插件安装: 打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作 2.进入扩展程序菜单 ...
vue中插值表达式和14个vue指令详解
在学习vue时,插值表达式和vue指令可谓是基础中的基础,这篇文章,就让你彻底了解怎么使用插值表达式和vue中所有指令的用法. 一.插值表达式:{{ }} 可以将vue中的数据填写在插值表达式中 &l ...
Vue.js：vue指令（给标签属性赋Vue变量v-bind，绑定事件 v-on）vue事件处理函数中, 拿到事件对象，6个事件修饰符
1. 给标签属性赋Vue变量v-bind 在vue中,v-bind指令可以动态的给标签的属性设置值, 语法:v-bind:属性名="vue变量" 简写::属性名="vue ...
Vue指令实战：结合bootstrap做一个用户信息输入表格
结合前面的vue指令做了个小例子,用户在表单里面输入用户名和年龄,点击"添加"以后会保存到用户信息表里面 <!DOCTYPE html> <html> &l ...

vue指令模式添加埋点

vue指令模式添加埋点相关推荐

最新文章

热门文章

vue指令模式 添加埋点

vue指令模式 添加埋点相关推荐

最新文章

热门文章

vue指令模式添加埋点

vue指令模式添加埋点相关推荐