vue.js
|天上白玉京|
这个作者很懒,什么都没留下…
展开
-
vue中的this.$route和this.$router
待完成原创 2020-12-30 17:31:00 · 1746 阅读 · 0 评论 -
按下鼠标中键跳转新的页面
当我们用鼠标中键点击一个带href属性的a标签时,我们会发现它会跳转到新的页面。此时即使添加preventDefault属性也没有用。因为对于a标签,当用中键点击时,会默认从新窗口打开链接要想阻止这一行为,我们可以将a标签转换为其他标签如span,再给span添加click属性。比如,当我们使用vue的router-link标签创建路由标签时,默认创建的是a标签<router-link :to="{ path: tag.path, query: tag.query, fullPath: tag.原创 2020-12-09 21:42:46 · 1489 阅读 · 0 评论 -
vue中的this.$el
Vue 实例使用的根 DOM 元素比如我动态生成router-link<router-link :to="{ path: tag.path }"v-for='tag in visitedTags':key='tag.path'@click.prevent.native="openMenu(tag,$event)">{{tag.title}}</router-link>openMenu (tag, e) { console.log(this.$el)}控制台输出原创 2020-12-08 22:09:44 · 4423 阅读 · 0 评论 -
vue自定义指令vue.directive的使用
在我们进行vue开发的时候,vue本身提供的指令有时并不能满足我们的需求,我们需要用到自定义指令,而vue也很好的为我们提供了自定义指令的方法。vue.directive比如我们自定义一个focus指令Vue.directive('focus', { inserted: function (el) { el.focus() }})当然,我们也可以注册局部指令directives: { focus: { // 指令的定义 inserted: function (原创 2020-11-25 19:48:32 · 225 阅读 · 0 评论 -
vue中指令的参数和修饰符
我们在进行vue开发的时候,常常用到vue指令,为了更好理解vue指令,我们先了解vue的指令的语法结构vue指令指令 (Directives) 是带有 v- 前缀的特殊 attribute(属性)指令的参数一些指令能够接收一个“参数”,在指令名称之后以冒号表示,如<a v-bind:href="url">...</a>指令的参数为href,参数值为urlvue指令的动态参数除了直接使用参数外,我们还可以将参数用方括号括起来,形成动态参数<a v-bind:原创 2020-11-25 19:38:08 · 666 阅读 · 0 评论 -
vue实现路由权限控制
我们后管理项目中经常需要对路由权限进行判定,不同的身份可以访问不同的路由。实现的大体思路很简单,将路由分为基本路由和用户路由,基本路由所有用户均可访问,用户路由是当前用户能够访问的独有的路由。我们可以通过router中的addRoutes方法,动态向router中添加路由。为了解具体实现方法,我们先从实现用户登录功能开始用户登录实现其实实现用户登录方法很简单,首先,当我们第一次访问服务器时,获取服务器返回值的token信息,将其储存在本地cookie或者sessionStorage中,当我们再次向原创 2020-11-24 18:04:03 · 3660 阅读 · 0 评论 -
vue组件transition实现组件页面过渡效果
我们运用vue中的内置组件transition能够实现页面过渡效果,使页面更加美观。<transition name='fade' mode='out-in'> <!-- 组件数据缓存效果 --> <keep-alive :include='cacheViews'> <router-view :key='key'></router-view> </keep-alive></transition>关于tran原创 2020-11-22 16:51:27 · 1453 阅读 · 0 评论 -
vue中文本框自动获取焦点
在vue中要使文本框自动获取焦点可用如下代码实现this.$nextTick(_ => { this.$refs.newKeywordInput.$refs.input.focus()})其中this.$nextTick是页面重新渲染完成之后才会执行的回调函数。javascript执行机制可以查看参考这篇文章js执行机制...原创 2020-11-20 00:54:32 · 1504 阅读 · 0 评论 -
vue组件添加事件的时候需要加上native
我们在给vue组件添加事件的时候,有时需要添加native。当我们想在vue根组件监听原生事件的时候,我们可以使用v-on的修饰符native比如,我们给router-link标签添加cilck事件,如果不加native,事件是不会发生的,因为默认是进行路由跳转,而native就能够给组件绑定原生对象。<el-input v-model='listquery.name' placeholder='请输入商品名称' style='width: 150px' clearable class='fil原创 2020-11-18 10:59:01 · 1034 阅读 · 0 评论 -
export2excel.js实现将页面表格导出到excel中
最近遇到需要将页面中的table数据导出的情况,发现export2excel能够实现合格功能,因此分析了其中代码,加深自己的理解。下面是我分析之后完成的代码,添加了一些注释方便大家理解。/* eslink-disable */// 需要引用xlsx和file-saveas两个依赖import XLSX from 'xlsx'import { saveAs } from 'file-saver'// 将数据导出为excel// var table = document.querySelector原创 2020-11-18 01:37:51 · 1905 阅读 · 2 评论 -
element-ui中样式无法直接修改
转载自vue-loader官方文档我们在开发过程中常常需要修改element-ui中的样式。有时候我们发现在style中添加了scoped,则样式无法修改,去掉scoped后样式能够正常生效。为了了解其中的原因,我们需要先了解scoped这个属性的作用。一:scoped的作用和原理scoped的作用:当 style标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项,但不需要任何 polyfill。它通过使用 PostC转载 2020-11-16 00:29:49 · 439 阅读 · 0 评论 -
vue中的插槽slot用法(个人总结)
在我们使用vue组件的时候,通常需要向组件传递内容,向这样<alert-box> 这是一个插槽</alert-box>这时候我们就需要用到slot元素。插槽基本使用父组件向子组件传递内容<div id="app"> <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box> <alert-box></alert原创 2020-11-15 01:26:42 · 752 阅读 · 0 评论