vue
文章平均质量分 61
E_li_na
这个作者很懒,什么都没留下…
展开
-
vue实现图片预加载实操
业务场景是这样的:在页面里有一个提醒文案,提醒文案里有个按钮,点击按钮会弹出示例弹窗,弹窗里上面有标题,中间一个比较大的图片,27kb;下面有个按钮。在苹果手机使用微信打开时,上面的标题和下面的按钮都先于图片加载出来。中间的按钮过了一会才渲染出来。为此,我也懒得去找ui沟通能不能把图片弄小一点,正好试试图片预加载这个功能。于是,在网上搜索到1、实例化Image对象,添加src为需要预加载的图片路径function preloadImg(url) { var img = new Image()原创 2020-12-17 16:51:44 · 1909 阅读 · 1 评论 -
elementui里input type=“textarea“无法输入及提示校验信息
场景1:是这样的,input 写在el-dialog里面,根据另一个字段决定要不要显示这个input。新增和修改用的都是这个dialog。新增的时候input框输入后没有提示校验信息;但是,修改的时候,如果修改的是让另一个字段使得这个input从隐藏改成显示,然后在这个input里输入值后,不会在input框里显示值,但是查看data里是有值的。原因:出现这种情况时因为视图没有更新。解决办法:网上说的解决办法有添加@input事件。我按照要求添加了@input事件后,然后强制更新this.$forceU原创 2020-09-18 11:12:14 · 5062 阅读 · 0 评论 -
路由跳转时的参数传递
1.params传递:this.$router.push({ name:'路由名字', params:{ id:'1234' }})获取:this.$route.params.id2.path传递:this.$router.push({ path:'mypathUrl'+id })获取:this.$route.params.id需要在路由表中做相应的配置:{ path:'mypathUrl/:id'}3.query这种方式会在url地址中出现参数原创 2020-08-31 19:37:31 · 589 阅读 · 0 评论 -
用vue写npm插件
一、调用插件通过全局方法Vue.use()使用插件,必须在new Vue()启动之前使用这个方法。main.jsimport cyui from 'cyui';Vue.use(cyui);new Vue({});还可以传入可选的配置对象:Vue.use(cyui,{ someOptions:true });那么,平时,我们这样调用的插件究竟是怎么写出来的呢?二、开发插件官方...原创 2020-03-22 11:14:38 · 401 阅读 · 0 评论 -
element-ui同时获取el-select选中对象中的多个属性值
<el-form-item label="用户角色:" prop="userRoleId"> <el-select v-model="form.userRoleId" placeholder="-请选择-&原创 2018-08-14 17:02:31 · 21635 阅读 · 10 评论 -
快速生成vue模板页配置
第一步:添加用户代码片段打开 vsocde 的 首选项 > 用户代码片段 ,输入vue,选择代码片段文件为 vue.json。输入以下内容。"Vue component": { "prefix": "vuec", "body": [ "<te原创 2018-07-29 09:23:33 · 4833 阅读 · 3 评论 -
vue-cli中使用 JSON Server 搭建 Mock 服务器
1、全局安装:npm i -g json-server 2、项目目录下创建mock文件夹 3、mock文件夹下添加db.json文件,内容如下:{ "posts": [ { "id": 1, "title": "jk", "author": "Anne" } ], "comments": [ { "id": 1,原创 2018-06-20 17:16:50 · 311 阅读 · 0 评论 -
vue里的v-for和key
当vue用v-for渲染列表的时候,默认地,它采取“就地补丁”策略。如果数据项的顺序改变了,vue将在原地修补每个元素,并且确保它映射到特定的索引的渲染上,而不是移动DOM元素去匹配项目的顺序。这和vue1.x的track-by="$index"行为类似。vue要跟踪每个节点的身份,重用和重新排序所有元素,我们必须给它一个提示以便它完成这些工作。**我们必须为每个item提供一个唯一的key属...原创 2018-05-31 11:02:00 · 1519 阅读 · 0 评论 -
element-ui
element-ui官网 Layout布局里的xs,sm,md,lg等可以结合bootstrap里的响应式使用工具看看。github相关项目参考原创 2018-05-29 09:33:29 · 1646 阅读 · 0 评论 -
使用vue-cli,webpack打包报错:Uncaught SyntaxError: Unexpected token <
今天在用vue-cli搭建项目的时候使用webpack打包后出现了这个错误。网上搜了发现之所以有这个错误是因为js中用了es6语法,在编译时没有转译成es5语法。看了下bundle.js文件,果然没有将es6转为es5!但是vue-cli下载下来的webpack那个模板已经集成了babel,相关设置在.babelrc这个文件里,不会是没有相关的包啊·。然后就想到webpack官网说要安装LTS版本...原创 2018-05-16 19:34:57 · 21461 阅读 · 0 评论 -
cube-ui之单例模式
通过API调用组件的时候,需要涉及到组件的单例、多例模式。如果组件是单例的,在多次实例化的时候,只有一个实例,对应的视图层也只存在一份;如果组件是多例的,那么每次实例化的时候都会产生一个新的实例,且对应的视图也是多份的,它们之间互不影响。在cube-ui中涉及到API调用的组件的基本都是弹层类,经常使用的如下: - Toast提醒 - Picker选择器 - TimerPicker时间选...原创 2018-05-15 15:56:50 · 1938 阅读 · 1 评论 -
jsencrypt 对password进行加密
在做项目中的登录功能时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,在这个过程中,在前端对登录密码先进行一次加密的话,安全性肯定要优于直接提交的方式。 安装: npm install encryptjs --save-devvue组件:import { JSEncrypt } from 'jsencrypt'方法内使用:let encryptor ...原创 2018-08-13 11:28:17 · 3942 阅读 · 0 评论 -
Vue-loader.conf.js
'use strict'// 工具=> build/util.jsconst utils = require('./utils')// 配置=> build/config/index.jsconst config = require('../config')const isProduction = process.env.NODE_ENV === 'production'...转载 2019-06-26 15:23:02 · 377 阅读 · 0 评论 -
使用vue-loader不必require图片
以前在写vue的时候,经常要写这样的代码,把图片提前require给一个变量,然后再把变量传给组件(注意是组件,不是原生的东西,不是原生如img):<template> <div> <avatar :default-src="logoUrl"></avatar> </div></template><scr...原创 2019-06-26 15:17:53 · 1644 阅读 · 0 评论 -
Vue组件通信中eventBus的使用
Vue组件通信中eventBus的使用转载 2019-04-12 16:48:35 · 591 阅读 · 0 评论 -
详解:为什么在keep-alive组件中使用computed计算属性数据没有变更?
第一步:computed在生命周期的哪个阶段执行?(1)在new Vue()的时候,vue\src\core\instance\index.js里面的_init()初始化各个功能function Vue (options) {if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue)) { ...原创 2019-04-11 10:40:50 · 2046 阅读 · 0 评论 -
Vue样式scoped存在的问题
为了解决css存在的一大痛点:天生全局性,每个通过 vue-cli 创建的 Vue.js 应用都内置了两个很好的解决方案:Scoped CSS 和 CSS Modules (模块式 CSS)。现在我们只介绍Scoped CSS.我们只需在&lt;style&gt;标签上添加scoped属性就可以让样式只应用到该组件的元素上。&lt;template&gt; &lt;button class...原创 2018-11-30 15:26:17 · 579 阅读 · 0 评论 -
vue2自定义指令directive
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。官网1.分类 =&amp;gt; 全局 、局部自定义指令有全局指令和局部自定义指令// 注册一个全局自定义指令 `v-focus`Vue.directive...原创 2018-10-07 16:43:32 · 825 阅读 · 0 评论 -
vue-cli搭建vue项目生成的文件夹解析
1.build文件夹 主要进行webpack的一些配置。webpack.base.config:基本webpack配置; webpack.dev.config.js:开发环境配置; webpack.prod.config.js:生产环境配置。 这些文件里面已经有基本的配置,我们只需根据自己的需求再添加loader,2.config文件夹 最主要的时index.js文件...原创 2018-05-08 15:19:40 · 3514 阅读 · 0 评论 -
cube-ui之后编译
后编译指的是应用依赖的NPM包,不需要在发布前编译,而是随着应用编译打包的时候一块编译。背景使用webpack+babel开发应用越来越多,而且一般都是通过NPM进行包管理的,这样依赖包越来越多,这些依赖包也是使用ES6+开发的,所以每个包都需要编译才能发布,这样编译后代码中往往包含很多编译代码,为了消除这部分冗余,推荐大家使用后编译。 后编译解决的问题主要是代码冗余。后编译优点...原创 2018-05-15 11:23:44 · 1690 阅读 · 0 评论 -
使用vue-route时安装vue-loader遇到的坑
问题描述: 当时是在尝试用vue-router做路由,用了vue-cli搭建项目。由于对Eslint不熟悉,就按照网上的一个教程取消了Eslint代码规范。然后一npm run dev就出现下面的错误提示: 但是我明明安装了vue-loader啊!!! 问题出在我取消ESLint的时候,网上给出的解决方法是这样的,将build文件夹里的webpack.base.conf.js里的一些代码...原创 2018-05-08 14:12:26 · 5609 阅读 · 0 评论 -
axais初步接触(二)
默认配置axios的默认配置是可以修改的,修改后用于所有的请求。全局axios默认值axios.defaults.baseRUL='http://baidu.com';axios.defaults.headers.common['Authorization']=AUTH_TOKEN;axios.defaults.post['Content-Type']='appliccaion...原创 2018-05-11 11:32:54 · 2674 阅读 · 0 评论 -
vue-router命名视图
定义命名视图就是给路由出口设置class属性。<router-view class="view-one"></router-view>2.使用背景 需要同时展示多个视图,在界面中拥有多个单独命名的视图而不是只有一个路由出口。 3.路由设置 因为一个视图只能渲染一个组件,因此要渲染多个视图就要使用多个组件。现在,跟单个视图不同的是,路由的组件必须设置...原创 2018-05-04 16:17:05 · 736 阅读 · 0 评论 -
axios初步接触(一)
官网简介axios是vue全家桶中的vue-resource不再维护后被推荐出来并逐渐流行。 axos是一个基于Promise用于浏览器和nodejs的HTTP客户端,本身具有的特征: - 从浏览器中创建XMLHttpRequest - 从nodejs发出http请求 - 支持Promise API - 拦截请求和响应 - 转换请求和响应数据 - 取消请求 - 自动转换JS...原创 2018-05-10 18:15:37 · 444 阅读 · 0 评论 -
vue-router命名路由
命名路由使用name属性配置,const router=new VueRouter({ routes:[ { path:'/user/:userid', name:'user',//设置name属性 component:User } ]})那么路由设置好了,如何链接...原创 2018-05-04 10:17:58 · 278 阅读 · 0 评论 -
vue嵌套路由
1.存在的原因 更简单地表达多层嵌套地组件之间的关系。一个被渲染的组件同样可以包含<router-view>const User={ template:` <div class="user"> <h2>user {{ $route.params.id }}</h2> <router-vi...原创 2018-05-03 16:55:32 · 160 阅读 · 0 评论 -
第一个vue-router应用
用 Vue.js + vue-router 创建单页应用,是非常简单的。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HelloWorld</title> &am原创 2018-05-03 11:16:32 · 152 阅读 · 0 评论 -
vue-router动态路径参数
1.应用场景:只有一个组件,有多个用户ID;多个用户ID都要映射到这个组件上。 2.语法:动态路径参数以:开头,仅有路径参数不同的路径都将映射到同一个路由,当匹配到一个路由时,参数值会被设置到this.$route.params,如图黄色部分: this.$route.params属性可以在每个组件当中使用,比如我们可以修改user组件: 如果路由挂载成功会有&lt;Anonymou...原创 2018-05-03 15:45:36 · 12010 阅读 · 0 评论 -
vue-router两种模式:hash模式和history模式
为了构建SPA,vue引入了前端路由系统vue-router。 vue-route有两种模式:history模式和hash模式。1. hash模式(vue-router默认hash模式)hash模式背后的原理是onhashchange事件。window.onhashchange=function(){ let hash=location.hash.slice(1); do...原创 2018-05-06 11:11:22 · 26675 阅读 · 1 评论 -
vue-cli构建vue项目
如果已经安装了node.js,则可以直接安装vue-cli;否则先安装node.js。1.首先安装vue-cli:npm i vue-cli安装完了有如图所示:2.创建项目 vue i webpack test test是项目的名称如果创建成功,会出现一问一答模式: 3.一问一答结束回车会生成项目目录结构 进入test文件夹 4.进入项目目录,安装依赖...原创 2018-05-08 11:32:57 · 184 阅读 · 0 评论 -
用vue撸后台(一)
vue-cli默认只提供了dev和prod两种环境;但是真正的开发流程可能多了sit(测试环境)和stage(预发布环境)。 前后端API文档生成器(Swagger)[https://swagger.io/],相关教程:(Swagger UI教程 API 文档神器 搭配Node使用)[https://www.jianshu.com/p/d6626e6bd72c],(Swagger Edit 安装...原创 2018-05-25 10:16:08 · 479 阅读 · 0 评论 -
vue-router滚动行为
滚动行为只在支持history.pushState的浏览器中可用 当创建一个Router实例时,可以提供一个scrollBehavior方法。const router=new VueRouter({ routes:[], scrollBehavior(to,from,savedPosition){ //return 期望滚到那个位置的对象 }})scrollBehavio...原创 2018-05-07 16:59:44 · 247 阅读 · 0 评论 -
vue-router数据获取
有时进入路由之后需要从服务器获取数据。例如在渲染用户信息时,需要从服务器获取用户数据。我们可以有两种方法来实现:一种是导航完成之后获取,一种是导航之前获取。 先完成导航的,需要在接下来的组件生命周期钩子中获取数据,在数据获取期间显示【加载中】之类的提示。 导航完成之前获取数据的,在路由进入的守卫获取数据,数据获取完了再完成导航。导航完成后获取数据在组件的created钩子中...原创 2018-05-07 16:16:09 · 2363 阅读 · 0 评论 -
vue-router过渡动效
路由的过渡效果用的&lt;transition&gt;,transition的所有功能在这里同样适用所有路由设置一样的动态效果&lt;transition&gt; &lt;route-view&gt;&lt;/route-view&gt;&lt;/transition&gt;单个路由设置过渡效果在各个路由组件内使用&原创 2018-05-07 14:46:58 · 984 阅读 · 0 评论 -
vue-router路由元信息meta
配置路由时可以配置meta字段,这个字段是元字段。 我们称routes配置中的每个路由对象为路由记录;路由记录是可以嵌套的,因此当一个路由匹配成功后,他可能有多个路由记录。 例如,下面这个例子将匹配父路由记录以及子路由记录。const router=new VueRouter({ routes:[ { path:'/foo', component:Foo, chil...原创 2018-05-07 11:05:30 · 4193 阅读 · 0 评论 -
vue-router导航守卫
什么是导航守卫?导航守卫就是通过跳转或者取消的方式守卫导航。1.全局前置守卫分为全局前置守卫、通过router.beforeEach注册全局前置守卫const router=new VueRuter({})router.beforeEach((to,from,next)=&gt;{ //do something})参数解析-to:route...原创 2018-05-07 10:22:55 · 934 阅读 · 0 评论 -
表单控件绑定之checkbox
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HelloWorld</title> <script src="https://cdn.jsde原创 2018-04-08 21:00:11 · 723 阅读 · 0 评论