vue
文章平均质量分 90
岳清流云
不积跬步无以至千里
展开
-
js 的 defineProperty 数据劫持
我们知道,在Vue中我们操作某个属性时vue可以实时响应,这是因为当一个vue实例被创建出来之后,它会生成一个Observer观察者实例,然后对vue中的对象属性进行遍历,通过defineProperty将它们转换为了getter和setter,当我们操作某个数据时,就会触发getter和setter,从而完成一个监听操作。下面我们详细解释一下defineProperty以及它的优劣所在:Object.defineProperty(obj,"",{})defineProperty总共有三个参数原创 2021-01-30 10:38:41 · 832 阅读 · 2 评论 -
Vue 路由机制的两种实现模式
Vue的路由机制主要是通过两种模式实现的第一种模式是hash模式 第二种是H5的history模式这是默认的hash模式的路由:改成history模式后const router = new VueRouter({ mode:"history", routes})export default routerHash模式hash模式是以url的hash值来作为路由,这也是vue的默认模式;hash模式的原理是动态的更改location.hash的值原创 2021-01-30 09:22:42 · 1430 阅读 · 0 评论 -
详解Vue中的Key和虚拟dom以及diff算法
一 虚拟dom在react,vue等技术出现之前,我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构,来达到更新 ui 的目的。 这种方式相当消耗计算资源,因为每次查询 dom 几乎都需要遍历整颗 dom 树, 并且这个过程又会不可避免的出现大量DOM操作,而DOM的变化又会引发整个文档重排或重绘,从而降低页面渲染性能 此时就产生一个问题,有没有可能我们只更新我们修改的那一部分dom而不要更新去整个dom结构 此时虚拟DOM应用而生 ,如果原创 2021-01-25 15:13:32 · 870 阅读 · 1 评论 -
Vue过场动画判断是进入还是退出 一行代码 完美解决
在Vue开发中 我们有时需要给场景切换加上一个过场动画 但是有一个难题 过场动画如何判断到底是进还退出的我在网上也找过很多方法,比如最常见的就是给路由的meta中加一个标识 通过标识判断大小 从而知道是退是进但是如果路由很多,怎么办,那要判断标识都是一个难题,苦思冥想许久,突然想到一个究极解决办法,我们可以通过时间来判断啊,我们在路由守卫中,每当进入一个路由之前,给他加个时间戳router.beforeEach(async (to, from, next) => { i原创 2020-12-31 15:06:49 · 351 阅读 · 1 评论 -
如何重置 Vue 中 data 的数据为初始状态
在vue中有时我们需要将data中的数据重置为初始状态,例如我们发布一篇文章,发布完成之后我们希望和表单双向绑定的对象重置为初始状态那么此时我们有两种办法,第一种,手动去给表单双向绑定的对象赋值为空data(){ return{ Notica:{ title:"", content:"", } ...原创 2020-04-01 15:42:32 · 4893 阅读 · 0 评论 -
关于在vue中使用amap高德地图插件出现的错误! iframe.postMessage 以及 onmessage 数据重复反馈的原因及解决办法
项目是用Vue做的 使用的是高德地图的插件需求是这样的 选择地址后,点击下面的地址列表中的某一个然后会返回这个地址的信息,例如名称,经纬度之类的,例如点击老成都返回老成都的地址信息我代码是这么写的HTML部分<iframe id="getAddress" @load="loadiframe" src="https://m.amap.com/picker/?key=...原创 2020-04-01 15:21:20 · 1199 阅读 · 0 评论 -
vue clie 3.0 引入全局scss报错解决,已经解决
在vue.config.js中进行配置这是以前的配置方法这样进行配置后会报错module.exports = { css: { loaderOptions: { sass: { data: `@import "@/lib/hotcss/px2rem.scss";` } } }}改成这种形式,就能正常运行,将da...原创 2019-11-07 21:11:38 · 651 阅读 · 0 评论 -
使用原生js编写Vue双向数据驱动(1)
观察者模式与数据劫持部分还没完成,有时间在继续更新function Vue(options){ this.$el = options.el; this.$data = options.data; if(this.$el){//若这个el节点存在不为空,则编译模板 //将data中的数据 全部转化成Object.defineProperty来定义 这样我...原创 2019-08-19 10:40:28 · 211 阅读 · 0 评论 -
Vue 中表单验证框架 vee-validate的安装和基本的使用
vee-validate可以对表单进行一个全面的验证,它自带了邮箱 手机 身份证等常用类型验证,是一个Vue.js的基于模板的验证框架官网如下https://baianat.github.io/vee-validate/安装首先我们需要进入项目目录下,比如你的项目叫Demo ,我们进入Demo目录下后 ,打开命令窗口 输入如下命令npm install vee-validat...原创 2019-05-16 08:15:08 · 2798 阅读 · 1 评论 -
Vue3.0 axios跨域请求代理服务器配置
参考周家大小姐.https://blog.csdn.net/qq_40190624/article/details/85257610首先安装axiosnpm install axios然后在vue.config.js文件下配置如下代码(若没有vue.config.js文件可以自己创建这个文件)module.exports = { devServer: { ...原创 2019-05-10 17:42:06 · 3705 阅读 · 0 评论