vue
马优晨
生活中的打击和挫折远比想象的更多,有时灾难又会让你的一切努力白费,也许明天我们就会死去,但如果我们还活着,在面对着种种不公和无奈过后,“明天的明天的明天,你是否会依然爱着这个世界。” 我想我会.......................
展开
-
图片和PDF展示预览、并支持下载
第三步:编写FilePreview实现图片和PDF预览组件。展示图片和PDF类型,并且点击图片或者PDF可以预览。第二步:编写downloadcard组件。第一步:遍历所有的图片和PDF列表。原创 2024-06-05 11:56:10 · 429 阅读 · 0 评论 -
一个简单的布局
【代码】一个简单的布局。原创 2024-05-15 15:49:31 · 250 阅读 · 1 评论 -
前端通知组件封装
如果所示,实现如上图效果,点击小铃铛,从右侧展示通知,点击其中一条调到另一个页面;原创 2024-05-15 14:53:29 · 380 阅读 · 0 评论 -
前端双语实现方案(VUE版)
结构如下en.jszh-CN.jsindex.js。原创 2024-05-08 11:37:40 · 1124 阅读 · 0 评论 -
使用require.context实现前端工程自动化
require.context介绍require.context是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块require.context使用场景:在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入(原谅ide的警告-.-),原创 2020-06-28 14:12:56 · 1052 阅读 · 4 评论 -
this.$router.go()和this.$router.push()的区别
this.router.go()和this.router.go()和this.$router.replace的差别this.$router.go(val) 介绍:在history记录中前进或者后退val步, - 当val为-1时回到上一页。 - 当val为0时刷新当前页面。 - 当val为1到下一页。this.$router.go(1) //类似history.forward() this.$router.go(-1) //类似history.back()this.$rout原创 2020-06-22 19:51:12 · 5740 阅读 · 1 评论 -
js制作返回顶部
页面返回顶部有很多漂亮的形式,今天这里分享一个返回顶部的两个小动画。效果一:效果而:组件引入: <goTop></goTop> data() { return { test:”777 } }, components: {goTop}组件包含两个文件GoToTop.js 和goTop.vuegoTop.vue<template> <div class="goTopBT"> <d原创 2020-06-22 19:12:47 · 839 阅读 · 0 评论 -
vue 路由跳转并打开新页面
let id ='123';const {href} = this.$router.resolve({ path: '/home/commodity_Inventory', query: {id: id}})window.open(href, '_blank')vue 路由跳转并打开新页面,主要使用了this.$router.resolve的方法。获取到href,再用原生JS的方式跳转。...原创 2020-06-18 16:49:46 · 2199 阅读 · 0 评论 -
vue页面引入多个组件的方法
通常我们使用的是单个文件引入,但是这样就会有很多代码是重复的,怎样才能实现“按需“引入呢?如上图 no_started中引入no_bac1,no_bac2,no_bac3,no_bac4,怎么样才能代码看的美观呢?也就是按需引入。(1)这些被引入的文件放置在同一个文件下(2)配置文件夹下的index.js 文件内容index.jsexport { default as no1 } from './no_bac1.vue'export { default as no2 } from '.原创 2020-06-04 20:46:09 · 16565 阅读 · 1 评论 -
Vue.config.productionTip = false
Vue.config.productionTip = false,阻止启动生产消息;没有Vue.config.productionTip = false这句代码,它会显示你生产模式的消息;开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的。作用: 消息提示的环境配置,设置为开发环境或者生产环境...原创 2020-06-04 20:11:12 · 9439 阅读 · 3 评论 -
使用vue-happy-scroll 自定义滚动条
这里演示一下使用vue-happy-scroll 自定义滚动条的方式;官方地址:https://github.com/tangdaohai/vue-happy-scroll兼容性:支持特性:安装npm i -D vue-happy-scroll使用引入import { HappyScroll } from 'vue-happy-scroll'// 引入css,推荐将css放入main入口中引入一次即可。import 'vue-happy-scroll/docs/happy.原创 2020-05-21 21:17:03 · 3080 阅读 · 3 评论 -
vue移动端弹框组件
这里说一下 vue-layer-mobile插件的使用一、npm 安装// 当前最新版本 1.2.0 npm install vue-layer-mobile// 如新版遇到问题可回退旧版本 npm install vue-layer-mobile@1.0.0二、调整配置:因为这个组件中有woff,ttf,eto,svg类型文件,所以要配置一些loader//在webpack.config.js中配置如下,首先安装url-loader和file-loader:{ test: /\.wo转载 2020-05-20 21:40:02 · 1639 阅读 · 0 评论 -
vue里ref ($refs)用法
一、ref使用在外面的组件上<div id="ref-outside-component" v-on:click="consoleRef"> <component-father ref="outsideComponentRef"> </component-father> <p>ref在外面的组件上</p>...转载 2020-04-26 19:30:10 · 3066 阅读 · 0 评论 -
this.$nextTick()的使用场景
一、用途应用场景:需要在视图更新之后,基于新的视图进行操作。this.$nextTick()方法主要是用在数据改变,dom改变应用场景中。vue中数据和dom渲染由于是异步的,所以,要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。created()中使用的方法时,dom还没有渲染,如果此时在该钩子函数中进行dom赋值数据(或者其它dom操作)时无异...原创 2020-04-26 19:13:16 · 32725 阅读 · 8 评论 -
vue中使用watch监听$route 无效问题
vue 中使用watch监听$route失效问题!在watch里面监听$route变化,发现并没有监听到。路由:{ name: 'secondUser ', component: secondUser, path: '/secondUser',}页面监听: watch:{ '$route'(to,from) { ...转载 2020-04-16 14:56:18 · 12825 阅读 · 1 评论 -
vue全局注册组件实例
如果想要创建全局的组件,供给其他地方时使用,可以使用Vue.extend 去创建:这里我们封装一个弹框组件:(1)创建目录index.jsimport Vue from "vue";import Popup from "./index.vue";const PopupBox = Vue.extend(Popup);Popup.init = function(data) { ...原创 2020-04-13 16:26:51 · 738 阅读 · 0 评论 -
vue 绑定图片相对路径
如上图所示,我们制作,tab切换功能,但是因为字体的原因,我们这里选择tab切换时,使用图片进行替换。但是 使用过程中发现一个问题,vue绑定图片“相对地址” 图片并不能展示出来。完整代码部分:<template><div class="zuop-award"> <div class="work-title"> <img src="....原创 2020-03-26 13:59:38 · 3731 阅读 · 0 评论 -
vue制作tab切换(vuex + 动画)
先来看一下效果这里使用了vuex 来处理数据。(1)在首页选择的时候,将选择的结果存入state里面。(2)进入到内部页面,再将state的值 赋值给当前要切换tab。这里只写一下内部tab的代码,顺便解释一下:<template> <div class="menu"> <ul class="tab-tilte"> <li ...原创 2020-03-20 15:13:14 · 2088 阅读 · 0 评论 -
vue路由query和params的区别
需要跳转的路由地址 { path: "/common", name: "Common", component: resolve => require(["../views/creative_competition/common/index.vue"], resolve), meta: { title: "创意大赛" ...原创 2020-03-20 14:30:41 · 456 阅读 · 0 评论 -
vue项目封装axios
先看一下 我们的结构:第一阶段 配置:api文件夹说明api文件夹存放接口user.jsimport request from "../utils/request";//保存游戏类型export function saveGame(data) { return request({ url: "/user-setting/xxxx", method: "po...原创 2020-01-15 14:59:20 · 595 阅读 · 0 评论 -
vue 路由按需加载
在vue项目中,一般引入组件都是用importimport 组件名 from '组件路径'webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非常大,加载缓慢,为了解决这个问题,需要将他分成多个小文件,而且还要实现异步按需加载,即用到了再加载,而不用一股脑全部加载1. require.ensure()webpack提供的require....转载 2019-11-25 15:56:54 · 601 阅读 · 0 评论 -
require.context实现前端工程自动化
如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。一、使用require.context的场景(1)需要导入一个文件夹下面的所有文件(2)路由中导入各个组件文件如果项目变大了之后,每次手动import会显得有些力不从心,这里可以使用require.context函数遍历modules文件夹的...原创 2019-11-25 15:42:51 · 481 阅读 · 0 评论 -
vue局部滚动组件
如图实现,页面内容在局部滚动的效果~~(2)代码演示<template> <div class="newsletter-simple"> <div class="text-mess-title"> <div> <img src="https://img.dota2.com.c...原创 2019-11-19 10:24:46 · 3108 阅读 · 0 评论 -
vue图片懒加载实例
(1)效果演示如上图所示,在正式图片没有加载出来的时候,展示,默认图片,等待 正式图片加载好了,替换默认图片~~~代码演示:<template> <div> <div class="menu-list"> <div v-for="item in news" :key="item.id" class="menu-list-item"&g...原创 2019-11-18 15:23:56 · 1028 阅读 · 0 评论 -
vue-awesome-swiper使用
一、效果演示演示地址:https://sxs1995.github.io/vueSwiper/dist/index.html#/二、代码全景<!-- * @Author: shenxsh * @Date: 2019-05-31 10:21:03 * @LastEditTime: 2019-05-31 11:44:06 * @LastEditors: Do not edit...原创 2019-11-18 14:54:34 · 2454 阅读 · 1 评论 -
遍历元素根据状态显示不同颜色
如上图所示是一个列表遍历出来的结果,数据状态如下: list: [ { id: 1, src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg', name: '齐天大肾', stat...原创 2019-10-23 10:40:45 · 1910 阅读 · 0 评论 -
vue制作弹幕
(1)效果如上图所示的效果,这里我们使用vue 制作。(2)使用技术 vue + vue-baberrage1.安装: npm install vue-baberrage2.引入方式一:import Vue from 'vue'import { vueBaberrage } from 'vue-baberrage'Vue.use(vueBaberrage)方式二:c...原创 2019-10-23 10:17:21 · 6375 阅读 · 25 评论 -
actions相互调用并且存在顺序
// 假设 getData() 和 getOtherData() 返回的是 Promiseactions: { async actionA ({ commit }) { commit('gotData', await getData()) }, async actionB ({ dispatch, commit }) { await dispatch('action...原创 2019-10-16 11:04:51 · 1461 阅读 · 0 评论 -
vuex登录后设置token
第一步:建立cookie的 添加、设置、和删除auth.jsimport Cookies from 'js-cookie'const TokenKey = 'APPMGRID' //APPMGRID这个token名字自己定义export function getToken() { return Cookies.get(TokenKey)}export function ...原创 2019-10-15 11:44:41 · 3035 阅读 · 0 评论 -
store内部数据调用 与 view使用store数据
这篇文章主要说一下vuex中数据处理的三点:1. vuex action调用另一个action2. action调用mutations3. action调用外面的方法主要用途:在表单数据 增加,删除,保存,更新以后 重新刷新里面例如上图,修改权限 和 删除完成以后需要重新更新列表里面的数据~代码演示api (接口)//列表export function getChannel...原创 2019-10-12 10:52:22 · 3214 阅读 · 0 评论 -
vue8种组件通信方式
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系。vue组件中关系说明:如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系; B与C之...转载 2019-07-15 10:58:03 · 396 阅读 · 0 评论 -
Vue for循环列表控制显示隐藏
点击每一列,可以展开效果实现原理:方法一:<ul id="app"> <li v-for='item in items' @click="toggle(item)"> <span v-if='item.show'>{{item.content}}</span> </li></ul>new Vue({ e...原创 2019-07-12 18:38:55 · 8626 阅读 · 6 评论 -
vue 动态设置背景图片
backgroundImage需要做判断 <div class="right-con" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain'}"></div>直接设置backgroundImage <di...原创 2019-07-03 10:10:13 · 21252 阅读 · 0 评论 -
Duplicate keys detected: '0'. This may cause an update error.
运行vue项目的时候,出现了[Vue warn]: Duplicate keys detected: ‘0’. This may cause an update error(错误,检测到重复的key值:”0“,这可能会导致更新错误)如果上图所示,如果key,全都绑定了 index,那么就会报错,所以要将key区分开,保证key的唯一性。...原创 2019-07-02 14:57:56 · 7353 阅读 · 0 评论 -
vue click同时传入事件对象和自定义参数
仅仅传入自定义参数HTML<div id="app"> <button @click="tm(123)">ddddd</button></div>JS代码new Vue({ el:'#app', methods:{ tm:function(e){ console.log(e); } ...转载 2019-06-25 16:25:33 · 84028 阅读 · 2 评论 -
数据劫持|数据代理
数据劫持:指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。比较典型的是 Object.defineProperty() 和 ES2015 中新增的 Proxy 对象。数据劫持最著名的应用当属双向绑定,这也是一个已经被讨论烂了的面试必考题。例如 Vue 2.x 使用的是 Object.defineProperty()(Vue 在 3.x 版本之后...原创 2019-05-28 09:38:30 · 7332 阅读 · 1 评论 -
vue给组件传递不同的值
这里讲解一下Vue 官网的一个实例,Vue将数据遍历传递给多个组件,这个是我们实际开发中常做的事情。一般大型应用都是使用组件搭建起来的,我们需要给组件传递不同的值,来实现不同的展现,实现代码的复用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l原创 2018-03-31 20:24:43 · 2553 阅读 · 0 评论 -
vue引入外部字体
1、下载所需要的字体,.ttf格式本文以(HYLiLiangHeiJ.ttf 为例)2、在src下新建CSS文件,文件夹中包含以下文件3、打开font.css这里注意两个问题:(1)URL里面必须是绝对路径;否则:(2)如果使用使用绝对路径,必须文件上传到自己服务器的CDN否则:@font-face { font-family: 'HYLiLiangHeiJ'; sr...原创 2019-07-18 16:07:28 · 4786 阅读 · 2 评论 -
jquery实现图片懒加载
实现一个懒加载,效果如上所示HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...原创 2019-08-01 09:39:59 · 547 阅读 · 0 评论 -
vue制作弹框,并且禁止滚动
1- 组件内容:<template> <div class="modal-bg" v-show="show"> <div class="fade"></div> <div class="modal-container"> <div class="modal-header"> ...原创 2019-08-20 15:00:17 · 1118 阅读 · 0 评论