雷雨天的雷胖子

目录一、概念二、区别一、概念多页面应用多页面应用，翻译为multi-page application，简称MPA。多页面应用是指每次页面跳转时，后台服务器都会返回一个新的HTML文档。单页面引用单页面应用，翻译为single-page application，简称SPA。单页面应用不像多页面应用，每次页面跳转时都会请求一个新的HTML文档，单页面应用只会请求一个HTML文档。页面内容变化时，仅仅在刷新页面中的组件。用vue-cli可以搭建基...

目录一、概述二、详解一、概述$route为当前路由对象。$router为全局路由实例，即VueRouter实例。二、详解如下图所示，以子组件接收参数的方式为标准，路由传参可分为三种方法。方法一：利用动态路由传参如下代码所示，配置路由。{path: '/a/:num', name: A, component: A}父组件中执行切换路由操作及传参，如下代码所示。// 方法1：使用router-link路由导航<router-link to="/a

目录一、生命周期钩子二、简单实例一、生命周期钩子Vue实例在创建时有一系列的初始化步骤，例如建立数据观察，编译模板，创建数据绑定等。在此过程中，我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。上图为Vue实例的生命周期图示。接下来，根据提供的生命周期钩子，对Vue实例各个阶段的情况进行详细说明。beforeCreate在实例开始初始化时同步调用。此时数据...

目录一、概念二、指令注册三、钩子函数四、钩子函数参数五、函数简写一、概念除了默认设置的核心指令（v-model和v-show等），Vue也允许注册自定义指令。在Vue里，代码复用的主要形式和抽象是组件。然而，有的情况下，仍然需要对纯dom元素进行底层操作。这时候就会用到自定义指令。二、指令注册以一个input标签自动获得焦点为例，当页面加载时，使用autofoc...

目录一、概述二、追踪变化三、变化检测四、声明响应式属性五、异步更新队列一、概述Vue最显著的特性之一便是不太引人注意的响应式系统。模型层model只是普通js对象，修改它可以直接更新视图view，这让状态管理变得非常简单且直观。本文将详细介绍Vue响应式系统的底层细节。二、追踪变化把一个普通JS对象传递给Vue实例的data选项，Vue将遍历此对象的所有属性，并...

一、概述inheritAttrs属性默认值为true，表示允许继承的意思。

目录一、概述二、详解三、拓展一、概述子组件中直接修改父组件传过来的属性值会报错。二、详解方法一：$emit('event', value)父组件调用子组件时，为其绑定一个事件，在该事件中修改父组件的属性值。子组件内部通过$emit触发该事件。将修改后的值传给父组件然后在父组件中做修改，修改之后子组件就会跟着改变。该方法的好处是可以在父组件中做一些额外的操作...

prop继承属性prop是继承属性，子组件从父组件继承过来的属性。严格意义上讲，prop是只读属性，不允许子组件直接修改。如果prop属性是一个原始值，子组件直接修改它会报错。如果prop属性是一个引用值（如对象），子组件修改它的属性，不会报错，且结果会影响父组件（不推荐这种写法）。data私有属性data是私有属性。区别先初始化prop继承属性，再初始化dat...

一、概述package.json是项目初始化时，根目录下自动生成的配置文件，定义了项目的基本配置信息以及需要依赖的各种模块。package.json配置文件中包含许多元信息，例如项目名称、版本等，npm install命令就是根据该配置文件下载具体的依赖包。二、详解三、拓展：版本号版本号一般包含三部分，分别是主版本、次要版本和补丁版本。一般次要版本号发生变化，即代表项目有重大更新。拓展1：波浪号版本号前使用波浪号，表示版本范围，大致匹配某个版本。版本号 版本..

一、概述

目录一、概述二、详解三、拓展一、概述vue-cli3.0创建的项目中，有两个静态资源目录，分别是public和assets。其中public相当于一个静态资源服务器，assets则存放项目的依赖资源。二、详解public文件夹存放静态资源，且该目录下的资源不会被webpack解析处理，如下图所示，打包时将被直接复制到dist目录，注意，public目录下的空文件夹不会被复制到dist目录。所以，如果引用的资源不希望被webpack处理时，可将其放置在public目录下。p

目录一、概述二、详解一、概述开发中，需要引入外部CSS样式表，写法不一，此处简单总结归纳。二、详解全局引入全局引入很简单，只需在main.js中导入即可，如下图所示。局部引入如下图所示，使用@import局部引入外部样式表。...

