Vue 动态插入组件 用js函数的方式第一步 import vue组件 第二步 Vue把组件扩展进去 第三步 创建实例 第四步 将组件的el挂载到document.body上 第五步 设置组件内部data的值，相当于设置propsimport yourComponent from './yourComponent.vue' import Vue from 'vue' export function openYourComponent (openType = '0') {let Task = Vue.extend(yourComponent)let taskvm = new Task()document.body.appendChild(taskvm.$mount()....
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子) 说到Vue的钩子函数，可能很多人只停留在一些很简单常用的钩子(created,mounted)，而且对于里面的区别，什么时候该用什么钩子，并没有仔细的去研究过，且Vue的生命周期在面试中也算是比较高频的考点，那么该如何回答这类问题，让人有眼前一亮的感觉呢… Vue-Router导航守卫： 有的时候，我们需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时...
因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。 组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。
代码：<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="./index.css" /></head><body><div id="app"></div></body><script src="./vue-develop.js"></script><script src="./index.js"></script><script>const app = new ...
我们都知道，VUE的data实例必须是函数，那么有没有与之相反的情况呢？答案是肯定的，因为VUE的根实例就没有“必须是函数”这个限制。我们需要考虑“VUE组件data对象实例” 与 “VUE的根实例”。在源码中找答案：src\core\instance\state.js - initData()function initData (vm: Component) { let data = vm.$options.data data = vm._data = typeof data === function ? getData(data, vm) : data || {} .... }通过源...
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 官方axios在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><title>Document</title><!-- <script src="vue.js"></script>...
render函数的知识点比较多，作为单独的一篇； 首先，render函数返回VNode，即虚拟DOM节点，VNode存储了基本所有DOM元素所需的信息，Vue之后就是根据VNode的信息准确地渲染出DOM元素并插入文档中；render函数接受两个参数: createElement函数(该函数负责创建VNode)和context(函数组件的上下文，只在函数组件中可用)；第二是createElement函数接收的参数(为了构建目标元素，应该传递什么结构的参数)；第三是函数组件中的render函数；...
一：目录结构二：utils.js文件 /* 防抖节流函数 */ let timeout = null // 创建一个标记用来存放定时器的返回值 let canRun = true; //!!!!这里一定要把变量设在外面，不然会失效！我搞了好久才搞明白！ export function debounce(fn) {return function() {clearTimeout(timeout) // 每当用户输入的时候把前一个 setTimeout clear 掉 timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 in...
setup函数使用vuex 问题： Vue3里的setup中如何使用vuex 描述： 在Vue2项目中可以使用this.$store获取vuex里的数据和保存全局数据，但是在Vue3的setup函数里，并没有this这个概念，因此如何使用路由方法 解决： 使用代替this的useStore，具体使用如下： <script>//引入路由函数 import { useStore } from "vuex";//使用 setup() {//使用vuexconst store = useStore();//正常使用，相当于store代替了this.$storestore.state ...retu...
记录一个Vue封装公共函数方法的步骤 这边要记录的是两种方法 一. 在main.js 中直接封装 我们以上一篇关于获取页面宽度的问题来做封装/*main.js*/ Vue.prototype.GetsPpageWidth= function(){let screenWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;return screenWidth; }使用/*某个页面的js*/ <script> export default {data() {return {screenWidth: 0, //屏幕尺寸};},mounted(...
vue 中常用的 高阶函数 一、filter 过滤 const nums = [10,20,30,40,666,980]//返回true 就把 内容加到 newNums数组中 let newNums = nums.filter(function(n){return n < 100 })要求: 1.n 为传递过来的每一个数 2.返回 小于 100 的 （你小于100 才会返回） 二、map函数 //2.map函数的使用 let new2Nums= newNums.map(function(n){return n * 2 }) console.log(new2Nums);要求：把所有的数字 * 2 返回 1.map 遍历数组 返回 的每一...
Vue父子组件生命周期执行顺序及钩子函数 每个Vue实例在被创建的时候都需要经过一系列的初始化过程，例如需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数)，这给了用户在不同阶段添加自己代码的机会。 1. vue官网展示的vue的生命周期图  在vue实例的...