![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
爱笑的小宇宙
这个作者很懒,什么都没留下…
展开
-
vue-router原理
浅谈vue-router原理https://zhuanlan.zhihu.com/p/27588422https://www.cnblogs.com/gaosirs/p/10606266.htmlhttps://www.jianshu.com/p/93d3ed7fcda6转载 2020-10-23 19:33:20 · 139 阅读 · 0 评论 -
为什么Vue不能检测对象属性的添加或删除也不能检测数组元素直接赋值或改变length?
https://segmentfault.com/a/1190000015783546#comment-areahttps://segmentfault.com/a/1190000018706349https://segmentfault.com/a/1190000018767046原创 2020-10-23 19:03:28 · 278 阅读 · 0 评论 -
Vue中的插槽和作用域插槽
1、Vue中插槽的作用和使用方法定义一个名child子组件,为该子组件添加内容应该在子组件的template中定义,直接在父组件的<child>标签中定义的内容不会被渲染,如下例。<div id="root"> <child> 需要插槽才能渲染的内容 <p>Dell</p> <p>Lee</p> </chi转载 2020-10-19 15:57:04 · 2792 阅读 · 0 评论 -
vue项目中使用阿里iconfont图标
方法一:简单粗暴 - 生成链接使用法1.打开iconFont官网选择自己喜欢的图标,并且添加购物车2.点击购物车,添加至项目5.为了方便可以给项目起一个名字6. 选择Font class7.点击“暂无代码,点此生成”7. 点击复制连接8.接下来复制链接地址,在我们的vue项目中,找到index.html文件,引入css样式,记住这里要放上你的链接地址....<link rel="stylesheet" href...原创 2020-09-11 11:34:33 · 1811 阅读 · 0 评论 -
一起学vue指令之v-pre
https://www.cnblogs.com/singledogpro/p/12044526.html跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑<span v-pre>{{ this will not be compiled }}</span> 显示的是{{ this will not be compiled }}<span v-pre>{{msg}}</span> 即使data里面定义...转载 2020-09-03 10:44:26 · 212 阅读 · 0 评论 -
vue之this.$route.query和this.$route.params的使用与区别
一、this.$route.query的使用 1、router/index.js { path:'/mtindex', component: mtindex, //添加路由 children:[ { path:':shopid', com...原创 2019-12-10 17:13:43 · 1012 阅读 · 0 评论 -
vue中路由重定向redirect
1.传参重定向时传参,根据重定向到的路径进行传参注意:重定向改变了路径,此时路径并不是goParams/1993/yq love zn而是params/1993/yq love znf2.不传参不传参直接重定向路径地址注意:redirect重定向改变了url地址,如果重定向的地址需要接收参数然而没有传参不会改变地址,页面不会报错但是也不会显示内容...原创 2019-12-10 11:09:38 · 1751 阅读 · 0 评论 -
vue 路由 按需 keep-alive
https://juejin.im/post/5cdcbae9e51d454759351d84#commenthttps://juejin.im/post/5b407c2a6fb9a04fa91bcf0d#commenthttps://juejin.im/post/5b610da4e51d45195c07720d#commenthttps://juejin.im/post/5cce49...原创 2019-11-25 10:53:11 · 127 阅读 · 0 评论 -
数据双向绑定
https://www.cnblogs.com/canfoo/p/6891868.htmlhttps://juejin.im/post/5d08abeaf265da1b8e70a1d7#commenthttps://juejin.im/post/5d41eec26fb9a06ae439d29fhttps://juejin.im/post/5d59f2a451882549be53b170...原创 2019-11-25 10:33:47 · 142 阅读 · 0 评论 -
Vue-给对象新增属性(使用Vue.$set())
https://www.jianshu.com/p/71b1807b1815https://www.cnblogs.com/zjw2004112/p/11524422.html原创 2019-11-08 11:49:14 · 344 阅读 · 0 评论 -
v-for循环key的作用
期望答案vue的dom渲染是虚拟dom,数据发生变化时,diff算法会只比较更改的部分,如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。举例说明:有一个列表我们现在在中间插入了一个元素,diff算法会默认复用之前的列表并在最后追加一个,如果列表存在选中一类的状态则会随着复用出现绑定错误的情况而不是跟...原创 2019-11-08 11:46:32 · 2171 阅读 · 0 评论 -
Vue 项目中为什么要用路由懒加载?怎么使用路由懒加载?路由懒加载,组件懒加载
https://blog.csdn.net/sally18/article/details/96476406原创 2019-10-25 14:49:25 · 979 阅读 · 0 评论 -
vue之插槽slot详解
vue之插槽slot详解原创 2019-10-25 13:56:05 · 240 阅读 · 0 评论 -
计算属性 computed 和 methods 有什么区别
computed:计算属性是基于它们的依赖属性进行缓存的,只有在它的相关依赖发生改变时才会重新求值。 method:只要被触发重新渲染, method 调用总会执行该函数。...原创 2019-10-23 21:16:03 · 790 阅读 · 0 评论 -
watch 和 computed 的区别
computed:计算属性计算属性是由data中的已知值,得到的一个新值。 这个新值只会根据已知值的变化而变化,其他不相关的数据的变化不会影响该新值。 计算属性不在data中,计算属性新值的相关已知值在data中。 当我们某一个值依赖于多个值时,建议使用computed,其中任何一个值变化时,该值都能及时更新。 computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板...原创 2019-10-23 21:15:30 · 171 阅读 · 0 评论 -
vuex默认的五种基本的对象
https://www.cnblogs.com/chinabin1993/p/9848720.html1. 每一个 Vuex 项目的核心就是 store(仓库)。store 就是一个对象,它包含着你的项目中大部分的状态(state)。2. state 是 store 对象中的一个选项,是 Vuex 管理的状态对象(共享的数据属性)1.在store的mutations选项中...原创 2019-10-23 00:39:02 · 1400 阅读 · 0 评论 -
vue单页面应用刷新网页后vuex的state数据丢失的解决方案
https://blog.csdn.net/guzhao593/article/details/814353421一般项目:简单的仅仅使用Vuex造成数据丢失会用本地存储,2大型项目:(大型项目,页面很多,数据量很大,页面很多,分的很多模块,用插件就不需要懂任何东西,直接写model就可以)插件最近在用vue写pc端项目,用vuex来做全局的状态管理, 发现当刷新网页后,保存在vue...原创 2019-10-21 10:34:47 · 1075 阅读 · 0 评论 -
虚拟dom为什么快
3、CSS 的解析注意点? CSS 的解析是从右往左逆向解析的,嵌套标签越多,解析越慢。4、JS 操作真实 DOM 的代价? 用我们传统的开发模式,原生 JS 或 JQ 操作 DOM 时,浏览器会从构建 DOM 树开始从头到尾执行一遍流程。在一次操作中,我需要更新 10 个 DOM 节点,浏览器收到第一个 DOM 请求后并不知道还有 9 次更新操作,因此会马上执行流程,最终执行10 次。例如,...原创 2019-10-16 17:36:07 · 615 阅读 · 0 评论 -
组件间通讯方法
1.父组件向子组件传值在父组件中使用子组件,本质通过v-bind绑定属性传入子组件,子组件通过props接收父组件传入的属性。明父组件如何向子组件传递值:在子组件Users.vue中如何获取父组件App.vue中的数据users:["Henry","Bucky","Emily"]//App.vue父组件<template> <div id="app">...原创 2019-10-16 12:49:56 · 131 阅读 · 0 评论 -
Vue中父子组件生命周期执行顺序初探
https://www.cnblogs.com/chenyablog/p/9095677.htmlVue中父子组件生命周期执行顺序初探结论如下图但是我在开发的过程中发现了异常1. 如果从其他页面过来的话,嵌套组件的生命周期入上图所示2. 但是如果在当前页面刷新的话,顺序性就变味下面那样父created-父mounted-子created-子mouted 目前还不清楚是什么...原创 2019-10-16 09:58:20 · 380 阅读 · 0 评论 -
vue.nextTick()方法的使用详解
https://blog.csdn.net/zhouzuoluo/article/details/84752280https://www.iteye.com/news/32777https://segmentfault.com/a/1190000012861862?utm_source=tag-newesthttps://www.cnblogs.com/jin-zhe/p/99854...原创 2019-10-14 18:26:36 · 692 阅读 · 0 评论 -
vue的单项数据流
https://www.cnblogs.com/mushitianya/p/10524561.htmlhttps://www.weipxiu.com/767.html原创 2019-10-14 16:09:47 · 105 阅读 · 0 评论 -
Vue中通过属性绑定为元素绑定style行内样式
Vue中通过属性绑定为元素绑定style行内样式原创 2019-10-14 16:04:49 · 983 阅读 · 0 评论 -
vue中组件的data为什么是一个函数
vue组件中data值不能为对象,因为对象是引用类型,组件可能会被多个实例同时引用。如果data值为对象,将导致多个实例共享一个对象,其中一个组件改变data属性值,其它实例也会受到影响。上面解释了data不能为对象的原因,这里我们简单说下data为函数的原因。data为函数,通过return 返回对象的拷贝,致使每个实例都有自己独立的对象,实例之间可以互不影响的改变data属性值。v...原创 2019-10-14 15:54:45 · 101 阅读 · 0 评论 -
路由守卫
路由守卫- 监听整个项目的路由变化情况 全局的前置守卫 - 监听某个路由的变化情况 路由的独享守卫 - 监听的路由组件的路由变化情况 组件内的导航守卫导航守卫(也叫路由守卫)技术标签:导航首位导航守卫(也叫路由守卫)作用: — 类似 【保安】守卫路由 进 举例: 携带数据进 出 举例:...原创 2019-09-18 11:10:51 · 1197 阅读 · 0 评论 -
路由守卫 登录例子
//main的js文件下面的页面 import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import axios from 'axios' import ElementUi from 'element-ui' import...转载 2019-09-18 11:25:20 · 272 阅读 · 0 评论 -
路由守卫的应用场景
https://blog.csdn.net/qq_36711388/article/details/88627118原创 2019-09-18 13:36:24 · 1431 阅读 · 0 评论 -
hash和history两种模式的区别
vue-router(前端路由)有两种模式,hash模式和history模式,这里来谈谈两者的区别。hash 就是指 url 尾巴后的 # 号以及后面的字符,history没有底带#,外观上比hash 模式好看些 原理的区别(原理) hash 能兼容到IE8, history 只能兼容到 IE10; 由于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 ha...原创 2019-09-18 15:04:29 · 14368 阅读 · 2 评论 -
深入解析v-if与v-show的区别
1.共同点都是动态显示DOM元素2.区别(1)手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;(2)编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;(3)编译条件:v-if是惰性的,如果初始条件为假,则什么也不做...原创 2019-09-18 15:41:30 · 6432 阅读 · 0 评论 -
vue中$refs的用法及作用详解
一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值。但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。然后在javascript里面这样调用:this.$refs.input1这样就可以减少获取dom节点的消耗了用法如下:...原创 2019-09-18 16:26:41 · 2116 阅读 · 0 评论 -
vue 深度监听watch(如何watch监听一个对象内部的变化)
第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。 第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。) 第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。https://juejin.im/post/5ae91fa76fb9a07aa7...原创 2019-09-18 17:00:04 · 3496 阅读 · 0 评论 -
聊聊 Vue 的双向数据绑定,Model 如何改变 View,View 又是如何改变 Model 的
Object.defineProperty双向绑定原理https://www.cnblogs.com/wangjiachen666/p/9883916.html实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器...原创 2019-10-15 11:16:56 · 1374 阅读 · 0 评论 -
路由跳转的方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器。通过路由跳转的几种方式1、router-link 【实现跳转最简单的方法】<router-link to='需要跳转到的页面的路径>浏览器在解析时,将它解析成一个类似于<a> 的标签。 &l...原创 2019-09-18 10:47:10 · 950 阅读 · 0 评论