目录一、概述二、详解一、概述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

一、概述纯前端实现打印功能。二、详解方法一：vue-easy-printhttps://blog.youkuaiyun.com/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

<input :value='val' @input="$emit('update', $event.target.value)"/>当触发input事件时，$event是当前的事件对象，$event.target.value指向的是当前输入框的值。

一、概述Vue组件之间的数据共享问题，针对不同情景，有不同的解决方案。如简单父子组件通信，可以使用props，项目比较复杂，则组件通信可以使用Vuex。对于简单的非父子组件通信，没必要使用Vuex时，可以考虑使用EventBus解决。EventBus又称为中央事件总线，可以作为组件之间沟通的桥梁，作为组件之间共享的事件中心。二、创建中央事件总线方法一：main.js中注册全局的事件总线import Vue from 'vue';Vue.prototype.$eventBus = n

一、$slots只读属性，用来访问被插槽分发的内容，每个具名插槽都有其对应的属性，default属性包含了所有没有包含在具名插槽中的节点。二、$scopedSlots只读属性，用来访问作用域插槽。...

一、概述$forceUpdate可以强制Vue实例重新渲染。Vue中一些复杂对象的修改，有时并不能被Vue监听到，对于深结构的数据，可以使用$set方法使之被Vue监听，但如果不想利用$set方法去设置，也可以使用$forceUpdate方法，$forceUpdate可以使Vue组件按照最新数据重新渲染。二、实例<template> <div> <p>demo: {{demo}}</p> <button @click="

一、概述$once是一个函数，可以为Vue组件实例绑定一个自定义事件，但该事件只能被触发一次，触发之后随即被移除。二、实例$once有两个参数，第一个参数为字符串类型，用来指定绑定的事件名称，第二个参数设置事件的回调函数。<template> <div> <button @click="$emit('jpf')">按钮</button> </div></template><script&gt

一、概述监听当前实例上的自定义事件。事件可以由$emit触发。回调函数会接收所有传入事件触发函数的额外参数。vm.$on('test', function (msg) { console.log(msg)})vm.$emit('test', 'hi')

目录一、概述二、详解三、实例四、拓展一、概述$set是全局方法Vue.set的别名，可以为组件选项data中的指定对象设置属性，其本身是一个函数，有三个参数，第一个参数是目标对象，第二个参数是键值，第三个参数是属性值。$set函数的返回结果是其第三个参数。this.$set(target, key, value)二、详解Vue实例创建后，由于JS的限制，数据并非任何情况下皆能实现双向绑定，而$set可以解决双向数据绑定失效的问题。$set可以为组件选项data中的指定对

一、概述当前Vue实例是否运行于服务器，属性值为true表示实例运行于服务器，每个Vue实例都可以通过该属性判断。该属性一般用于服务器渲染，用以区分代码是否在服务器上运行。二、实例<script>export default { mounted() { console.log(this.$isServer); }}</script>...

一、概述$createElement是一个具有特殊功能的函数，作用与渲染函数的第一个参数相同，用来定义虚拟节点。$createElement函数的返回值不是实际的标签节点，而是节点描述即虚拟节点，简称VNode，作用是告诉Vue，页面上需要渲染什么元素。...

一、概述$watch的作用是监听数据对象的某个属性，当属性变化时执行回调。$watch本身是一个函数，有三个参数，第一个参数设置监听对象，第二个参数设置回调函数，第三个参数是可选的配置对象。注意，数据对象可以是组件选项data、组件选项props或组件选项computed。vm.$watch('p1', (newVal, oldVal) => { }, { deep: true, immediate: true});二、详解知识点一：$watch的第一个参数必填

一、概述获取Vue的根组件实例。

一、概述

目录一、概述二、实例一、概述$data包含组件选项data中的所有键值对，且组件选项data的任何数据变化都会影响$data。二、实例实例一：$data数据变化<template> <div> <h2>$data</h2> <button @click="$data.p1++">p1+1</button> <!--Vue中绑定事件, 如果没有参数, 可以省略小括号--&

目录一、概述二、实例一、概述$emit可以触发父作用域中当前组件绑定的事件监听器，即$emit可以使子组件触发父组件传递的事件。$emit的第一个参数是触发事件的名称，其余附加参数都会传给监听器回调。二、实例实例一：$emit触发父组件传递的事件，无参<!--父组件--><template> <div> <my-input @eventdemo="eventdemo" ></my-input>

