![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 53
好记性不如烂笔头,Vue知识点记录,查缺补漏
优惠券已抵扣
余额抵扣
还需支付
¥19.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
空城里的往日时光
这个作者很懒,什么都没留下…
展开
-
Vue—单页面应用与多页面应用的区别
目录一、概念二、区别一、概念多页面应用多页面应用,翻译为multi-page application,简称MPA。多页面应用是指每次页面跳转时,后台服务器都会返回一个新的HTML文档。单页面引用单页面应用,翻译为single-page application,简称SPA。单页面应用不像多页面应用,每次页面跳转时都会请求一个新的HTML文档,单页面应用只会请求一个HTML文档。页面内容变化时,仅仅在刷新页面中的组件。用vue-cli可以搭建基...原创 2021-09-04 23:27:15 · 1168 阅读 · 0 评论 -
Vue—路由传参的几种方式
目录一、概述二、详解一、概述$route为当前路由对象。$router为全局路由实例,即VueRouter实例。二、详解如下图所示,以子组件接收参数的方式为标准,路由传参可分为三种方法。方法一:利用动态路由传参如下代码所示,配置路由。{path: '/a/:num', name: A, component: A}父组件中执行切换路由操作及传参,如下代码所示。// 方法1:使用router-link路由导航<router-link to="/a原创 2021-04-03 19:54:58 · 288 阅读 · 0 评论 -
Vue—生命周期钩子
目录一、生命周期钩子二、简单实例一、生命周期钩子Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等。在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。上图为Vue实例的生命周期图示。接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明。beforeCreate在实例开始初始化时同步调用。此时数据...原创 2019-08-06 10:54:07 · 156 阅读 · 0 评论 -
Vue—自定义指令
目录一、概念二、指令注册三、钩子函数四、钩子函数参数五、函数简写一、概念除了默认设置的核心指令(v-model和v-show等),Vue也允许注册自定义指令。在Vue里,代码复用的主要形式和抽象是组件。然而,有的情况下,仍然需要对纯dom元素进行底层操作。这时候就会用到自定义指令。二、指令注册以一个input标签自动获得焦点为例,当页面加载时,使用autofoc...原创 2019-08-05 15:41:55 · 218 阅读 · 0 评论 -
Vue—响应式原理
目录一、概述二、追踪变化三、变化检测四、声明响应式属性五、异步更新队列一、概述Vue最显著的特性之一便是不太引人注意的响应式系统。模型层model只是普通js对象,修改它可以直接更新视图view,这让状态管理变得非常简单且直观。本文将详细介绍Vue响应式系统的底层细节。二、追踪变化把一个普通JS对象传递给Vue实例的data选项,Vue将遍历此对象的所有属性,并...原创 2019-08-07 11:49:18 · 122 阅读 · 0 评论 -
Vue—inheritAttrs属性详解
一、概述inheritAttrs属性默认值为true,表示允许继承的意思。原创 2020-04-27 02:13:50 · 1067 阅读 · 1 评论 -
Vue—子组件如何合理修改父组件属性值
目录一、概述二、详解三、拓展一、概述子组件中直接修改父组件传过来的属性值会报错。二、详解方法一:$emit('event', value)父组件调用子组件时,为其绑定一个事件,在该事件中修改父组件的属性值。子组件内部通过$emit触发该事件。将修改后的值传给父组件然后在父组件中做修改,修改之后子组件就会跟着改变。该方法的好处是可以在父组件中做一些额外的操作...原创 2020-04-29 00:20:35 · 2132 阅读 · 1 评论 -
Vue—组件选项props、data和computed的区别
prop继承属性prop是继承属性,子组件从父组件继承过来的属性。严格意义上讲,prop是只读属性,不允许子组件直接修改。如果prop属性是一个原始值,子组件直接修改它会报错。如果prop属性是一个引用值(如对象),子组件修改它的属性,不会报错,且结果会影响父组件(不推荐这种写法)。data私有属性data是私有属性。区别先初始化prop继承属性,再初始化dat...原创 2020-04-30 01:06:45 · 1597 阅读 · 0 评论 -
Vue—package.json文件详解
一、概述package.json是项目初始化时,根目录下自动生成的配置文件,定义了项目的基本配置信息以及需要依赖的各种模块。package.json配置文件中包含许多元信息,例如项目名称、版本等,npm install命令就是根据该配置文件下载具体的依赖包。二、详解三、拓展:版本号版本号一般包含三部分,分别是主版本、次要版本和补丁版本。一般次要版本号发生变化,即代表项目有重大更新。拓展1:波浪号版本号前使用波浪号,表示版本范围,大致匹配某个版本。版本号 版本..原创 2021-01-28 23:30:19 · 1638 阅读 · 2 评论 -
Vue—文件下载实例
一、概述原创 2020-12-28 15:03:29 · 658 阅读 · 0 评论 -
Vue—public文件夹与src/assets文件夹的区别
目录一、概述二、详解三、拓展一、概述vue-cli3.0创建的项目中,有两个静态资源目录,分别是public和assets。其中public相当于一个静态资源服务器,assets则存放项目的依赖资源。二、详解public文件夹存放静态资源,且该目录下的资源不会被webpack解析处理,如下图所示,打包时将被直接复制到dist目录,注意,public目录下的空文件夹不会被复制到dist目录。所以,如果引用的资源不希望被webpack处理时,可将其放置在public目录下。p原创 2020-12-24 16:24:11 · 5319 阅读 · 1 评论 -
Vue—引入外部CSS样式表
目录一、概述二、详解一、概述开发中,需要引入外部CSS样式表,写法不一,此处简单总结归纳。二、详解全局引入全局引入很简单,只需在main.js中导入即可,如下图所示。局部引入如下图所示,使用@import局部引入外部样式表。...原创 2020-12-22 23:07:39 · 654 阅读 · 0 评论 -
Vue—外部JS引用main.js中Vue组件实例的方法
目录一、概述二、详解一、概述vue组件中的this一般指向main.js中的Vue实例,故可以直接引用之。实际开发中,希望在外部JS中也可以引用main.js中的Vue实例,但外部JS中的this指向window,而非期待的Vue实例。解决方法也简单,只须在main.js中导出Vue实例,并在需要的外部JS文件中引入即可。二、详解步骤1:导出main.js中的Vue实例步骤2:在需要的外部JS文件中引入import vueMain from '@/main.js原创 2020-12-13 13:27:16 · 5949 阅读 · 0 评论 -
Vue—打印指定DOM区域
一、概述纯前端实现打印功能。二、详解方法一:vue-easy-printhttps://blog.csdn.net/qq_36845014/article/details/84524583?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-7-84524583.nonecase&utm_term=vue%20%E4%B8%8D%E8%83%BD%E6原创 2020-11-01 11:06:13 · 2114 阅读 · 1 评论 -
Vue—事件对象详解
<input :value='val' @input="$emit('update', $event.target.value)"/>当触发input事件时,$event是当前的事件对象,$event.target.value指向的是当前输入框的值。原创 2020-10-04 09:41:40 · 1161 阅读 · 0 评论 -
Vue—EventBus详解
一、概述Vue组件之间的数据共享问题,针对不同情景,有不同的解决方案。如简单父子组件通信,可以使用props,项目比较复杂,则组件通信可以使用Vuex。对于简单的非父子组件通信,没必要使用Vuex时,可以考虑使用EventBus解决。EventBus又称为中央事件总线,可以作为组件之间沟通的桥梁,作为组件之间共享的事件中心。二、创建中央事件总线方法一:main.js中注册全局的事件总线import Vue from 'vue';Vue.prototype.$eventBus = n原创 2020-10-03 18:31:42 · 1289 阅读 · 0 评论 -
Vue—组件实例之$slots、$scopedSlots
一、$slots只读属性,用来访问被插槽分发的内容,每个具名插槽都有其对应的属性,default属性包含了所有没有包含在具名插槽中的节点。二、$scopedSlots只读属性,用来访问作用域插槽。...原创 2020-09-20 11:25:08 · 4564 阅读 · 0 评论 -
Vue—组件实例之$forceUpdate
一、概述$forceUpdate可以强制Vue实例重新渲染。Vue中一些复杂对象的修改,有时并不能被Vue监听到,对于深结构的数据,可以使用$set方法使之被Vue监听,但如果不想利用$set方法去设置,也可以使用$forceUpdate方法,$forceUpdate可以使Vue组件按照最新数据重新渲染。二、实例<template> <div> <p>demo: {{demo}}</p> <button @click="原创 2020-09-11 01:20:22 · 1338 阅读 · 0 评论 -
Vue—组件实例之$once
一、概述$once是一个函数,可以为Vue组件实例绑定一个自定义事件,但该事件只能被触发一次,触发之后随即被移除。二、实例$once有两个参数,第一个参数为字符串类型,用来指定绑定的事件名称,第二个参数设置事件的回调函数。<template> <div> <button @click="$emit('jpf')">按钮</button> </div></template><script>原创 2020-09-11 00:52:02 · 21247 阅读 · 0 评论 -
Vue—组件实例之$on、$off
一、概述监听当前实例上的自定义事件。事件可以由$emit触发。回调函数会接收所有传入事件触发函数的额外参数。vm.$on('test', function (msg) { console.log(msg)})vm.$emit('test', 'hi')原创 2020-09-09 12:04:51 · 4097 阅读 · 0 评论 -
Vue—组件实例之$set
目录一、概述二、详解三、实例四、拓展一、概述$set是全局方法Vue.set的别名,可以为组件选项data中的指定对象设置属性,其本身是一个函数,有三个参数,第一个参数是目标对象,第二个参数是键值,第三个参数是属性值。$set函数的返回结果是其第三个参数。this.$set(target, key, value)二、详解Vue实例创建后,由于JS的限制,数据并非任何情况下皆能实现双向绑定,而$set可以解决双向数据绑定失效的问题。$set可以为组件选项data中的指定对原创 2020-09-05 17:36:48 · 525 阅读 · 0 评论 -
Vue—组件实例之$isServer
一、概述当前Vue实例是否运行于服务器,属性值为true表示实例运行于服务器,每个Vue实例都可以通过该属性判断。该属性一般用于服务器渲染,用以区分代码是否在服务器上运行。二、实例<script>export default { mounted() { console.log(this.$isServer); }}</script>...原创 2020-09-04 14:12:34 · 6925 阅读 · 2 评论 -
Vue—组件实例之$createElement
一、概述$createElement是一个具有特殊功能的函数,作用与渲染函数的第一个参数相同,用来定义虚拟节点。$createElement函数的返回值不是实际的标签节点,而是节点描述即虚拟节点,简称VNode,作用是告诉Vue,页面上需要渲染什么元素。...原创 2020-09-04 08:54:53 · 16614 阅读 · 0 评论 -
Vue—组件实例之$watch
一、概述$watch的作用是监听数据对象的某个属性,当属性变化时执行回调。$watch本身是一个函数,有三个参数,第一个参数设置监听对象,第二个参数设置回调函数,第三个参数是可选的配置对象。注意,数据对象可以是组件选项data、组件选项props或组件选项computed。vm.$watch('p1', (newVal, oldVal) => { }, { deep: true, immediate: true});二、详解知识点一:$watch的第一个参数必填原创 2020-09-01 23:15:03 · 743 阅读 · 0 评论 -
Vue—组件实例之$root、$parent、$children
一、概述获取Vue的根组件实例。原创 2020-08-31 12:15:07 · 4949 阅读 · 0 评论 -
Vue—组件实例之$options
一、概述原创 2020-08-30 21:05:12 · 6273 阅读 · 1 评论 -
Vue—组件实例之$data
目录一、概述二、实例一、概述$data包含组件选项data中的所有键值对,且组件选项data的任何数据变化都会影响$data。二、实例实例一:$data数据变化<template> <div> <h2>$data</h2> <button @click="$data.p1++">p1+1</button> <!--Vue中绑定事件, 如果没有参数, 可以省略小括号--&原创 2020-08-29 10:33:55 · 1031 阅读 · 0 评论 -
Vue—组件实例之$emit
目录一、概述二、实例一、概述$emit可以触发父作用域中当前组件绑定的事件监听器,即$emit可以使子组件触发父组件传递的事件。$emit的第一个参数是触发事件的名称,其余附加参数都会传给监听器回调。二、实例实例一:$emit触发父组件传递的事件,无参<!--父组件--><template> <div> <my-input @eventdemo="eventdemo" ></my-input>原创 2020-08-28 23:41:57 · 938 阅读 · 0 评论 -
Vue—组件实例之$props
目录一、概述二、实例一、概述$props属性包含了组件选项props接收的父作用域传递的属性。二、实例实例一:$props属性和$attrs属性互为补集$props属性和$attrs属性互为补集,二者之和为父作用域中当前组件的所有绑定属性,class和style属性除外。<!--父组件--><template> <div> <my-input type="text" placeholder="请输入文字" nam.原创 2020-08-28 17:37:11 · 6070 阅读 · 0 评论 -
Vue—组件实例之$listener
目录一、概述二、示例详解一、概述$listener属性包含了父作用域中所有的(不含.native修饰器的)v-on事件监听器,它可以通过如下代码将包含的事件监听器传入内部组件,在创建更高层次的组件时非常有用。$listener属性诞生的目的是为了在自定义组件中使用原生事件。<child v-on="$listeners"></child >二、示例...原创 2020-04-27 01:37:13 · 8549 阅读 · 0 评论 -
Vue—组件实例之$attrs
一、概述想象一下,你打算封装一个自定义的input组件my-input,需要从父组件传入type、placeholder、title等多个html特性。此时子组件my-input中需要用props属性接收父组件传递的数据。export default{ name: 'myInput', props: ['type', 'placeholder', 'title']}...原创 2020-04-27 00:43:18 · 2330 阅读 · 0 评论 -
Vue—组件实例之$nextTick
目录一、概述二、详解一、概述DOM更新循环结束后,执行延迟回调。二、详解$nextTick有两个使用场景。场景一钩子函数created中进行的DOM操作一定要放在$nextTick的回调函数中。因为created执行时,DOM并未进行任何渲染,无法操作DOM。与之对应的钩子函数mounted中可以进行任何DOM操作,因为该钩子执行时,已完成DOM渲染。<script>export default { created() { this.$ne原创 2020-08-28 15:29:24 · 541 阅读 · 0 评论 -
Vue—组件实例之$refs
目录一、概述二、详解一、概述$refs是一个对象,持有已使用ref属性成功注册引用信息的所有元素和子组件。$refs在组件渲染完成后才会生效。ref属性的作用有两个,其一给元素注册引用信息,其二给子组件注册引用信息。二、详解元素注册引用信息如下代码所示,ref属性给元素注册引用信息,并用$refs对象获取引用信息。<template> <div ref="root">123</div></template>&l原创 2020-08-28 15:26:02 · 1073 阅读 · 0 评论 -
Vue—组件实例之$el
目录一、概述二、实例一、概述获取Vue实例挂载的DOM元素,自mounted钩子函数开始生效,之前的钩子函数内无效。如下代码所示,Vue脚手架中,$el指向当前组件template模板中的根标签。二、实例<template> <div id="root"> <h1 @click="fn()"> Lorem, ipsum </h1> </div></template>&l原创 2020-08-28 15:17:05 · 11799 阅读 · 2 评论 -
Vue—组件实例详解
一、概述VueComponent是一个Vue内置的构造函数,其实例即常提及的Vue组件实例。二、详解知识点1:this.$el获取Vue实例挂载的DOM元素,自mounted钩子函数开始生效,mounted之前的钩子函数内无效。如下代码所示,Vue脚手架中,$el指向当前Vue组件模板中的根标签。<template> <div id="root"> <h1 @click="fn()"> Lorem, ipsum原创 2020-08-28 00:18:25 · 486 阅读 · 0 评论 -
Vue—组件选项之mixins
一、概述混入(mixins)提供了一种非常灵活的方式来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被合并进入该组件本身的选项。二、详解数据对象合并数据对象在内部会进行浅合并(一层属性深度),和组件本身的属性发生冲突时,以组件数据优先。const mixin = { data(){ return { name: 'jpf', age: 17 .原创 2020-05-24 10:51:48 · 509 阅读 · 0 评论 -
Vue—组件选项之render
目录一、概述二、引入三、虚拟dom四、JS代替模板五、JSX六、函数式组件七、模板编译一、概述Vue推荐在大多数情况下使用template来创建html。然而在一些场景中,真的需要JS的完全编程能力,这就是render函数,它比template更接近编译器。二、引入下面是一个例子,如果要实现这样的效果。<div id="example">...原创 2019-08-11 16:47:31 · 1167 阅读 · 0 评论 -
Vue—函数式组件详解
一、概述什么是函数式组件函数式组件虽然也是一个Vue组件,但其本质是一个函数,将组件标记上functional即可构成函数式组件。函数式组件有两种类型,其一基于模板的函数式组件,其二基于渲染函数的函数式组件。函数式组件的特点函数式组件有三个特点,分别是无生命周期、无状态、无实例。无状态是指没有响应式数据,无实例是指没有this上下文。函数式组件不管理任何状态,也不监听任何传递给它的状态。函数式组件的渲染开销很低,其引用就相当于使用一个HTML标签。如果业务组件的目的是纯展示,原创 2020-10-05 14:58:48 · 1287 阅读 · 0 评论 -
React—JSX详解
目录一、概述二、用法一、概述什么是表达式JS中表达式是运行之后会返回一个值的代码片段。什么是JSXJSX是React提供的语法糖,是JS和XML结合的一种格式,是一种JS语法扩展。JSX允许在JS中编写HTML,创建虚拟DOM。浏览器执行JSX语句时,遇到小括号(小括号有时可以省略),当HTML解析,遇到花括号,当JS解析。JSX语句本身是一个表达式,编译后会成为一个普通JS对象。注意,JSX表达式的最外层肯定是一对标签。如下代码所示,花括号中只能添加表达式,不能原创 2021-06-17 09:59:49 · 202 阅读 · 0 评论 -
Vue—JSX详解
一、概述JSX是Javascript和XML结合的一种格式。React发明了JSX,利用html语法来创建虚拟DOM,当遇到 < JSX就当html解析,遇到{就当JS解析。vue-cli3和4创建的Vue工程,可以直接使用JSX语法。JSX语法要求删除template标签,用render代替。二、详解如下代码所示,写了很多冗余的slot。<template> <div> <h1 v-if="id===1"> .原创 2020-07-21 17:50:07 · 1886 阅读 · 0 评论