vue
青椒切小块
这个作者很懒,什么都没留下…
展开
-
(转)Vue路由开启keep-alive时的注意点
这个不是业务的要求,但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM,觉得作为一个前端工程师有必要优化下的加载逻辑,正好vue提供了 keep-alive 的功能,所以就试用了下。当然,干任何事儿都不会一帆风顺的,在路上的磕磕碰碰在所难免,故在此记录下遇到的问题,希望看到这篇文章的人能有所帮助。ps:这个也没多难。HTML部分:<template> <div class="app"> <keep-alive> <router-转载 2020-06-02 22:44:28 · 484 阅读 · 0 评论 -
keep-alive
1.keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能2.当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行3.关于这一点也是仁者见仁,有的产品可能会要求在每一次进入一个组件时页面的初始位置都是保持在顶部的,这里可以利用Vue中的滚动行为,但是前提是你是HTML5 history模式4.我们在创建一个router实例的时候,可以提供一个scrollBehavior(滚动行为)方法,该方法会在用户切换路由时触转载 2020-06-02 21:13:55 · 380 阅读 · 0 评论 -
(转)vue-router路由拦截、http拦截
一.路由拦截登录拦截逻辑第一步:路由拦截首先在定义路由的时候需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由,否则就进入登陆页面。const routes = [{ path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的 }, component: R转载 2020-06-02 18:50:02 · 1794 阅读 · 0 评论 -
(转)vue 跨域问题解决方案
用Vue-cli脚手架搭建了个demo,前后分离就有跨域问题的出现。vue-clie搭建demo步骤(传送门):https://www.cnblogs.com/wangenbo/p/8487764.html我自己在网上找了2个接口做测试:CSDN:https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false掘金:https://s转载 2020-05-28 23:15:55 · 752 阅读 · 0 评论 -
vue-app项目知识点总结(三)
一.分类页面1.页面结构2.新建文件夹主页面:Category.vue分类列表:CategoryList.vue对应商品:CategoryGoods.vue网络请求都写到Category.js中3.我们先写分页主页面大框这里我们先把左侧列表引到里面来了Category.vue<template> <div id="category"> ...原创 2020-05-25 22:52:29 · 553 阅读 · 0 评论 -
vue-app项目知识点总结(一)
一. FeatureView独立组件封装FeatureViewdiv>a>img二. TabControl独立组件的封装props -> titlesdiv>根据titles v-for遍历 div -> span{{title}}css相关选中哪一个tab, 哪一个tab的文字颜色变色, 下面border-bottomcurrent...原创 2020-05-25 20:04:57 · 2004 阅读 · 0 评论 -
vue-app项目知识点总结(二)
一. FeatureView独立组件封装FeatureViewdiv>a>img二. TabControl独立组件的封装props -> titlesdiv>根据titles v-for遍历 div -> span{{title}}css相关选中哪一个tab, 哪一个tab的文字颜色变色, 下面border-bottomcurrent...原创 2020-05-23 01:02:20 · 1411 阅读 · 2 评论 -
(转)vuejs点击获取当前元素内容
我的代码是这样的<div class="shopchart-item" v-for="item in shopCart.props"> <div>{{item.label}}</div> <div class="goodslist" v-for="name in item.list" @click="btn_user($event)">{{name.name}}</div>我想要拿到{{name转载 2020-05-21 19:08:11 · 1629 阅读 · 0 评论 -
(转)Vue中使用 transition标签或transition-group标签以及第三方类实现动画
Vue的动画并没有非常炫酷的效果,不过也是有一些实用性的,在项目中有的地方使用,也是能够营造出不同的效果下面为大家列举两个简单实现动画的例子使用 <transition> 包裹<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script rel="script" s转载 2020-05-21 17:30:33 · 876 阅读 · 0 评论 -
(转)Vue微信授权登录前后端分离较为优雅的解决方案
这两天给之前做的移动端商城加了一个登录页面,头脑一热寻思整个微信登录吧,去官网文档看了一圈,这是在说什么?一度怀疑人生,不得不承认我就是个菜鸡。找了好久找的这个分享给大家,个人感觉讲的同清楚的,但是单独一个前端实现不了这个功能,希望以后在公司更接触到这个试着做一下试试吧——————————原文分割线————————————————————微信授权登录是一个非常常见的场景,利用微信授权登录,我们可以很容易获取用户的一些信息,通过用户对公众号的唯一openid从而建立数据库绑定用户身份.微信授权登录的机转载 2020-05-20 15:36:23 · 946 阅读 · 0 评论 -
Vue响应式原理Object.defineProperty这样理解(二)
输入框内输入外面内容有人修改控制台修改message内容<div id="app"> <input type="text" v-model="message"> {{message}}</div><script> const app = new Vue({ el:'#app', ...原创 2020-05-05 21:44:05 · 385 阅读 · 0 评论 -
Vue响应式原理Object.defineProperty这样理解(一)
<div id="app"> {{message}} {{message}} {{message}}</div><script src="js/vue.js"></script><script> const app = new Vue({ el:'#app', data...原创 2020-05-05 13:25:24 · 637 阅读 · 0 评论 -
(转)Element/vue router连续点击多次路由报错解决方法
Element-ui 点击多次路由会报错:NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”}查找到了一篇比较好用的解决文章 (亲测有效), 方法如下↓把项目依赖的 node_modules 文件夹删除, 然后再 npm install 重新下载依赖包就可以解决。如果在重新下...转载 2020-04-24 10:38:16 · 563 阅读 · 0 评论 -
vue移动端项目中会用到的better-scroll基本使用
GitHub:https://github.com/ustbhuangyi/better-scroll/tree/v2.0.0-beta.6官方文档:https://better-scroll.github.io/docs/zh-CN/我们在pc端显示的效果也是可以滑动的但是到了移动端就可能出现卡顿状态,better-scroll能够让页面的滑动更加流畅1.安装在vue我们直接下载并引入...原创 2020-04-23 12:12:44 · 1081 阅读 · 1 评论 -
解决webstorm中vue语法突然失效没有提示
早上起来昨天还好好的.vue文件都变成txt那种了解决方法原创 2020-04-20 10:02:47 · 1666 阅读 · 0 评论 -
怎么上传项目到github
创建github项目原创 2020-05-25 11:42:29 · 438 阅读 · 0 评论 -
axios网络模块封装笔记
(以上内容根据微博“coderwhy”的vue视频课程整理,感谢王红元老师ღ( ´・ᴗ・` )比心)原创 2020-04-19 14:28:09 · 557 阅读 · 0 评论 -
Vuex学习笔记
Vuex是做什么的?官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储管理 应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel调试、状态快照导入导出等高级调试功能。状态管理到底是什么?状态管理模...原创 2020-04-18 14:27:08 · 469 阅读 · 0 评论 -
(转)记一次vue长列表的内存性能分析和优化
面试竟然问道了后台传过来1000条数据如何优化,凉凉了分享一下这个博主的长列表优化—————————————————————————————————这个长列表页面,其实是一个实时日志上报的页面,随着页面打开时间的增加,日志数量也会增多,常规的页面布局和渲染免不了会遇到性能问题。使用了vue框架,框架内部的虚拟DOM和组件缓存已经做了一些优化,比起原生实现是有了一些优化处理。但这个页面是用...转载 2020-04-16 22:21:08 · 631 阅读 · 0 评论 -
Vue组件化开发(二)
10.父子组件的通信子组件是不能引用父组件或者Vue实例的数据的。但是,在开发中,往往一些数据确实需要从上层传递到下层:比如在一个页面中,我们从服务器请求到了很多的数据。其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。如何进行父子组件间的通信呢...原创 2020-04-10 14:55:59 · 310 阅读 · 0 评论 -
Vue组件化开发(一)
认识组件化我们将一个完整的页面分成很多个组件。每个组件都用于实现页面的一个功能块。而每一个组件又可以进行细分。组件化思想的应用:有了组件化的思想,我们尽可能的将页面拆分成一个个小的、可复用的组件。这样让我们的代码更加方便组织和管理,并且扩展性也更强。注册组件的基本步骤(以上内容根据微博“coderwhy”的vue视频课程整理,感谢王红元老师ღ( ´・ᴗ・` )比心)...原创 2020-04-09 23:11:43 · 393 阅读 · 0 评论 -
vue模板语法整理(三)
表单绑定v-modelVue中使用v-model指令来实现表单元素和数据的双向绑定。基本使用方式<div id="app"> <input type="text" v-model="message"> {{message}}</div>当我们在输入框输入内容时1).因为input中的v-model绑定了message,所以会实时将输入的...原创 2020-04-08 11:18:41 · 196 阅读 · 0 评论 -
VUE一些小功能案例
计数器<div id="app"> <h2>当前计数: {{counter}}</h2> <button @click="add">+</button> <button @click="sub">-</button></div><script> con...原创 2020-04-08 00:47:59 · 758 阅读 · 0 评论 -
vue模版语法整理(二)
事件监听在前端开发中,我们需要经常和用于交互。这个时候,我们就必须监听用户发生的时间,比如点击、拖拽、键盘事件等等在Vue中如何监听事件呢?使用v-on指令v-on作用:绑定事件监听器缩写:@v-on参数当通过methods中定义方法,以供@click调用时,需要注意参数问题:1.事件调用的方法没有参数<div id="app"> <button @...原创 2020-04-07 19:52:58 · 212 阅读 · 0 评论 -
(转)vue v-on修饰符
1、stop功能:阻止事件冒泡使用方法:<button v-on:click.stop="show">B</button>举例:<div id="app"> <div style="width: 100px;height: 100px;background-color: #008000;" v-on:click="show"> ...转载 2020-04-07 17:43:37 · 413 阅读 · 0 评论 -
vue模版语法整理(一)
创建Vue实例传入的options这个options中可以包含哪些选项呢?详细解析: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE目前掌握这些选项:el:类型:string | HTMLElement作用:决定之后Vue实例会管理哪一个DOM。data:类型:Object | Functi...原创 2020-04-07 14:51:42 · 232 阅读 · 0 评论 -
vue中会用到的ES6语法和高阶函数
filter/map/reduce我们通过案例来了解这些函数和方法const nums = [10, 20, 111, 222, 444, 40, 50]1.需求: 取出所有小于100的数字let newNums = []for (let n of nums) { if (n < 100) { newNums.push(n) }}2.需求:将所有小于100...原创 2020-04-11 22:31:26 · 891 阅读 · 0 评论 -
TabBar底部导航案例(这里有取别名的问题)
TabBar实现思路1.如果在下方有一个单独的TabBar组件,你如何封装自定义TabBar组件,在APP中使用让TabBar出于底部,并且设置相关的样式2.TabBar中显示的内容由外界决定定义插槽flex布局平分TabBar3.自定义TabBarItem,可以传入 图片和文字定义TabBarItem,并且定义两个插槽:图片、文字。给两个插槽外层包装div,用于设置样...原创 2020-04-06 14:30:44 · 747 阅读 · 0 评论 -
vue-router笔记自用
1.认识路由什么是路由?路由是一个网络工程里面的术语。路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. — 维基百科我们生活中有常用到路由器,路由器提供了两种机制: 路由和转送.路由是决定数据包从来源到目的地的路径.,转送将输入端的数据转移到合适的输出端.路由中有一个非常重要的概念叫路由表,路由表本质上就是一个映射表, 决定了数据包的指向.后端路由阶段...原创 2020-04-05 19:22:22 · 436 阅读 · 0 评论 -
Vue CLI笔记
什么是Vue CLI■如果你只是简单写几个Vue的Demo程序那么你不需要Vue CLI.■如果你在开发大型项目,那么你需要,并且必然需要使用Vue CUI使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情.如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。■CU是什么意思?...原创 2020-04-01 15:33:34 · 196 阅读 · 0 评论 -
webpack的基础使用、配置以及文件处理方式(图文为主)(二)
5.webpack中配置Vue引入vue.js后续项目中,我们会使用Vuejs进行开发,而且会以特殊的文件来组织vue的组件。所以,下面我们来学习一下如何在我们的webpack环境中集成Vuejs。现在,我们希望在项目中使用Vuejs ,那么必然需要对其有依赖,所以需要先进行安装(注:因为我们后续是在实际项目中也会使用vue的,所以并不是无发时依赖)npm install vue --s...原创 2020-03-29 13:10:25 · 221 阅读 · 0 评论 -
vue+element下拉列表搜索列表数据
1.以性别为例性别:<el-select v-model="listQuery.xb" placeholder="性别" clearable class="filter-item "> <el-option v-for="item in xbTypeOptions" :key="item.key" :label="item.display_name" :val...原创 2020-03-27 17:33:55 · 3360 阅读 · 0 评论 -
vue+element查询列表数据
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="审批人"> <el-input v-model="formInline.user" placeholder="审批人"></el-input> &l...原创 2020-03-27 17:24:37 · 3202 阅读 · 0 评论 -
模块化开发-export和import的基本使用
JavaScript原始功能■在网页开发的早期, js制作作为-种脚本语言,做一 些简单的表单验证或动画实现等,那个时候代码还是很少的。直接将代码写在<script>标签中即可■随着ajax异步请求的出现,慢慢形成了前后端的分离客户端需要完成的事情越来越多, 代码量也是与日俱增。为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,进行维护。但是这种维护方式,依然不能避免一...原创 2020-03-26 00:01:22 · 835 阅读 · 0 评论 -
webpack的基础使用、配置以及文件处理方式(图文为主)(一)
1.简介webpack是一个现代的js应用的静态模块打包工具前端模块化■前端模块化:在前面学习中,我已经用了大量的篇幅解释了为什么前端需要模块化。而且我也提到了目前使用前端模块化的一些方案: AMD、CMD、CommonJS、 ES6。在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发。并且在通过模块化开发完成了项目后,还需要处理模块间的各 种依...原创 2020-03-28 11:15:36 · 383 阅读 · 0 评论 -
解决npm run dev报错npm ERR! missing script: dev
搭建node.js+vue.js开发环境npm run dev 报错可能是版本问题命令不同,试试把npm run dev换成npm run serve 这个命令就可以了查看自己的版本命令 vue -V 我的是最新版3.9.3浏览器输入localhost:8080 如下页面即成功!...转载 2020-03-21 08:44:03 · 5157 阅读 · 3 评论 -
vue select绑定数据想一次传多个值作为参数/选择值改变,显示不变bug
上一篇关于下拉框的地址在vue中给el-select下拉框传默认值<el-select v-model="form.Name"> <el-option v-for="item in dqList" :key="item.dqId" :label="item.name" :value="item.dqId"></el-option></el-sel...原创 2020-01-13 14:27:02 · 2341 阅读 · 0 评论 -
在vue中给el-select下拉框传默认值
这里点进目录就是一个表单,要求给后台传下拉框内容的一个默认值,并且要求显示朝阳区的话,传给后台‘1’,数字而不是字符串,1.下拉框内容是后台传过来的<el-select v-model="dqId" id="dqId" @change="getDataList"> <el-option v-for="item in dqList" :key="item.dqI...原创 2020-01-13 10:00:11 · 6657 阅读 · 0 评论 -
vue中切换下拉页面内容,实时传送给后台(input 内容改变的触发事件)
1.input 内容改变的触发事件https://www.cnblogs.com/littlesummer/p/6428116.html2.JavaScript监听input输入事件<body> <input type="text" id="myInput" oninput="inputFunction()"> <p id="demo"></p...转载 2020-01-08 11:42:02 · 774 阅读 · 0 评论 -
vue实现年份/月份下拉
有的项目表单会要求查询某年一整年情况,这样就没办法用type="Date"了搬运一个好用的方法子组件代码 DateSelect.vue<!-- 日期搜索框 --><template> <div id = "myDate" > <el-button icon="el-icon-caret-left" @click="dateChan...转载 2020-01-08 11:25:05 · 6148 阅读 · 0 评论