![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
星期五の夜
stay hungry ... stay foolish ...
展开
-
element-ui表格动态增删改
element表格动态增删改原创 2022-12-05 16:31:08 · 751 阅读 · 0 评论 -
vue中点击高德地图获取经纬度
vue中使用高德地图原创 2022-11-08 16:25:19 · 1209 阅读 · 2 评论 -
vue项目去掉网页滚动条
去掉网页滚动条原创 2022-08-24 16:03:39 · 10533 阅读 · 11 评论 -
vue 路由报[vue-router] Duplicate named routes definition
这里有两种解决办法:1.检查下有没有name重名的路由,比如像下面这样:{ path: '/storage-pool', name: 'storagePool', // name 1 component: Layout, children: [ { path: 'drag-table', name: 'DragTable', // name 2 meta: { title:'' }, ..原创 2022-05-26 14:44:03 · 9981 阅读 · 1 评论 -
vue实现移动端适配方案
vue实现移动端适配步骤如下:先安装amfe-flexible和postcss-pxtorem:npm install amfe-flexible --savenpm install postcss-pxtorem --save在main.js导入amfe-flexibleimport 'amfe-flexible';配置postcss-pxtorem,可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置,权重从左到右降低,原创 2022-02-08 16:45:49 · 19378 阅读 · 7 评论 -
vue数据绑定的实现原理
vue数据绑定的实现原理转载 2021-09-24 09:30:54 · 74 阅读 · 0 评论 -
vue全局配置_silent
该设置可以用在生产环境中,避免用户看到报错信息之类的,影响用户体验<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <bod原创 2020-09-14 12:02:49 · 926 阅读 · 0 评论 -
vue中的props
1.基础用法:使用Prop在父组件内向子组件传递参数可以传输动态值和静态值//父组件<son-components message1="静态值" :message2="dynamic"></son-components>data(){ return{dynamic:"动态值"}}//子组件<script>export default {props:['message1','message2'], data(){ return{转载 2020-08-27 14:28:48 · 791 阅读 · 0 评论 -
在vue项目中使用wangEditor
1.vue中安装wangEditor使用的npm安装 npm install wangeditor --save2.创建公用组件在components中创建wangEnduit文件夹,组件内容为<template lang="html"> <div class="editor"> <div ref="toolbar" class="toolbar"> </div> <div ref="editor" class="te转载 2020-08-25 11:05:47 · 503 阅读 · 0 评论 -
vue-router中query与params区别
query和params两者都是在Vue路由中传参用法: query用path来引入,params只能用name来传递,不能使用path1.query方式传参和接收参数//传参this.$router.push({ path:'/xxx' query:{ id:id } }) //接收参数this.$route.query.id传参是this.router,接收参数是this.router,接收参数是this.router原创 2020-08-17 17:44:22 · 179 阅读 · 0 评论 -
前端音视频开发
概念websoket概念基础前端代码demo:文件目录截图:<!DOCTYPE html><html><script src="wfs/wfs.js"></script><body> <div> <p>ip:<input id="host" value="192.168.0.133" /></p> <p>端口:<input i原创 2020-08-12 14:23:45 · 2272 阅读 · 0 评论 -
vue 中复制到剪贴板功能 v-clipboard
1.在vue 官网 /资源列表/Awesome Vue 里面搜索 clipboard 即可以找到 v-clipboard2. 在文档里面有具体的使用步骤1.安装依赖npm install --save v-clipboard 2.在main.js中引入import Vue from 'vue'import Clipboard from 'v-clipboard' Vue.use(Clipboard) 3.使用<template> <button v-cli原创 2020-08-06 18:03:56 · 1422 阅读 · 0 评论 -
js实现阿拉伯数字转换为中文大写金额
js实现阿拉伯数字转换为中文大写金额原创 2020-07-15 09:28:01 · 178 阅读 · 0 评论 -
vue-cli3 一直运行 /sockjs-node/info?t= 解决方案
vue-cli3 一直运行 /sockjs-node/info?t= 解决方案转载 2020-07-06 16:40:25 · 411 阅读 · 0 评论 -
vue 路由10条高级应用技巧
[vue 路由10条高级应用技巧](https://mp.weixin.qq.com/s/j0dROmwJl6BF60JHxidELQ)转载 2021-08-24 13:30:26 · 97 阅读 · 0 评论 -
优秀的工程师如何把vue技巧玩得很6
优秀的工程师如何把vue技巧玩得很6原创 2020-06-02 09:17:17 · 112 阅读 · 0 评论 -
vue-cli起项目步骤
vue-cli起项目步骤原创 2020-04-27 09:18:02 · 88 阅读 · 0 评论 -
关于methods、computed、watch的深入研究
computed:计算属性computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理。<template> <div> <input type="text" v-model="name" /> <span v-s...原创 2020-04-26 17:10:28 · 258 阅读 · 0 评论 -
后台管理项目--注册&登录功能的实现
最终实现效果登录 <el-form ref="form" :model="form" :rules="rules"> <el-form-item> <a style="color:#fff" href="#" type="primary" @click="register">注册</a>...原创 2020-04-25 15:34:06 · 2239 阅读 · 0 评论 -
vue内置组件_transition-group
transition-group实现整体做动画transition-group实现动画效果原创 2020-04-23 10:30:31 · 221 阅读 · 0 评论 -
vue内置组件_transition
vue内置组件_transition原创 2020-04-23 10:09:13 · 143 阅读 · 0 评论 -
vue内置组件_keep-alive
(vue内置组件_keep-alive)[https://www.jianshu.com/p/4b55d312d297]原创 2020-04-23 09:54:55 · 110 阅读 · 0 评论 -
vue实例方法/生命周期_$forceupdate的使用
vue中$forceUpdate的使用解决页面v-for中修改item属性值后页面v-if不改变的问题<template><div> // 调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。 <button @click="reload()">强制更新</button><...原创 2020-04-21 20:14:24 · 627 阅读 · 0 评论 -
vue-Vue.version
<template> <div> </div></template><script>import Vue from 'vue'// var version = Number(Vue.version.split('.')[0])var version = Vue.version // 2.6.10console...原创 2020-04-21 15:42:45 · 1363 阅读 · 0 评论 -
vue全局 API-vue.use
vue-Vue.use原创 2020-04-21 14:50:34 · 224 阅读 · 0 评论 -
vue全局API_vue.component
vue-Vue.component原创 2020-04-21 14:41:24 · 286 阅读 · 0 评论 -
vue选项 / 资源_vue.filter(过滤器)
main.js里写过滤条件(全局过滤器)组件中使用<template><div> <p>{{ message | globalFilter}}</p></div></template><script>export default { data () { return { ...原创 2020-04-21 13:51:29 · 174 阅读 · 0 评论 -
vue全局API_vue.directive(自定义指令)
<template><div id="app"> <span v-hello='color3'>{{ message }}</span> <button @click="add">点击开始加1</button> <button onclick="jiebang()">解绑</button>&l...原创 2020-04-21 11:02:37 · 159 阅读 · 0 评论 -
vue全局API_vue.delete
<template><div></div></template><script>const a = [1, 2, 3, 4]delete a[1]console.log(a) // [1, empty, 3, 4]const b = [1, 2, 3, 4]export default { data () {...原创 2020-04-21 10:16:07 · 175 阅读 · 0 评论 -
vue选项 / 组合_vue.set
vue-Vue.set<template><div id="app2"> <p v-for="item in items" :key="item.id"> {{item.message}} </p> <button class="btn" @click="btn2Click()">动态赋值<...原创 2020-04-21 10:02:29 · 115 阅读 · 0 评论 -
vue_Vue.$nextTick
Vue_vue.$nextTick原创 2020-04-20 17:22:18 · 122 阅读 · 0 评论 -
vue选项 / 组合_vue.extend
<template> <div> <p>Vue.extend是一个全局的API,实际是创建一个构造器,</p> <p>并将其挂载到HTML的元素上(创建一个template标签)。可以通过propsData传参。</p> <h1>Vue.extend</h1> <...原创 2020-04-20 14:42:25 · 222 阅读 · 0 评论 -
如何使用JavaScript实现纯前端读取和导出excel文件
如何使用JavaScript实现纯前端读取和导出excel文件转载 2020-04-15 09:46:54 · 248 阅读 · 0 评论 -
vue -- 路由元信息(meta)
定义路由的时候可以配置 meta 字段, 我们可以在这里设置一些自定义信息,供页面组件或者路由钩子函数中使用。route:meta:{ title:'关于' }路由前置守卫:(我们可以通过 $route.meta.xxxx 获取路由元信息中的数据)我们可以在钩子函数 router.beforeEach 中获取 meta 中的 title 数据,并设置为页面标题rou...原创 2020-04-14 14:45:20 · 1101 阅读 · 0 评论 -
页面下载功能的实现
<el-col :span="12"> <div class="pro_info"> <p>{{ item.softName }}</p> <div class="desc"> ...原创 2020-04-14 11:24:52 · 568 阅读 · 0 评论 -
icon在项目中的使用
将icons文件夹放在src目录下方svg文件夹里面都是一些svg文件index.js里面则是配备的前端工程化js文件import Vue from 'vue'import SvgIcon from '@c/SvgIcon'Vue.component('svg-icon', SvgIcon)const req = require.context('./svg', false, ...原创 2020-04-14 09:44:02 · 452 阅读 · 0 评论 -
vue全局 API_vue.mixins
mixins就是混入。一个混入对象可以包含任意组件选项。同一个生命周期,混入对象会比组件的先执行。1.创建一个test.js,用export暴露出mixins对象export const mixinsTest = { methods:{ hello(){ console.log("hello"); } }, c...原创 2020-04-14 09:37:01 · 236 阅读 · 0 评论 -
vue项目--使用vue-qr插件或qrcode插件生成二维码并获取信息
前提是安装一个叫vue-qr的插件。安装及使用方法详见:vue-qr二维码插件使用简介step1step2step3原创 2020-04-03 11:54:37 · 3278 阅读 · 1 评论 -
Vue列表循环从指定下标开始
最近遇到一个问题,在循环商品列表时,因为数组的第一个是商品的品牌介绍,所以循环时不能直接循环,只能从第二个元素开始。方案1:从数据源头更改,后端直接在列表里去除第一个数组元素。但前端还是需要在别的地方展示品牌信息,故不好去除。(至于为何品牌信息需要和商品混合在一起,原因是业务问题。以前是给APP上展示的。)方案2:循环时,列表切割方案3:利用v-if,因为它的优先级低于v-for方案4...原创 2020-03-13 18:31:47 · 2501 阅读 · 0 评论 -
vue项目如何监听窗口变化
获取窗口宽度:document.body.clientWidth监听窗口变化:window.onresize同时回顾一下JS里这些方法:网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document....原创 2020-03-01 12:29:45 · 1768 阅读 · 0 评论