![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
lixiaonaaa
写bug的
展开
-
剖析Vue原理&实现双向绑定MVVM
转载于:https://segmentfault.com/a/1190000006599500 本文能帮你做什么? 1、了解vue的双向数据绑定原理以及核心代码模块 2、缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理、数据的循环依赖等,也难免存在一些问题,欢迎大家指正。不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读vue源码的时候会更有帮助< 本文所有相关代码均在github上面可找.转载 2021-02-23 16:48:18 · 133 阅读 · 0 评论 -
vue踩坑记——渲染三级数据初始化页面时导致的报错问题
1,报错信息 找不到某个属性中的下标为0的数据 2,经查看,是这句话导致的报错 2,原因 异步获取数据,dom加载时数据还没返回,info为空对象,导致拿不到info.support[0].type 3,解决办法 4,需要注意的是,二级数据不会报错,例如 info.url 不会报错;三级数据才会报错。 ...原创 2021-02-03 16:01:37 · 466 阅读 · 0 评论 -
计算属性的 setter
计算属性默认只有 getter,不过在需要时你也可以提供一个 setter。 例如,要实现输入框的双向绑定 姓: <input type="text" placeholder="first name" v-modal="firstName"> 名: <input type="text" placeholder="last name" v-modal="lastName"> 姓名: <input type="text" placeholder="full name" ..原创 2021-02-02 14:09:40 · 522 阅读 · 0 评论 -
异步获取短信验证码以及倒计时方法
// 异步获取短信验证码 async getCode () { // 如果当前没有计时 if(!this.computeTime) { // 启动倒计时 this.computeTime = 30 this.intervalId = setInterval(() => { this.computeTime-- if(this.computeTime&.原创 2021-02-01 15:28:55 · 128 阅读 · 0 评论 -
Vue.nextTick( [callback, context] )的使用方法
1,用法 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 2,使用举例 利用swiper实现的轮播图,需要在DOM更新完成之后再new swiper对象 watch: { categorys (value) { // categorys数组中有数据了, 在异步更新界面之前执行 // 使用setTimeout可以实现效果, 但不是太好 /*setTimeout(() => { .原创 2021-02-01 15:18:52 · 191 阅读 · 0 评论 -
vuex的使用方法(全)
1,首先我们来看最简单的vuex,来源于vuex官网:https://vuex.vuejs.org/zh/guide/ 如上图,最简单的vuex只需要状态state和改变状态的方法mutations即可。改变状态的唯一方式就是提交(commit)mutation。 2, 下面我们再来看完整的vuex结构 文件夹结构如下 index.js文件,无疑是vuex的主要文件,在此文件中定义store /* vuex最核心的管理对象store */ import Vue from 'vue.原创 2021-01-28 17:06:20 · 2749 阅读 · 0 评论 -
vue数据劫持代理底层实现原理
主要利用Object.defineProperty() // Vue数据劫持代理 // 模拟Vue中data选项 let data = { username: 'curry', age: 33 } // 模拟组件的实例 let _this = { } // 利用Object.defineProperty() for(let item in data){ // console.log(item, data[item]); Object.defineProperty(_this.原创 2021-01-08 15:00:38 · 340 阅读 · 0 评论 -
vue 插槽的使用
今天学习到插槽,觉得是个很好的东西,赶紧记录下。 1,基本使用,以下摘自官网https://vuejs.bootcss.com/guide/components.html#%E9%80%9A%E8%BF%87%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9 2,插槽内容,插槽内容可以是字符串,可以是HTML,也可以是组件。 3,作用域 4,后备内容,当父组件没有提供任何插槽内容时,可显示默认内容。 5,具名插槽 当我们需原创 2021-01-02 19:28:41 · 416 阅读 · 5 评论 -
vue router结合keep-alive使用导致的问题
使用很简单,在路由显示的位置用keep-alive包裹起来即可 <keep-alive> <router-view/> </keep-alive> 这样每个页面就会缓存页面的变化,但是使用过程中发现,mouted等钩子函数除了第一次进入页面之后,将不再执行,这是因为组件是被放在缓存中的。 这个时候可以使用keep-alive的钩子函数来实现,activated(是再进入这个组件时触发得)和deactivated(是再离开这个组件时触发得) activa原创 2021-01-02 17:41:19 · 388 阅读 · 0 评论 -
vue系列学习(五)——路由的基本使用
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import WatchTest from '@/components/WatchTest' import KeepAliveDemo from '@/components/KeepAliveDemo' import RouterDemo from '@/components/RouterDemo/in.原创 2020-12-27 19:10:34 · 106 阅读 · 1 评论 -
vue系列学习(四)——使用keep-alive报错 Maximum call stack size exceeded
使用keep-alive的时候报错Maximum call stack size exceeded,说是堆栈溢出,一般可能是递归导致,但是我的代码中没有递归。 后来经过调查发现,我的组件名起成了跟keep-alive重名,导致组件自己调用自己,从而报错 <keep-alive> <component v-bind:is="currentTabComponent" class="tab"></component> </keep-alive>原创 2020-12-24 16:54:52 · 546 阅读 · 2 评论 -
vue系列学习(三)—— 基础组件的自动化全局注册
参考官网:https://cn.vuejs.org/v2/guide/components-registration.html 下的:基础组件的自动化全局注册 在日常开发中,有一些组件是比较常用,但是为了避免在开发过程中不停地引入,或者在main.js中注册,,或者每添加一个组件就需要手动注册一次。则直接进行自动化全局注册。 自动化全局注册,官网上都详细的说明,以下是自己官网的说明基础上进行了一个demo开发实例: 1、自定义文件夹: 在src下新建一个components文件夹,用于存放组件。并新转载 2020-12-24 14:50:22 · 333 阅读 · 1 评论 -
vue系列学习(二)——自定义组件的 v-model的理解
以下摘自官网: 说实话,这段话我完全没看懂,于是讲过查相关资料,以及网上大神的解释,我终于搞明白了,所以必需记录一下 1,首先我们来看下普通的表单控件的双向绑定v-modal <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> 那么v-modal到底是如何实现双向绑定的呢?实际上,v-modal只是一个语法糖,上段代码的实际实现如下: &原创 2020-12-24 13:38:17 · 304 阅读 · 0 评论 -
vue系列学习(一)——计算属性缓存 vs 方法的理解
关于计算属性computed和方法methods的区别,通常一样的功能,二者都可以实现。那么到底改i如何选择呢? 这是官网的解释: 为了更好的理解这段话,我们来做一个简单的实验 1,使用方法 <template> <div class="hello"> //注意这里调用了两遍reversedMessage <p>Reversed message: "{{ reversedMessage() }}"</p> <p>Rev.原创 2020-12-21 14:41:29 · 291 阅读 · 0 评论 -
vsCode设置.vue文件代码高亮
1,Ctri+Shift+X,打开商品扩展,搜索Vetur 2,点击Vetur,安装,等待安装完成,重新打开vsCode即可。原创 2020-12-17 10:08:16 · 1265 阅读 · 0 评论