
Vue
爱学但菜的大白鹅
这个作者很懒,什么都没留下…
展开
-
VUE双向数据绑定原理官方解释
今天在看文档时发现了这部分,讲得详细,希望大家都可以看看https://vue3js.cn/docs/zh/guide/reactivity.html#vue-%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96原创 2021-04-15 15:39:51 · 207 阅读 · 0 评论 -
VUE中图片src属性动态显示(根据路由)
点题::src需要使用require()直接上代码如果当前路由等于这个图片对应的菜单就让图片显示激活,否则就显示未激活的 <el-menu-item index="1"> <template slot="title"> <img :src=" defaultActive === '1' ? re原创 2021-04-13 17:44:23 · 655 阅读 · 0 评论 -
VUE前端展示代码(使用vue-codemirror)
我了解了一下highlightjs和vue-codemirror,我觉得codemirror使用起来更方便,文档看起来也更加清楚,所以这里使用codemirror。先放一个样子,看一下首先npm导入npm install vue-codemirror --save因为不考虑全局使用,只是在一个组件内用,就不用全局引入先引入组件import { codemirror } from "vue-codemirror";然后引入需要的样式,这里给两个可以直接查看主题样式的链接https://c原创 2021-04-07 18:10:41 · 7048 阅读 · 0 评论 -
VUE纯前端实现数据转CSV格式下载
话不多说直接上才艺<template> <div> <el-button type="primary" @click="xiazai">主要按钮</el-button> </div></template><script>export default { data() { return { //表头 header: [{ label: "name" }, { labe原创 2021-03-03 17:12:06 · 1638 阅读 · 1 评论 -
vue-code-diff添加横向滚动同步功能
在组件的mounted中添加下面的代码这里可能会遇到无法正常获取元素的问题可以看下我的另一篇文章:https://blog.youkuaiyun.com/weixin_45091037/article/details/114086733我的解决办法就是把vue-code-diff组件作为一个子组件,在该子组件的mounted使用下面的代码,父组件通过import调用这个子组件在子组件中mounted() { this.tongbu(); },methods: { tongbu() {原创 2021-02-25 15:46:36 · 1268 阅读 · 0 评论 -
关于VUE无法正确获取元素 添加事件问题
在vue中监听一个滚动事件失败情景父组件是home页面的一个子路由,通过router-view进入如图示,我在子组件的mounted时获取“内容区”这个元素,然后给它添加滚动监听事件,这时该元素是可获取,并且可以添加监听事件的但是当我将子组件的功能拿出来放到父组件中,并且在父组件的mounted添加滚动监听事件,这时该元素无法获取我尝试搜索这个问题来解决它1、使用Vue.nextTick()方法,并不能获取到元素2、target.addEventListener(‘scroll’, thi原创 2021-02-25 15:32:15 · 399 阅读 · 0 评论 -
Ctrl+A 只选中div中的内容,而不选择页面全部
今天碰见一个需求,要求Ctrl+A只选中div中的内容搜索以后发现给div添加contenteditable属性是个不错的方法contenteditable 元素属性默认属性: false可选属性: true | falseHTML5 引入的新属性还有可以通过onselectstart, onselect 事件来控制用户选择但是实现起来比较麻烦,所以我选择了使用contenteditable给出这位老哥的地址:https://segmentfault.com/a/11900000123165原创 2021-01-29 11:01:41 · 844 阅读 · 0 评论 -
element UI表格中设置文字提示(tooltip)或弹出框(popover)
写在前面在表格中自定义内容的时候需要使用<template>标签,否则无法正常显示1、文字提示用具名 slot 分发content,替代tooltip中的content属性。也就是说content属性是一行,而且不支持自定义,可以使用具名slot来给文字提示设置内容<el-table-column prop="name" label="姓名" width="180"> <template slot-scope="scope"> <e原创 2020-12-29 16:50:13 · 9686 阅读 · 2 评论 -
路由守卫钩子函数
一丶全局守卫全局守卫守卫所有的路由,进入每一个页面都会触发,在生命周期beforCreate之前//不能直接导出router实例,需要使用变量接收一下var router = new Router({ routes: [ { path:"/login", component:login, name:"登录页" }, { path:"/index", component:index } ]});//原创 2020-09-29 21:14:35 · 746 阅读 · 0 评论 -
Vue实现路由懒加载的方法
正常的路由加载//引入需要使用的包import Vue from 'vue'import Router from 'vue-router'//引入组件import login from '../pages/login'import index from '../pages/index'Vue.use(Router)//设置路由export default new Router({ routes: [ {path:"/login",component:login,name:"原创 2020-09-29 19:56:07 · 279 阅读 · 0 评论