目录一、概述二、实例一、概述$props属性包含了组件选项props接收的父作用域传递的属性。二、实例实例一：$props属性和$attrs属性互为补集$props属性和$attrs属性互为补集，二者之和为父作用域中当前组件的所有绑定属性，class和style属性除外。<!--父组件--><template> <div> <my-input type="text" placeholder="请输入文字" nam.

目录一、概述二、示例详解一、概述$listener属性包含了父作用域中所有的（不含.native修饰器的）v-on事件监听器，它可以通过如下代码将包含的事件监听器传入内部组件，在创建更高层次的组件时非常有用。$listener属性诞生的目的是为了在自定义组件中使用原生事件。<child v-on="$listeners"></child >二、示例...

一、概述想象一下，你打算封装一个自定义的input组件my-input，需要从父组件传入type、placeholder、title等多个html特性。此时子组件my-input中需要用props属性接收父组件传递的数据。export default{ name: 'myInput', props: ['type', 'placeholder', 'title']}...

目录一、概述二、详解一、概述DOM更新循环结束后，执行延迟回调。二、详解$nextTick有两个使用场景。场景一钩子函数created中进行的DOM操作一定要放在$nextTick的回调函数中。因为created执行时，DOM并未进行任何渲染，无法操作DOM。与之对应的钩子函数mounted中可以进行任何DOM操作，因为该钩子执行时，已完成DOM渲染。<script>export default { created() { this.$ne

目录一、概述二、详解一、概述$refs是一个对象，持有已使用ref属性成功注册引用信息的所有元素和子组件。$refs在组件渲染完成后才会生效。ref属性的作用有两个，其一给元素注册引用信息，其二给子组件注册引用信息。二、详解元素注册引用信息如下代码所示，ref属性给元素注册引用信息，并用$refs对象获取引用信息。<template> <div ref="root">123</div></template>&l

目录一、概述二、实例一、概述获取Vue实例挂载的DOM元素，自mounted钩子函数开始生效，之前的钩子函数内无效。如下代码所示，Vue脚手架中，$el指向当前组件template模板中的根标签。二、实例<template> <div id="root"> <h1 @click="fn()"> Lorem, ipsum </h1> </div></template>&l

一、概述VueComponent是一个Vue内置的构造函数，其实例即常提及的Vue组件实例。二、详解知识点1：this.$el获取Vue实例挂载的DOM元素，自mounted钩子函数开始生效，mounted之前的钩子函数内无效。如下代码所示，Vue脚手架中，$el指向当前Vue组件模板中的根标签。<template> <div id="root"> <h1 @click="fn()"> Lorem, ipsum

一、概述混入（mixins）提供了一种非常灵活的方式来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被合并进入该组件本身的选项。二、详解数据对象合并数据对象在内部会进行浅合并（一层属性深度），和组件本身的属性发生冲突时，以组件数据优先。const mixin = { data(){ return { name: 'jpf', age: 17 .

目录一、概述二、引入三、虚拟dom四、JS代替模板五、JSX六、函数式组件七、模板编译一、概述Vue推荐在大多数情况下使用template来创建html。然而在一些场景中，真的需要JS的完全编程能力，这就是render函数，它比template更接近编译器。二、引入下面是一个例子，如果要实现这样的效果。<div id="example"&gt...

一、概述什么是函数式组件函数式组件虽然也是一个Vue组件，但其本质是一个函数，将组件标记上functional即可构成函数式组件。函数式组件有两种类型，其一基于模板的函数式组件，其二基于渲染函数的函数式组件。函数式组件的特点函数式组件有三个特点，分别是无生命周期、无状态、无实例。无状态是指没有响应式数据，无实例是指没有this上下文。函数式组件不管理任何状态，也不监听任何传递给它的状态。函数式组件的渲染开销很低，其引用就相当于使用一个HTML标签。如果业务组件的目的是纯展示，

目录一、概述二、用法一、概述什么是表达式JS中表达式是运行之后会返回一个值的代码片段。什么是JSXJSX是React提供的语法糖，是JS和XML结合的一种格式，是一种JS语法扩展。JSX允许在JS中编写HTML，创建虚拟DOM。浏览器执行JSX语句时，遇到小括号（小括号有时可以省略），当HTML解析，遇到花括号，当JS解析。JSX语句本身是一个表达式，编译后会成为一个普通JS对象。注意，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"> .