随笔分类 -  Vue

摘要:安装 vuex-persist yarn add vuex-persist 应用 store.js import Vue from 'vue' import Vuex from 'vuex' import VuexPersistence from 'vuex-persist' Vue.use(Vue 阅读全文
posted @ 2022-07-05 11:05 shine_lovely 阅读(93) 评论(0) 推荐(0) 编辑
摘要:使用 postcss-px-to-viewport 适配 安装插件 postcss-px-to-viewport npm install postcss-px-to-viewport --save-dev 配置postcss-px-to-viewport 使用 postcss.config.js单独 阅读全文
posted @ 2022-04-17 14:09 shine_lovely 阅读(2655) 评论(0) 推荐(0) 编辑
摘要:微信支付 微信支付分为: ① 微信内部支付 ② 外部应用吊起微信支付 场景 ① 微信扫描支付 web网页提供了一个订单确认的二维码,用户用手机微信扫码,微信浏览器展示订单确认页,用户点击确认页中的去支付,直接在微信浏览器中调取支付接口,进行支付。 <template> <div class="con 阅读全文
posted @ 2021-11-09 13:47 shine_lovely 阅读(58) 评论(0) 推荐(0) 编辑
摘要:index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" 阅读全文
posted @ 2021-09-08 16:56 shine_lovely 阅读(51) 评论(0) 推荐(0) 编辑
摘要:Vue SSR 理解+优缺点 ssr 服务端渲染,主要解决2个问题 更好的SEO SPA页面的内容是Ajax获取,而搜索引擎爬取工具并不会等待Ajax异步完成后再进行爬取页面内容,所以在SPA页面是抓取不到页面通过Ajax获取到的内容,爬虫获取的html,是一个没有数据的空壳子。 而SSR,是服务端 阅读全文
posted @ 2021-07-10 16:29 shine_lovely 阅读(2407) 评论(0) 推荐(0) 编辑
摘要:vue生命周期-父子组件 vue父子组件的生命周期 创建实例:从外到内(从父组件到子组件) 渲染:从内到外(子组件渲染完,再渲染父组件) Vue.component('comp',{ template:'<div>This is a component !</div>' }) const app = 阅读全文
posted @ 2021-07-05 14:39 shine_lovely 阅读(164) 评论(0) 推荐(0) 编辑
摘要:vue组件的更新:异步、批量 Vue组件的更新: 异步 批量 主要利用浏览器事件轮询的微任务机制来实现组件的异步批量更新。 当侦测到数据变化,vue会开启一个队列,将相关联的Watcher实例存入队列,将回调函数存入callbacks队列。异步执行回调函数,遍历watcher队列进行渲染。 异步: 阅读全文
posted @ 2021-06-28 17:38 shine_lovely 阅读(1021) 评论(0) 推荐(0) 编辑
摘要:new Vue()的过程 new Vue()的大致流程 new Vue() => _init() => $mount() => mountComponent() => new Watcher() => updateComponent() => render() => _update() 用户调用 n 阅读全文
posted @ 2021-06-24 15:57 shine_lovely 阅读(1146) 评论(0) 推荐(0) 编辑
摘要:vue2源码学习 — new Vue() 参考:https://blog.csdn.net/qq_36782473/article/details/109108477 调试环境 获取vue源码 项目地址:https://github.com/vuejs/vue 调试环境搭建 安装依赖: npm i 阅读全文
posted @ 2021-06-17 17:07 shine_lovely 阅读(82) 评论(0) 推荐(0) 编辑
摘要:手写router(简单实现嵌套路由) 需求分析: 简单实现嵌套路由 ① 记录当前路由的深度depth ② 路由匹配,得到深度对应的组件 代码实现 // 简单实现嵌套路由 // ① 记录当前路由router-view的深度 // ② 路由匹配,得到深度对应的组件 let Vue; class Rout 阅读全文
posted @ 2021-06-10 21:12 shine_lovely 阅读(148) 评论(0) 推荐(0) 编辑
摘要:手写Vuex 需求分析 Vue.use(Vuex) ⇒ 这是一个插件,需要实现一个静态方法 install new Vuex.Store(options) ⇒ 需要实现一个Store类 页面中可以通过 this.$store.xxx 可以访问store实例 ⇒ 需要挂载$store到Vue.prot 阅读全文
posted @ 2021-06-10 14:35 shine_lovely 阅读(71) 评论(0) 推荐(0) 编辑
摘要:手写vue-router(未实现嵌套路由) 需求分析: 页面无刷新跳转 ⇒ ① hash模式,监听onhashchange事件 ; ② history api ,利用H5的history api,来实现页面不刷新跳转 路由变化 ⇒ 页面更新 ==> 当前路由是个响应式数据 Vue.use(VueRo 阅读全文
posted @ 2021-06-08 17:56 shine_lovely 阅读(159) 评论(0) 推荐(0) 编辑
摘要:Vue3 的 axios封装 import axios, { AxiosPromise, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios' import qs from 'qs' import { Toast } from 阅读全文
posted @ 2021-05-31 21:08 shine_lovely 阅读(2289) 评论(0) 推荐(0) 编辑
摘要:手写vue - 虚拟DOM、diff算法 面试题: 1. 请简述Diff算法的执行过程 diff 的过程就是调用 名为 patch 的函数, 比较新旧节点, 一边比较,一边给真实DOM打补丁(定点更新)。 patch函数接受2个参数:oldVnode 和 vnode,分别代表 旧的节点 和 新的虚拟 阅读全文
posted @ 2021-05-25 16:16 shine_lovely 阅读(184) 评论(0) 推荐(0) 编辑
摘要:手写vue - 数据响应式、数据的双向绑定、事件监听 相关面试题: 1. MVVM的理解 MVVM:Model-View-ViewModel,也就是把MVC的Controller演变成ViewModel。 Model:数据模型,View:UI组件,ViewModel:View和Model的桥梁,数据 阅读全文
posted @ 2021-05-18 17:54 shine_lovely 阅读(119) 评论(0) 推荐(0) 编辑
摘要:非父子组件之间的通信: 1.兄弟组件 2. 用了插槽slot的组件之间通信 vue2中可以使用eventBus事件监听 vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'hi') vue3中,可以使用第三方插件 阅读全文
posted @ 2021-04-29 10:45 shine_lovely 阅读(143) 评论(0) 推荐(0) 编辑
摘要:Attribute 继承 当组件返回单个根节点时,非 prop attribute 将自动添加到根节点的 attribute 中。 同样的规则适用于事件监听器 禁用 Attribute 继承 如果你不希望组件的根元素继承 attribute,你可以在组件的选项中设置 inheritAttrs: fa 阅读全文
posted @ 2021-04-28 14:06 shine_lovely 阅读(198) 评论(0) 推荐(0) 编辑
摘要:按照vue3的组件v-model初探1,把:value 用 v-model来替代,并使用computed计算属性 子组件: <template> <div> <input v-model="val"> <div>{{ modelValue }} {{ val }}</div> </div> </te 阅读全文
posted @ 2021-04-28 11:08 shine_lovely 阅读(96) 评论(0) 推荐(0) 编辑
摘要:父组件: <template> <div class="about"> <v-input v-model="inp" type="text" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from ' 阅读全文
posted @ 2021-04-28 10:50 shine_lovely 阅读(145) 评论(0) 推荐(0) 编辑
摘要:vue自定义指令的作用 定义任何的DOM操作,并且是可复用的。 集成第三方插件。 vue自定义指令的实现 注册自定义指令: 全局自定义指令 // 自定义权限指令 Vue.directive('permission', { inserted (el, binding) { // el: 代表使用了此指 阅读全文
posted @ 2020-12-24 14:06 shine_lovely 阅读(272) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示