![](https://img-blog.csdnimg.cn/20200709154235343.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
关于Vue的技术总结
一个橙子呀
悄悄拔尖 惊艳所有人
展开
-
Vue.js中 watch 监听的高级用法
1.假设有如下代码:<div id="root"> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou'原创 2021-09-14 10:37:33 · 365 阅读 · 1 评论 -
Vuex详细介绍和使用方法
1.什么是vuex?官方的解释: Vuex是一个专为Vue.js应用程序开发的状态管理模式当项目比较庞大的时候,每个组件的状态比较多,为了方便管理,需要把组件中的状态抽取出来,放入Vuex中进行统一管理。常用的登录,购物车等一些数据的存储State:唯一的数据源,我们需要把任何一个组件中需要抽取出来的变量放入到state中去Getters:通过Getters可以派生出一些新的状态Mutations:更改Vuex的store中的状态的唯一方法Actions:Action提交的是mutation,原创 2021-09-13 16:20:17 · 438 阅读 · 1 评论 -
Vue实现上下左右无缝滚动,鼠标移入并暂停
需求:超过4条数据就开始无限循环滚动在线文档:https://chenxuan1993.gitee.io使用vue-seamless-scroll组件步骤:一:安装npm install vue-seamless-scroll --save二:在用到的页面引入和注册组件<script>import vueSeamlessScroll from "vue-seamless-scroll";export default { name: "test-abnormal-dynam.原创 2021-09-13 15:53:10 · 2078 阅读 · 2 评论 -
vue单页面切换,返回到上个页面的时候要进行刷新
created():创建vue对象时,html渲染之前触发;也就是说created()只会触发一次。activated():在vue对象存活的状态下,进入这个页面就会触发activated()函数,可以用来初始化页面数据(刷新页面)deactivated():离开组件时执行;activated()和deactivated()只有在keepalive:true的情况下才会生效//调用这个函数可以实现刷新,(位置不要写错,与methods,mounted()是同级)activated () {原创 2021-09-10 15:33:33 · 1697 阅读 · 0 评论 -
Vue路由参数更新但是页面不刷新问题
解决方法一、使用watch属性监听route对象watch: { $route(to, from) { if (this.$route.query.id && from.path == "/client/index") { this.getAllTypeList(); }, // 对路由变化作出响应... //可以使用$router.go(0)进行刷新,(补充,该方法在ios手机上无效) //可以改用wind原创 2021-09-06 18:50:23 · 2762 阅读 · 0 评论 -
父子组件传值的精简步骤
父组件代码html <selectEquipment @alreadySelectEquipment="alreadySelectEquipment" 子组件传过来的事件,进行注册 :compareList.sync="compareList" 传给子组件的值 ></selectEquipment>jsimport selectEquipment from "./components/select-equipment.vue";//引入子组件export def原创 2021-07-22 18:48:47 · 202 阅读 · 0 评论 -
如何使用vue-table-with-tree-grid树形表格插件
1.安装插件npm install vue-table-with-tree-grid2.打开main.js,导入vue-table-with-tree-gridimport Vue from 'vue'import ZkTable from 'vue-table-with-tree-grid' Vue.use(ZkTable)3.全局注册//全局注册组件Vue.component('tree-table', TreeTable)4.使用组件展示分类数据:data(设置数据源.原创 2021-07-13 15:12:26 · 329 阅读 · 0 评论 -
vue兄弟组件传值的两种方式
本demo主要是为了演示vue项目中兄弟组件之间的传值,这里我演示了两种方式:a. bus总线传值;b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件,父组件再传子组 件B)下边开始本次demo的编写:一. bus总线传值的使用:在项目中创建一个单独的eventBus.js文件该js文件的内容很简单,就是暴露一个vue实例而已。有人喜欢在main.js全局引入该js文件,我一般在需要使用到组件中引入。创建相关组件:父组件中注册并使用子组件:分别在子组件one和two中原创 2021-06-30 19:04:57 · 3198 阅读 · 2 评论 -
封装element-ui面包屑组件
效果图如下:首先先拆分出来一个组件子组件代码<template> <!--面包屑--> <div> <el-breadcrumb separator-class="el-icon-arrow-right" > <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="{原创 2021-06-29 21:36:51 · 233 阅读 · 0 评论 -
路由跳转方式name 、 path 和传参方式params 、query的区别
一、$ router和$ route的区别$router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象$ router操作路由跳转this.$router.push({ name:‘hello’, params:{ name:‘word’, age:‘11’ } })$route读取 路由参数接收var name = this.$route.params.name;二、路由跳转方式name 、 path 和传参方式params 、query的区别path 和 Name原创 2021-06-25 17:08:15 · 4029 阅读 · 0 评论 -
Vue中前端实现导出excel文件功能,后端返回文档流
<div class="whole_head_button" @click="download"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-download-1-copy" /> </svg> 导出 </div> //导出 download() { var query = {.原创 2020-12-02 09:58:29 · 979 阅读 · 0 评论 -
Vue中使用keep-alive实现缓存
keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。它使用的时候非常简单,示例代码如下://通常都是写在App.vue中 <keep-alive> <router-view></router-view> <!--这里是会被缓存的组件--></keep-alive>这里需要说明的是,本示例是使用了vue-router的,所以这里的keep-alive中放了1个router-.原创 2020-11-25 10:20:46 · 279 阅读 · 0 评论 -
Vue封装--数字转换成万的方法
后端返回的数字要像下面这样在页面上以万为单位进行显示,为了方便,封装了此方法为笔记,以供以后使用 // 万转化 formatDecimal(num, decimal) { num = this.fixeds(num * 1) num = num.toString(); let index = num.indexOf("."); if (index !== -1) { num = num.substrin.原创 2020-09-14 15:48:38 · 3754 阅读 · 0 评论 -
vue-router的hash模式与history模式的区别
为什么要有 hash 和 history这两种模式呢?对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。前端路由的核心,就在于 —— 改变视图的同时不向后端发出请求.1、hash 模式:即地址栏URL中的 # 符号。比如这个URL:http://www.abc.com/#/hello, hash 的值为 #/hello。它的特点在于:hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此原创 2020-09-07 11:57:41 · 326 阅读 · 0 评论 -
Vue父子组件之间的传值(简单易懂)
使用vue进行项目开发的时候,免不了组件之间的通信。父组件传递给子组件的值,子组件可以通过props获取。子组件想要改变数据,Vue是禁止子组件直接向父组件传值的,只能通过触发事件的方式告诉父组件,下面用代码通俗易懂的方式分享给大家1.父组件传值给子组件父组件代码:<template> <div> <parent> //用引入的子组件命名标签名通过冒号绑定把值传给子组件 <child :parentToChild="val原创 2020-08-05 17:05:15 · 1542 阅读 · 3 评论 -
Vue导出页面为PDF格式高清(亲测有效)
通过在网上查阅资料,说一下思路.就是将页面转换成图片格式.然后通过图片的base64码.生成PDF…做个整理总结,如果也你实现了请留下你点赞的小手1 、首先我们要安装两个包.分别是:注意:如果npm下载较慢,建议可以考虑换成cnpm下载下载完这两个包之后项目有可能会报错,不要慌张,如果英语不好看不懂,复制到百度,就会解决(我当时报错的内容是Module build failed: Error: ENOENT: no such file or directory, scandir...,就是..原创 2020-07-21 17:18:58 · 2496 阅读 · 7 评论 -
Vue中v-if和v-show区别总结
一、v-if和v-show的异同点:1.相同点 :v-if 和 v-show都可以动态控制DOM元素的显示隐藏。2.不同点:v-if是动态地向DOM树中添加或删除DOM元素节点;v-show是通过向DOM元素设置样式display属性值控制显示隐藏。二、v-if和v-show特性总结1.编译方面:按控制手段和官方文献可知,v-if是惰性的,若最初指令值为false,它是不会编译的,直至指令值为true才开始局部编译存入缓存;v-show不管最初指令值为真假都会马上编译存入缓存,保留DOM。2.消耗原创 2020-05-13 18:19:25 · 379 阅读 · 0 评论 -
Vue-路由跳转传参的方法
传递参数页面: handleinvoice(index, row) { // console.log(row); this.$router.push("/edit_train_content/" + row.id); },router.js: { path: '/edit_train_content/:id', name: '/edit_train_content', component: edit_train_content,原创 2020-05-26 14:15:40 · 426 阅读 · 0 评论 -
Vuex存值与取值(简单易懂)
组件内存值methods: { fn() { this.$store.commit('setValue',xxx) //setValue存值随便起个名, xxx要存的值 } }store.js的state中const state = { xxx:'',//把存的那个值的名字初始化一下}store.js的matution中 setValue(state,xxx){ s原创 2020-06-16 15:28:48 · 6706 阅读 · 3 评论 -
v-if和v-else判断的巧用
哪里不显示就把v-if 加在哪个标签上要显示的地方 加上v-else我想要实现的是,如果距离报价截止时间还有,就正常显示,如果报价截止时间无的时候,就显示报价已结束代码如下:<view class="font"> <text class="number">{{ item.enquiry.enquiry_num }}</text>...原创 2020-03-30 18:17:16 · 1499 阅读 · 0 评论 -
Vue-实现自适应屏幕高度的方法
项目中使用的element-ui的table组件,让它的高度自适应屏幕的高度,代码如下:html: <div class="tablebox" v-bind:style="'height:' + (bodyHeight - 170) + 'px'"> <el-table :data="tableData" style="width: 100%;" :height="bodyHei原创 2020-05-26 17:00:36 · 6437 阅读 · 0 评论 -
Vue-实现div弹窗可自由拖拽(亲测有效)
要实现一个弹窗的自由拖拽功能,只需要四步骤,即可轻松完成,以下代码可以直接复制粘贴,项目总结,亲测可用第一步:1: 在目录下新建一个文件夹,文件夹内新建js文件,命名为:drag.js。如图所示:第二步:2: 在drag.js中写上如下代码(使用的话直接复制即可):import Vue from 'vue';//使用Vue.directive()定义一个全局指令//1.参数一:指令的名称,定义时指令前面不需要写v-//2.参数二:是一个对象,该对象中有相关的操作函数//3.在调用的..原创 2020-06-17 12:07:54 · 14261 阅读 · 30 评论 -
Vue中.prettierrc文件常见配置(易懂)
当我们使用右键格式化的时候,就会自动帮我们补全符号,但是,有些符号在eslint中就会报语法错误,那我们需要怎么办呢?可以通过.prettierrc来进行文件配置在文件的根目录建一个.prettierrc文件,在文件里写上如下代码:{ "semi": false, // 使用分号, 默认true "singleQuote": true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号) "bracketSpacing": true //.原创 2020-06-26 14:18:41 · 25905 阅读 · 7 评论 -
vue中实现左右,上下拖拽(全,可复制)
左右拖拽效果图:直接上代码:html:<div id="box"> <div id="left"></div> <div id="resize"></div> <div id="right"></div></div>CSS:body,html{ margin:0; padding:0; height:100%;}#box{ width:600px; height原创 2020-07-08 16:04:08 · 7779 阅读 · 3 评论 -
路由守卫之组件内前置守卫的详细介绍
使用场景:当我在项目中使用keep-alive缓存机制的时候,当我们新增一个列表数据时页面不刷新,但我们还想保留keep-alive缓存,这时候怎么办呢?就会用到路由守卫,进入组件的时候刷新页面首先我是从其他页面新增的数据,需要先存一个唯一标识: this.$posts( "/api/employee/entry", this.encode(finish) ).then((res) => { // console.log(res, "入职完成按钮成功.原创 2020-07-02 10:53:48 · 1805 阅读 · 3 评论 -
Axios请求拦截器的使用(易懂)
当我们在做项目的时候经常会遇到携带token令牌授权才可以发起请求,如下图,接口文档明确表示,那么我们该如何操作呢?那我们就需要用到request这时我们去登录看一下状态,会发现返回的是null,这个没有关系,因为登录期间服务器还没有给你发送令牌,如果登录之后再去调用其他接口,我们在去监听login这个请求,就会发现不在是null,而是一个真正的token令牌...原创 2020-06-26 22:02:15 · 2056 阅读 · 1 评论 -
路由导航守卫(路由拦截器)控制页面访问权限
项目开发中,经常会遇到很多页面必须登录以后携带token才可以进行访问,如果用户没有登录,直接访问某些页面是禁止的,这时候就要用到 路由导航守卫进行拦截,请看下面介绍,你会很容易明白:to 将要访问的路径form 代表从哪个路径跳转而来next 是一个函数 表示放行next() 放行 next(’/login)强制跳转附上代码,如有需要可自行复制粘贴,哈哈Vue.use(Router);const router = new Router({ routers: [..原创 2020-06-26 13:09:31 · 11449 阅读 · 1 评论 -
使用Vue ui可视化面板创建项目
我们经常会使用npm来创建vue项目,cli脚手架,今天记录一下使用可视化面板创建vue项目,步骤详细:第一步:使用Windows+R快捷键,输入cmd,打开小黑窗,然后输入vue ui命令,运行成功之后会自动打开可视化面板,如下图:第二步:然后会出现一些文件夹,选择一个自己想存放项目的文件,我这里直接放在桌面.选好文件夹后点击创建按钮...原创 2020-06-24 19:06:22 · 2725 阅读 · 3 评论 -
Vue中filters过滤时间的用法(一看就会)
<template> <view> 发表时间:{{item.add_time | formatDate}} </view></template><script> export default{ filters:{ formatDate(date){ const nDate=new Date(date) //将不满10的数字自动补0 const year=nDate.getFullYear().to.原创 2020-06-23 13:54:24 · 2270 阅读 · 4 评论 -
Vue-Router实现前端页面缓存
一、使用情景在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业务场景下,会出现以下情况,例如:在有分页数据列表中,切换到第三页需要查看列表对应数据的详情页面,然后返回,如果不加任何处理,列表页面会重新加载,默认显示第一页数据,而不在是之前的第三页,这样如果还需要查看之前查看数据的下一条时,还需要切换到第三页,如此反复非常不友好。在列表页面进行条件筛选查询,查询到对.转载 2020-06-18 15:49:58 · 2001 阅读 · 1 评论