vue
景尘
高山景行,一尘不染
展开
-
[qiankun]: Target container with #container not existed while childOne loading!
主应用container容器不存在导致无法挂载子应用。放在Router标签内,跟Router同级即可。原创 2024-04-19 15:47:37 · 650 阅读 · 2 评论 -
vue 获取div中选中文字内容及位置
使用window.getSelection()获取div中选中文字内容及位置window.getSelection().toString() //选中内容window.getSelection().anchorOffset; //开始位置window.getSelection().focusOffset; //结束位置如果需要兼容ie9以下: if (windo...原创 2019-10-21 14:50:32 · 7507 阅读 · 1 评论 -
Vue2和vue3diff算法
目录一、是什么二、比较方式三、原理分析小结一、是什么diff算法是一种通过同层的树节点进行比较的高效算法其有两个特点: 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中,循环从两边向中间比较 diff算法的在很多场景下都有应用,在vue中,作用于虚拟dom渲染成真实dom的新旧VNode节点比较二、比较方式diff整体策略为:深度优先,同层比较 比较只会在同层级进行, 不会跨层级比较 比较的过程中,循......原创 2021-03-17 09:55:50 · 1279 阅读 · 0 评论 -
vue-cropper 截图
安装:npm install vue-cropper --save-dev用法:<template> <div id="cropper"> <VueCropper ref="cropper" :img="url" :info="option.info" :outputSize="option....原创 2019-07-17 16:34:52 · 1329 阅读 · 0 评论 -
vue路由守卫
全局前置守卫:router.beforeEach全局解析守卫:router.beforeEach全局后置钩子:router.afterEach路由独享守卫:beforeEnter组件内的守卫:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave正如其名,vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导...原创 2020-04-17 10:39:31 · 297 阅读 · 0 评论 -
vue.nextTick()的理解及使用
定义:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;理解:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数...原创 2020-03-23 14:07:14 · 656 阅读 · 0 评论 -
vue之封装loading组件
直接上代码:<!-- 用法: this.$store.commit('showLoading', true);展示 this.$store.commit('showLoading', false);不展示 <div class="main"> <Loading v-show="isLoading" />...原创 2018-12-06 16:14:25 · 2236 阅读 · 0 评论 -
vue-router原理
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求的有两种方式:1、在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航2、使用h5的window.history功能,使用URL的hash来模拟一个完整的URL当打包构建应用时,javascript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路...原创 2018-12-26 15:40:24 · 417 阅读 · 0 评论 -
vue监听滚动事件
mounted() { window.addEventListener("scroll", this.handleScroll, true); },handleScroll(e) { console.log(e.target.scrollTop); let top = e.target.scrollTop; if (top > 176)...原创 2019-01-21 15:50:59 · 537 阅读 · 0 评论 -
vue封装Element的分页
封装的组件代码<template> <div> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPageL" :page-sizes="pageSizesL"原创 2018-12-06 14:14:41 · 802 阅读 · 2 评论 -
vue-cli2.0打包去掉console
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_debugger: true, drop_console: true }, sourceMap: true }),原创 2018-11-20 14:13:49 · 2231 阅读 · 0 评论 -
vue-cli2实现分环境打包步骤(给不同的环境配置相对应的打包命令)
打包命令:1、在config文件内新建test.env.js文件:module.exports = { NODE_ENV: '"testing"', EVN_CONFIG: '"test"',}2、新建prod.env.js:module.exports = { NODE_ENV: '"production"', EVN_CONFIG: '"prod"',}...原创 2018-11-13 15:27:39 · 3363 阅读 · 0 评论 -
vue引入阿里图标
在阿里矢量图官网,下载代码下载下的目录用这几个:然后再main.js引入import './assets/icon/iconfont.css'使用方法:<i class="iconfont icon-gouwuche"></i>展示效果: ...原创 2018-11-09 10:10:27 · 619 阅读 · 0 评论 -
vue引入moment.js
官网:https://www.npmjs.com/package/vue-momentnpm install vue-momentmain.jsimport moment from "vue-moment"Vue.use(moment);Vue.prototype.$Moment = moment;用法案例: <p>{{new Date() | momen...原创 2018-11-06 14:37:16 · 5775 阅读 · 0 评论 -
vue-cli3.0配置移动端flexible
一、项目中安装lib-flexiblenpm install lib-flexible --save二、在项目的入口main.js文件中引入lib-flexibleimport 'lib-flexible'使用postcss-px2rem自动将css中的px转换成remnpm install postcss-px2rem --save-dev在vue.config.j...原创 2018-12-17 11:04:24 · 1568 阅读 · 0 评论 -
vue之slot封装组件弹窗
<template> <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" center> <slot name="content"></slot> </el-dialog>&原创 2019-01-18 17:08:51 · 1659 阅读 · 0 评论 -
vue之computed、method、watch的区别
computed:利用computed计算属性是将 reverseMessage与message绑定,只有当message发生变化时才会触发reverseMessage,computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理; watch主要用于监控vue实例的变化,它监控的变量当然必须...原创 2019-01-25 14:21:18 · 623 阅读 · 0 评论 -
vue之slot属性
单个插槽| 默认插槽| 匿名插槽首先是单个插槽,单个插槽的英文VUE的官方叫法,但是其实也可以叫它默认插槽,或者与具名插槽相对,我们可以叫它匿名插槽。因为它不用设置名称属性。单个插槽可以放置在组件的任意位置,但是就像它的名字一样,一个组件中只能有一个该类插槽。相对应的,具名插槽就可以有很多个,只要名字(名称属性)不同就可以了。父组件:<template> &l...原创 2019-02-18 13:32:57 · 3201 阅读 · 0 评论 -
vue服务端渲染
什么是服务器端渲染 (SSR)?Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都...原创 2019-04-01 10:04:06 · 499 阅读 · 0 评论 -
Vuex刷新后数据消失解决方法
先看vuex的的用法:store.jsimport Vue from 'vue'import Vuex from 'vuex'import { createVuexAlong } from 'vuex-along'Vue.use(Vuex)export default new Vuex.Store({ state: { name: "小强", commit...原创 2019-04-01 15:37:11 · 5410 阅读 · 0 评论 -
vue长列表性能优化
我们应该都知道 vue会通过 object.defineProperty对数据进行劫持,来实现视图响应数据的变化,然而有些时候我们的组件就是纯粹的数据展示,不会有任何改变,我们就不需要 vue来劫持我们的数据,在大量数据展示的情况下,这能够很明显的减少组件初始化的时间,那如何禁止 vue劫持我们的数据呢?可以通过 object.freeze方法来冻结一个对象,一旦被冻结的对象就再也不能被修改了。...原创 2019-06-20 17:39:51 · 4693 阅读 · 0 评论 -
this.$router.push() 在新窗口怎么打开
const routerJump = this.$router.resolve({ path: '/holographicCompany/' + cust_id, query: { reportId: id, customer_id: cust_id, label: 'CCustomer', ...原创 2019-10-11 10:34:24 · 1990 阅读 · 0 评论 -
vuex解决缓存溢出问题
一般情况下,vuex是这样写,但是存在缓存溢出问题建议用下面方法写:原创 2018-07-18 20:47:22 · 4154 阅读 · 0 评论 -
vue搜索内容去空格
通过v-model指令就能实现:<input v-model.trim = "massage" >或者是在变量后面加:let str=""str.trim()原创 2018-10-31 19:39:09 · 1172 阅读 · 0 评论 -
vue数据双向绑定原理
原理:通过数据劫持(Object.defineProperty())结合发布者-订阅者的方式实现的什么是数据劫持(Object.defineProperty())?var Book = {}var name = '';Object.defineProperty(Book, 'name', { set: function (value) { name = value; ...原创 2018-10-31 16:20:55 · 182 阅读 · 0 评论 -
v-if和v-show的区别
相同点:v-if与v-show都可以动态控制dom元素显示隐藏不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css--display:none,dom元素还在。v-if作用:判断是否加载固定的内容,如果为真,则加载;为假时,则不加载。用处:用在权限管理,页面条件加载。语法:v-if=“判断表达式”特点:控制元素插进来或者删除,而不是...原创 2018-08-13 09:30:26 · 166 阅读 · 0 评论 -
浅谈vue-router及总结
1、动态路由匹配const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ]})现在呢,像 /user/foo 和 /user/bar 都将映射到相同的路由。当匹配到一个路由时,参数值会被设置到 this.$route.par...原创 2018-08-15 18:11:23 · 1239 阅读 · 0 评论 -
webpack搭建vue项目,自动打开浏览器
1、vue项目运行命令npm start (npm run dev)之间打开默认浏览器原创 2018-07-30 15:33:52 · 2666 阅读 · 0 评论 -
vue配置全局文件
在工作中发现,配置的全局文件在浏览器被暴露了,原因是在index.html里面直接引入的js文件,解决方法是在main.js文件里面import **** from '.******Vue.prototype.*****=*****;Vue.prototype.****=*****;import GlobalConfig from './assets/lib/globalCon...原创 2018-07-19 10:56:23 · 1422 阅读 · 0 评论 -
vue-router去#号,以及懒加载问题
在new-router实例,里面添加mode:'history'懒加载:需安装npm i babel-plugin-syntax-dynamic-import -D修改 babelrc文件 "syntax-dynamic-import然后:component: () =>import ("@/components/******")...原创 2018-07-18 20:52:23 · 620 阅读 · 0 评论 -
vue-router日常整理
##vue-router##>以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。 **push**// 字符串router.push('home') // 对象router.push({ path: 'home' }) // 命名的路由router.push({ name: 'user', params: { u...原创 2018-07-18 20:39:06 · 240 阅读 · 0 评论 -
浏览器缓存问题
不论面试还是工作中,经常遇到浏览器缓存的问题,例如,样式图片等改好了,也提交了,用户那边还是未解决,你可以在webpack里面配置一下,加hash值,每次输出的文件名不一样,浏览器就会重新加载。找到你的webpack.base.conf.js文件输出的地方chunkFilename: 'chunk[id].js?[chunkhash]',filename: '[name][hash:8...原创 2018-07-18 17:41:05 · 241 阅读 · 0 评论 -
vue组件之间传值
1、父组件往子组件传值父组件先绑定: v-bind:message="message"子组件接收: props: ["message"] 接收数据类型不知一种2、子组件往父组件传值子组件 this.$emit("ievent", data, "lalal");父组件 v-on:ievent="ievent" ievent(...data){console.log(dat...原创 2018-07-18 17:27:54 · 347 阅读 · 0 评论 -
vue框架的性能优化
**v-show,v-if 用哪个?**>频繁切换的使用 v-show,不频繁切换的使用 v-if,这里要说的优化点在于减少页面中 dom 总数 **key 的唯一性**>循环调用子组件时添加 key,key 可以唯一标识一个循环个体,可以使用例如 item.id 作为 key,假如数组数据是这样的 ['a' , 'b', 'c', 'a'],使用 :key="i...原创 2018-07-18 17:07:58 · 1381 阅读 · 0 评论 -
vue配置scss预编译处理器
安装:npm install sass-loader node-sass --save-dev由于vue-cli已经配置好了<style lang="scss">$highlight-color: #F90;$highlight-border: 1px solid $highlight-color;.selected {border: $highlight-...原创 2018-07-18 17:04:12 · 591 阅读 · 0 评论 -
v-if和v-show的区别
v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载)...原创 2018-08-13 09:36:18 · 136 阅读 · 0 评论 -
vue模板语法及指令
模板语法:以下写法是正确的写法<span>{{ msg }}</span><div> //一元运算符 <p>hello {{`world + '!'`}} </p> //模板字符串 <p>{{`hello${world}!`}} </p> //三元运算符原创 2018-08-22 22:01:44 · 1754 阅读 · 4 评论 -
浅谈vue生命周期
在谈到Vue的生命周期的时候,我们首先需要创建一个实例,也就是在 new Vue ( ) 的对象过程当中,首先执行了init(init是vue组件里面默认去执行的),在init的过程当中首先调用了beforeCreate,然后在injections(注射)和reactivity(反应性)的时候,它会再去调用created。所以在init的时候,事件已经调用了,我们在beforeCreate的时候千...原创 2018-10-31 16:07:00 · 353 阅读 · 0 评论 -
浅谈vue2.0生命周期
beforeCreate :组件实例刚被创建,组件属性计算之前,如data属性等<template> <div class="router-page-wrap" style="background: #fc595d;"> this is usercenter <input type="text" v-model="mess.原创 2018-10-31 15:16:43 · 230 阅读 · 0 评论 -
vue-cli3.0引入jquery
首先第一步安装:npm install jQuery --save-dev调用的时候:关注微信公众号,每天更新~~原创 2018-09-10 14:34:57 · 8368 阅读 · 7 评论