vue
文章平均质量分 81
潇蓝诺依
这个作者很懒,什么都没留下…
展开
-
el-form 表单的校验
文章目录rules 绑定对象校验数组校验rules 中的关键字说明Typerequiredpatternmin/maxLenenumwhitespacetransformfieldsmessagevalidatorrules 绑定绑定到el-form<template> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item labe原创 2021-12-03 17:48:42 · 20435 阅读 · 2 评论 -
vue滚动到指定位置
vue 滚动到指定位置<div class="box1"> <div v-for="i in 50" :key="'a' + i" :ref="'a' + i">{{ i }}</div></div>⚠️ refs 当与v-for使用时,要加[0]1.Element.scrollIntoViewMDN scrollIntoViewscroll(pos) { // 不受定位影响 ,但是水平及垂直方向无法自定义数值,只能 "start"原创 2020-09-14 15:34:37 · 3088 阅读 · 0 评论 -
vue项目使用github actions自动部署
文章目录1.Personal access tokens2.项目设置3. 配置项目路径4. 配置文件最后1.Personal access tokens将token复制下来,下一步会用到。2.项目设置将名字保存下,后面会用到3. 配置项目路径package.json 配置 homepage//"homepage": "https://[用户名].github.io/[仓库名称]","homepage": "https://xiaolannuoyi.github.io/vue-r原创 2020-09-14 14:19:46 · 1469 阅读 · 1 评论 -
element upload 只上传单个文件,并覆盖,获取文件的文本内容
element upload 只上传单个文件,并覆盖<template> <div style="width:500px"> <el-upload class="upload-demo" drag action="" multiple :file-list="fileList" :auto-upload="false" :on-change="handleChange"原创 2020-08-18 11:58:28 · 2010 阅读 · 0 评论 -
vue页面传参
文章目录路由1.动态路由2.query3.路由解偶sessionStorage、localStorage页面刷新,丢失数据问题1. 路由+sessionStorage2. vuex+sessionStorage+路由拦截路由1.动态路由路由配置{ path: '/user/:userId', name: 'user', component: User}路由跳转方式this.$router.push('/user/123')this.$router.push({path: '/原创 2020-07-27 16:56:50 · 508 阅读 · 0 评论 -
组件通信-进阶
基础父子组件父组件引用子组件父组件给子组件传值(props)子组件触发父组件方法($emit)props双向数据绑定(.sync)父组件调用子组件方法和值(ref)子组件使用父组件的值和方法($parent)兄弟组件子——>父——>子(通过上面的父子组件传递的方法)vuexevent-bus组件通信-基础 文章地址文章目录基础进阶(跨级通信)2. `$attrs`/`$listeners`3.派发与广播(dispatch/broadcast)4. 找到任意组件实原创 2020-07-21 14:39:56 · 324 阅读 · 0 评论 -
vue-running在线运行 .vue文件
文章目录vue-running实现方法vue-running在线运行 .vue文件,支持element-ui、iview。参考iview-run用到了iview split面板分割组件、vue-codemirror插件实现方法使用了vue的构造器extend与手动挂载$mount将代码进行切割(html,js,css)extend 构造的实例通过$mount 渲染后,挂载到了组件唯一的一个节点上。(new Function,extend, $mount )组件销毁时,手动销毁 e原创 2020-06-07 19:56:45 · 4004 阅读 · 1 评论 -
vue多表单的合成设计与实现
文章目录vue多表单的合成设计与实现基本功能情景1vue多表单的合成设计与实现不会起名字,先叫这个吧????项目中是否会遇到很多个表单(十几个,几十个那种),这时候如何实现。一个个去写么?肯定不是的。基本功能通过遍历表单项来实现 <el-form ref="form" :model="form" label-position="top" size="mini"> <template v-for="(item, index) in formModel.para原创 2020-06-03 15:10:56 · 1883 阅读 · 0 评论 -
vue项目axios封装使用
文章目录axios 封装使用判断是否为`Promise`项目封装拦截器axios 封装使用判断是否为PromiseAxios.get() instanceof Promise返回值是true所以在封装axios时,不要在写成以下方式了getuser(params) { return new Promise((resolve, reject) => { axios...原创 2020-04-10 00:46:51 · 860 阅读 · 0 评论 -
组件props传对象的的坑
文章目录问题测试代码数据不更新情况,如下1.当父组件为空对象时2.当对象初始化数据与异步数据一致时3. 使用v-if 当拿到值后再渲染组件问题对象传递,但是数据更新但页面不更新问题测试代码父组件<template> <div> <h1>父组件{{object}}</h1> <child :obj="object"&...原创 2020-01-10 14:49:23 · 3733 阅读 · 2 评论 -
element 封装分页组件,搜索组件,table分页时排序、保留select选中状态、索引排序
文章目录场景场景开发时,经常见到这样的页面后台将所欲数据传过来,前端进行分页、搜索、排序等功能原创 2019-11-17 01:00:05 · 970 阅读 · 0 评论 -
vue element 项目引入iconfont图标
将下载好的字体图标放在项目中在iconfont.css 中添加样式[class^="my-icon"],[class*=" my-icon"]/*这里有空格*/ { font-family: "iconfont" !important; speak: none; font-style: normal; font-weight: 400; font-...原创 2019-10-31 16:08:34 · 1492 阅读 · 0 评论 -
vue培训
环境node安装cnpm并设置淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm -vvscodegit代码拉取代码原创 2019-10-25 15:44:44 · 885 阅读 · 0 评论 -
cordova 打包vue2 项目教程
cordova 打包vue2 项目教程(win10)cordova 打包vue2 项目教程(win10)1.环境1. vue所需环境2.安卓环境3.cordova1.环境1. vue所需环境1.node安装 2.npm 3.vue脚手架 参考我的vue脚手架搭建2.安卓环境1.Java jdk,jre(并配置环境变量) java...原创 2018-04-21 13:05:21 · 684 阅读 · 0 评论 -
vue-cli3 本地预览打包代码
本地预览打包代码servedist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值),所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器npm install -g serve# -s 参数的意思是将其架设在 Single...原创 2019-08-14 14:23:38 · 1344 阅读 · 0 评论 -
vue-cli3 图片路径
文章目录引入图片的方式项目目录public/static `绝对路径`引用1. 使用相对路径`static/logo.png`2. 使用绝对路径`/static/logo.png`何时使用 public 文件夹src/assets `相对路径`引用1. 相对路径 `../../../assets/logo.png`2. 相对路径 `@/assets/logo.png` 或者`~@/assets...原创 2019-08-14 17:43:54 · 13371 阅读 · 8 评论 -
axios post params(post像get一样使用params传参)
今天有一个接口是/create?name=***&age=****,但是是一个post请求,我只见过get的这种请求.找了好久…解决方法:发表的axios签名是axios.post(url[, data[, config]])。所以你想在第三个参数中发送params对象:.post(`/create`, null, { params: { name:name, age:...原创 2019-08-15 17:14:53 · 23599 阅读 · 5 评论 -
vue2 父子组件间的双向数据绑定 (el-dialog问题)
先推荐下自己的另一篇文章vue父子组件传值,兄弟组件传值涉及到里面相关的内容为3. 子组件触发父组件方法($emit)4.props双向数据绑定(.sync)问题描述二次封装dialog,关闭时须将关闭的状态返回给父组件.(父子组件传值)代码实现父组件<template> <div class="parent"> <h1>我是父组件,我...原创 2019-08-31 21:44:06 · 4444 阅读 · 0 评论 -
用vue-cli3搭建ui库(仿elementUI)
文章目录用vue-cli3初始化项目修改项目结构先写个测试demo1. packages下新建文件夹test,结构如下:2. examples进行测试examples展示markdown文件用vue-cli3初始化项目css 选了sasslint 选了ESLint + Prettiervscode 可下载eslint插件,配置保存自动格式化代码个人配置如下(首选项–>设置)...原创 2019-10-11 15:08:09 · 2611 阅读 · 2 评论 -
Cannot read property 'classList' of null
今天前端项目突然遇到这种报错,原来也没有这种问题。突然出现,找了好久的原因。原来是我安装的谷歌插件的问题。给大家提个醒,不经常使用的插件,一定要修改下配置,因为默认 是可读取和更改网站数据-> 在所有网站上,改成 当你点击此扩展程序时...原创 2019-07-25 15:20:16 · 11436 阅读 · 1 评论 -
根据官网例子一步步实现vueSSR(详细)
根据 官网例子一步步实现vue ssr所用标题对应官网标题基本用法新建一个文件夹 ssrcd ssrnpm init -ynpm install vue vue-server-renderer express --save 或者yarn add vue vue-server-renderer express --save新建文件server.jsserver.js//...原创 2019-07-12 14:57:07 · 5917 阅读 · 13 评论 -
两个路由对应同一组件,页面切换不刷新问题
mounted() { let start = window.location.href.lastIndexOf("/"); let path = window.location.href.slice(start + 1); if (path == "path1") { console.log("path1"); this.getmessage("...原创 2019-05-19 18:01:52 · 4306 阅读 · 0 评论 -
elementui tab标签管理路由页面
文章目录样式准备思路搭建搭建页面框架准备状态管理监听路由变化tab方法样式准备搭建好的vue脚手架(elementui,router,vuex)elementui(NavMenu 导航菜单,Tabs 标签页)思路将打开的所有路由放到一个栈里(openTab:[]),tabs显示遍历openTab初始状态,将首页推入栈,并设置激活状态当切换路由时(监听路由变化),判...原创 2018-10-25 17:16:27 · 33615 阅读 · 79 评论 -
vue知识点
1.provide/inject他们成对出现,用于父级组件向下传递数据。 简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。 需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。父组件&amp;amp;lt;template&amp;amp;gt; &amp;amp原创 2019-05-27 14:12:54 · 570 阅读 · 0 评论 -
vue 组件 选中样式 和 只展开一项
效果图 父组件&amp;lt;template&amp;gt; &amp;lt;div style=&quot;&quot;&amp;gt; &amp;lt;div &amp;gt; &amp;lt;open v-for=&quot;(item,index) in list&q原创 2018-08-30 10:38:56 · 1437 阅读 · 0 评论 -
vue elementui navmenu 多级导航菜单(水平、垂直)
vue elementui navmenu 多级菜单效果图组件&amp;amp;amp;amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;amp;amp;amp;quot;navMenu&am原创 2018-08-20 18:04:57 · 105725 阅读 · 107 评论 -
组件通信-基础
组件最常用的还是用.vue文件的方式编写父组件引用子组件只是单纯的引用父组件给子组件传值子组件与父组件通信1. 父组件引用子组件,只是单纯的引用父组件 (parent.vue)&amp;lt;template&amp;gt; &amp;lt;div class=&amp;quot;parent&amp;quot;&amp;gt; &amp;lt;h1&amp;g原创 2018-02-05 16:50:38 · 1079 阅读 · 2 评论 -
vue实现阿里云的左侧全部菜单
首先,我们先看下阿里云的导航菜单的样式,对这个样式有一个了解。 这个菜单,类似于那种树形菜单,用v-for循环就行了这样的菜单,可以看下这个Vue + ElementUI 手撸后台管理网站基本框架(三)登录及系统菜单加载首先,我们的数据模式要可配的,使用json数据格式,用递归实现 menuList: [ { ...原创 2018-01-23 14:25:15 · 19298 阅读 · 12 评论 -
vuex教程(详细)附带demo
vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。 (就是一种向各个组件可以传参的方式)1. 准备用脚手架搭建一个项目 安装vuex npm install vuex –save新建文件夹store,并在此文件夹下新建store.js文件。项目目录,原创 2017-12-01 16:03:04 · 8648 阅读 · 7 评论 -
vue路由
简单路由在安装脚手架的时候把路由安上,如果没有打开命令行 切换到项目的目录 npm install vue-router –save文件结构说明 mian.js页面配置文件说明 router–>index.js 路由文件说明 开工1. 新建3个组件 pageone.vue代码<template> <div class="hello"> <h1>pageone</h1>原创 2017-11-23 22:22:12 · 247 阅读 · 0 评论 -
vue 父组件异步值传递给子组件 子组件进行数据处理
文章目录模拟异步问题描述原因解决模拟异步父组件&lt;template&gt; &lt;div&gt; 父组件 &lt;child :child-data="asyncData" &gt;&lt;/child&gt; &lt;/div&gt;&lt;/template&a原创 2018-11-08 16:13:36 · 6826 阅读 · 0 评论 -
vue 浏览器页面刷新
当刷新(浏览器刷新)页面的时候,重置到首页(或其他页面)纯js的是window.onload()但是vue几乎不会用到这个,vue所有的是生命周期那么我们可以根据生命周期来实现这个beforeCreate(),created(), beforeMount(), mounted()一个vue只执行一次项目刷新 必执行App.vue,所有将此代码放到App.vue中,或者其他首次加载就会执...原创 2018-11-15 15:42:27 · 10380 阅读 · 1 评论 -
vue项目使用travis-ci自动部署到github
通过GitHub账号登录到travis-ci官网将需要部署的项目打开打开设置环境变量也可以不添加,不添加的话 .travis.yml 参照 如果在上面不配置环境变量token打开github复制生成的token 到上一步位置配置 .travis.yml 文件项目根目录 添加文件 .travis.ymllanguage: node_jsnode_js: - ...原创 2019-04-17 12:38:20 · 1469 阅读 · 0 评论 -
elementui通过router配置多级导航菜单
<template> <el-menu :default-active="$route.path" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" mode="vertical" router > <side...原创 2019-05-19 12:25:16 · 30621 阅读 · 15 评论 -
echarts重写图例点击事件 图例过滤并显示对应图例的折线
添加链接描述添加链接描述在线测试原创 2019-03-25 11:28:08 · 3413 阅读 · 1 评论 -
vue xterm.js命令行使用及问题解决
安装npm i xterm --save配置基础展示&lt;template&gt; &lt;div class="container"&gt; &lt;div id="terminal-container"&gt;&lt;/div&gt; &lt;/div&原创 2019-03-21 15:27:34 · 30331 阅读 · 28 评论 -
vue 异步数据更新问题
问题记录一下出现的问题, 数据翻倍这是复现问题的代码 data() { return { space: "", allresult: [] }; }, methods: { getmessage() { this.allresult = []; axios .get( "htt...原创 2019-01-16 18:41:02 · 4657 阅读 · 1 评论 -
js代码混淆 webpack-obfuscator
{ compact: true,//压缩,无换行 controlFlowFlattening: false,//是否启用控制流扁平化(降低1.5倍的运行速度) controlFlowFlatteningThreshold: 0.75,//应用概率;在较大的代码库中,建议降低此值,因为大量的控制流转换可能会增加代码的大小并降低代码的速度。 deadCodeInject...原创 2019-01-18 18:12:57 · 21338 阅读 · 3 评论 -
vue双向数据绑定实现
主要用到了Object.defineProperty(obj, prop, descriptor);Object.defineProperty数据描述符configurable 是否可删除enumerable 是否可枚举value 该属性对应的值。writable 值是否可修改存取描述符configurable 是否可删除enumerable 是否可枚举get...原创 2018-12-02 13:19:17 · 352 阅读 · 1 评论 -
html处理\n\t字符
vue实现使用到了vue的v-html,和css的white-space: pre;代码&lt;template&gt; &lt;div&gt; &lt;div class='two' v-html="showMessage()"&gt; &lt;/div&gt; &lt;/div&g原创 2018-11-16 15:05:35 · 24655 阅读 · 0 评论