随笔分类 - Vue
前端框架Vue相关
摘要：getCurrentInstance 获取当前组件实例 import { getCurrentInstance } from "vue"; const instance = getCurrentInstance(); ctx 当前组件的上下文，只能在开发环境下使用，生产环境下的 ctx 将访问不到，
阅读全文
摘要：//vue3.0的App.vue配置方法如下：<template> <!-- vue3.0配置 --> <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" v-if="$route.meta.kee
阅读全文
摘要：onActivated(() => { let html = document.getElementsByTagName("html") as any; html = html[0]; html.style.backgroundColor = "#f2f2f4"; }); onDeactivated
阅读全文
摘要：<div class="custom-indicator-single" :class="{ 'custom-indicator-single-active': active == 1 }" ></div>
阅读全文
摘要：前言 最近在面试的时候，会问到一个问题就是你知道vue的事件总线吗？事件总线干嘛的？知道它的具体内容是什么吗？当我问到这些时，好多都没有听说过，有的听说过没用过，知道的不多。自己在想这就奇怪了，是做的项目不多还是项目做的只是练习的，没有接触过这个吗。今天就来简单的说说这个事件总线是个什么鬼。 用途
阅读全文
摘要：<template> <div ref="myRef">获取单个DOM元素</div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const myRef = ref(nu
阅读全文
摘要：<span v-show="!this.timer" @click="getCode">获取验证码</span> <span v-else class="count">{{count}} s</span> data(){ return { show: true, count: '', timer:
阅读全文
摘要：工具类 /** * 防抖 * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @return null */ let timeout: any; ex
阅读全文
摘要：1、适配方案 在本项目中我所使用的vue移动方案是使用amfe-flexible 和 postcss-pxtorem 结合）的方式。 首先介绍一下amfe-flexible amfe-flexible 是配置可伸缩布局方案，主要是将 1rem 设为 viewWidth/10。 然后就是这个库 pos
阅读全文
摘要：1.父传子父组件：在子组件上通过 v-bind绑定属性子组件：先定义下基本类型，然后通过setup的第一个参数取获取传过来的值(详细代码见下面）2.子传父父组件：在子组件上绑定一个事件，并定义回调子组件：通过setup的第二个参数去接受，第二个参数包含了（attrs，emit，slots），这里我们
阅读全文
摘要：简单数据ref复杂数据reactive 使用方法： // useCount.js import {ref,reactive,computed} from 'vue' export default function useCount() { // 简单数据定义及使用 let count = ref(0
阅读全文
摘要：什么是keep-alive 有时候我们不希望组件被重新渲染影响使用体验； 或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。 官网释义： <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和
阅读全文
摘要：1.谈一下你对MVVM原理的理解 传统的 MVC 指的是,用户操作会请求服务端路由，路由会调用对应的控制器来处理,控制器会获取数 据。将结果返回给前端,页面重新渲染。 MVVM :传统的前端会将数据手动渲染到页面上, MVVM 模式不需要用户收到操作 dom 元素,将数据绑 定到 viewModel
阅读全文
摘要：大家好，由于最近从事的是微信公众号和APP内嵌 H5开发，避免不了开发一些和native相同的操作功能，就如接下来说的 仿IOS滚轮选择器。github源码链接 https://github.com/zhangKunUserGit/vue-component大家可以下载运行 先来个截图： 先来屡一下
阅读全文
摘要：启用压缩，让页面加载更快 在我们开发的时候，为了方便调试，我们需要使用源码进行调试，但在生产环境，我们追求的更多的是加载更快，体验更好，这时候我们会将代码中的空格注释去掉，对代码进行混淆压缩，只为了让js,css文件变得更小，加载更快。但只是这样做是不够的，我们还可以做得更极致。 gzip是Web世
阅读全文
摘要：JSX简介 JSX是一种Javascript的语法扩展，JSX = Javascript + XML，即在Javascript里面写XML，因为JSX的这个特性，所以他即具备了Javascript的灵活性，同时又兼具html的语义化和直观性。 应用场景 为了让大家更方便的去理解JSX的作用及用法，小
阅读全文
摘要：插槽内容 Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口。 它允许你像这样合成组件： <navigation-link url="/profile"> Your Profile </navigation-link> 在 <navigation-link> 的模板中
阅读全文
摘要：Vuex是什么？ Vuex 类似 Redux 的状态管理器，用来管理Vue的所有组件状态。 为什么使用Vuex？ 当你打算开发大型单页应用（SPA），会出现多个视图组件依赖同一个状态，来自不同视图的行为需要变更同一个状态。 遇到以上情况时候，你就应该考虑使用Vuex了，它能把组件的共享状态抽取出来，
阅读全文
摘要：1. 当数据发生变化时，vue是怎么更新节点的？ 要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我们。 我们先根据真实DOM生成一颗v
阅读全文
摘要：vue中有一个较为特殊的API，nextTick。根据官方文档的解释，它可以在DOM更新完毕之后执行一个回调，用法如下： // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.nextTick(function () { // DOM 更新了 }) 尽管MVVM框架并不
阅读全文