![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 88
Yivisir
一个卑微的前端萌新,正在努力中
展开
-
Vue:Array变化侦测
Vue:Array变化侦测1. 数组追踪变化 与Object不同,数组无法通过getter和setter方式来追踪变化,因此,我们需要自定义一个拦截器来追踪变化。2. 拦截器的准备 拦截器其实就是一个与Array.prototype一样的Object,里面所包含的属性一样,但是改变数组的方法是我们修改过的。 首先,我们先对Array.prototype来个定制。const arrayProto = Array.prototype;const arrayMethods = Object.原创 2021-03-06 13:20:03 · 324 阅读 · 0 评论 -
Vue:Object变化侦测
Vue:Object变化侦测1. 什么是变化侦测 Vue.js会自动检测状态并生成DOM,然后将其输出到页面上,这个过程称为渲染,这个渲染过程是声明式的,我们通过模板来描述状态和DOM之间的映射关系。 而通常情况下,我们的页面是不断在更新状态的,此时页面根据状态来重新渲染,想要检测这个过程,就涉及到了变化侦测。 变化侦测有两种类型:“推”和“拉”。国内三大主流框架中的Angular和React都采用“拉”,Vue采用的是“推”。 “推”的优势是,当状态发生变化,Vue能够立刻知道,原创 2021-03-04 22:44:34 · 194 阅读 · 1 评论 -
Vue:插槽真香
Vue:插槽真香一、前言插槽为组件提供了灵活性,使用组件的时候可以通过修改插槽的内容实现灵活的展示内容。下面正式介绍一下插槽的使用方法。二、插槽的使用1. 匿名插槽<comp>yivi</comp>let comp = { template : ` <div> <h1>怎央打</h1> <p>朋友们好,我是混元形意太极门掌门人<slot></slot><原创 2020-12-01 11:14:48 · 189 阅读 · 0 评论 -
Vue:nexttick是何方神圣?
Vue:nextTick是何方神圣?1. 官方定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。2. 解释Vue.nextTick()其实主要用于生命周期里,当你在上一个钩子函数中需要处理下一个钩子函数层面的内容时,可将这些操作放在Vue.nextTick的回调函数中。当Vue实例进行到该钩子阶段时,会将nextTick中的操作放到下一个钩子阶段去进行,实现了延迟处理。3. 举个例子当你需要在created阶段对dom进行操作时,一原创 2020-11-29 17:19:00 · 143 阅读 · 0 评论 -
Vue:使用History模式打包时注意事项
Vue: 使用History模式打包时需要注意的事项1. 前言今天在使用history模式打包vue项目,后台部署时遇到了种种问题,特地写一篇博客记录一下。2. 路由配置在History模式下,在路由配置文件中首先要将mode改为history;部署项目时,如果在域名后还有额外路径的话,需要注意添加base,作为每次跳转路由时的前缀;以下是设置样例:// router/index.jsexport default new Router({ mode : "histor原创 2020-11-13 12:40:35 · 4605 阅读 · 3 评论 -
Vue:vue-router的基础原理
Vue:vue-router的基础原理一、前言大多数Vue应用都为单页面应用,而实现单页面应用最关键的工具就是router,router的底层封装了浏览器的History类,使得页面在切换时浏览器无需请求新页面;二、 vue-router的基本知识1. vue-router的三种模式vue-router总共有三种模式:HTML5 History、HashHistory、AbstractHistory(暂时不拓展)History模式:例如:http://test.com/abc原创 2020-10-27 10:32:58 · 273 阅读 · 0 评论 -
Vue:父组件传值
Vue:父组件传值prop : prop是一个子组件用来接收父组件传递过来的数据的一个自定义属性。父组件的数据都需要通过props把数据传递给子组件,子组件需要显示地调用props选项声明;创建静态实例<div id='app'> <child msg="ComesFromFather"></child></div><script> Vue.component('child',{ // 声明props原创 2020-09-07 15:07:27 · 69 阅读 · 0 评论 -
Vue:生命周期函数的作用
Vue:生命周期函数的作用前言Vue实例有一个完整的生命周期,也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会。各函数的作用beforeCreated():表示在实例被完全初始化之前调用该函数;created():此时Vue的数据和方法(data,methods)都已经初始化好了;如果要操作data和methods,最早需要在这个函数中操作;created完成后就开原创 2020-08-09 11:00:09 · 2144 阅读 · 0 评论