Seric.
码龄4年
关注
提问 私信
  • 博客：42,550
    42,550
    总访问量
  • 22
    原创
  • 1,752,837
    排名
  • 6
    粉丝

个人简介：是先生的多肉吖

IP属地以运营商信息为准，境内显示到省（区、市），境外显示到国家（地区）
IP 属地：广东省
  • 加入CSDN时间： 2020-10-26
博客简介：

Seric_xiao的博客

查看详细资料
个人成就
  • 获得37次点赞
  • 内容获得0次评论
  • 获得31次收藏
创作历程
  • 23篇
    2021年
成就勋章
TA的专栏
  • 后台路由
  • Vue
    22篇
  • Vue 自定义指令
    3篇
  • Vue 组件通信
    3篇
兴趣领域 设置
  • 开发工具
    vscode
  • 前端
    html5javascripttypescriptnode.jsvue.jsreact.jsstyluses6npmyarn
创作活动更多

AI大模型如何赋能电商行业，引领变革？

如何使用AI技术实现购物推荐、会员分类、商品定价等方面的创新应用？如何运用AI技术提高电商平台的销售效率和用户体验呢？欢迎分享您的看法

186人参与 去创作
  • 最近
  • 文章
  • 代码仓
  • 资源
  • 问答
  • 帖子
  • 视频
  • 课程
  • 关注/订阅/互动
  • 收藏
搜TA的内容
搜索 取消

JavaScript——浏览器的重绘与回流

一、浏览器渲染过程？ 1. 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象 。dom树里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。 2. 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式. 3. dom tree和样式结构体(...
转载
发布博客 2021.09.27 ·
352 阅读 ·
2 点赞 ·
0 评论 ·
0 收藏

Watcher类

1. Watcher类创建在编写Watcher类之前，我们先来看一张图，理解一下Dep与Watcher的关系通过前面的学习，我们知道在Observer类中为每一个响应式的数据创建了Dep对象，而且在getter 中会收集依赖，所谓收集依赖就是将watcher观察者添加到subs数组中.而在setter中会触发依赖，其实就是调用Dep对象中notify方法，该方法会获取subs数组中的所有的watcher,然后执行watcher中的update方法来更新对应的视图。Watcher 类的代码如下：cl
原创
发布博客 2021.09.26 ·
283 阅读 ·
1 点赞 ·
0 评论 ·
2 收藏

VueRouter模拟实现与源码解读

1、Vue.use( )源码源码位置：vue/src/core/global-api/use.jsexport function initUse (Vue: GlobalAPI) { //use方法的参数接收的是一个插件，该插件的类型可以是一个函数，也可以是一个对象 Vue.use = function (plugin: Function | Object) { //_installedPlugins数组中存放已经安装的插件。 const installedPlugins
原创
发布博客 2021.09.26 ·
188 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

Vue Router原理

现在我们已经掌握了Vue Router的基本使用，下面我们来模拟Vue Router的实现，通过模拟实现，来了解其内部的实现原理。我们这里模拟的是History模式。Hash模式基本实现上是一样的。这里先来复习一下Hash模式的工作原理。 ·URL中#后面的内容作为路径地址，当地址改变的时候不会向服务器发送请求，但是会触发hashchange事件。 监听hashchange事件，在该事件中记录当前的路由地址，然后根据路由地址找到对应组件。 根据当前路由地址找到对应组件重新渲
原创
发布博客 2021.09.26 ·
275 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

Hash模式与History模式

Hash模式与History模式区别前端路由中，不管是什么实现模式，都是客户端的一种实现方式，也就是当路径发生变化的时候，是不会向服务器发送请求的。如果需要向服务器发送请求，需要用到ajax方式。两种模式的区别首先是表现形式的区别Hash模式https://www.baidu.com/#/showlist?id=22256hash模式中路径带有#, #后面的内容作为路由地址。可以通过问号携带参数。当然这种模式相对来说比较丑，路径中带有与数据无关的符号，例如#与?His
原创
发布博客 2021.09.26 ·
2175 阅读 ·
2 点赞 ·
0 评论 ·
2 收藏

Vue 路由简介

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。在开发中，路由分为： 后端路由 前端路由 后端路由 概念：根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系 SPA（Single Page Application） Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作） SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内 容.
原创
发布博客 2021.09.26 ·
169 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

Vue 动态路由匹配

1.动态匹配路由的基本用法思考：<!– 有如下 3 个路由链接 --> <router-link to="/user/1">User1</router-link> <router-link to="/user/2">User2</router-link> <router-link to="/user/3">User3</router-link> // 定义如下三个对应的路由规则，是否可行？？？{ pat.
原创
发布博客 2021.09.26 ·
175 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

Observer

Observer的功能 负责把data选项中的属性转换成响应式数据 data中的某个属性也是对象，把该属性转换成响应式数据（例如data中的某个属性为Student对象，也要将Student对象中的属性转换成响应式） 数据变化发送通知 observer.js文件中的基本代码如下：class Observer { constructor(data) { this.walk(data); } walk(data) { //1、判断data是否是对象...
原创
发布博客 2021.09.26 ·
758 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

Compiler

功能 负责编译模板，解析指令/差值表达式 负责页面的首次渲染 当数据变化后重新渲染视图 通过以上功能的描述，可以总结出Compiler主要就是对Dom进行操作。在js目录下面创建compiler.js文件，实现代码如下：class Compiler { constructor(vm) { this.el = vm.$el; this.vm = vm; } //编译模板，处理文本节点和元素节点. compile(el) {} // 编...
原创
发布博客 2021.09.26 ·
142 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

Vue 侦听器watch

侦听器就是侦听data中的数据变化，如果数据一旦发生变化就通知侦听器所绑定方法，来执行相应的操作。从这一点上，与计算属性是非常类似的。但是，侦听器也有自己独有的应用场景。执行异步或开销较大的操作。下面，先来看一下侦听器的基本使用我们使用侦听器来统计总人数。 <p> 总人数：{{totalCount}} </p>在data中定义totalCount属性。 data: { selectItem: ""...
原创
发布博客 2021.09.26 ·
212 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

Vue 兄弟组件之间数据传递

兄弟组件传值，通过事件总线完成。1、定义父组件并且在父组件中，完成两个兄弟组件的创建。<script> Vue.component('father', { template: '<div><son></son><daughter></daughter></div>', components: { son: { ...
原创
发布博客 2021.09.26 ·
447 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

Vue 子组件向父组件传值

第一：子组件通过自定义事件向父组件传递信息。<button v-on:click='$emit("countSum")'> 计算</button>第二：父组件监听子组件的事件<menu-item v-on:countSum='sum+=1'></menu-item>具体的实现步骤如下：1、构建基本的结构 <div id="app"> </div>var vm = new Vue...
原创
发布博客 2021.09.24 ·
752 阅读 ·
3 点赞 ·
0 评论 ·
0 收藏

Vue 父组件向子组件传值

当我们将整个页面都拆分了不同的组件以后，这样就会涉及到组件之间的数据传递问题。常见的组件的通信可以分为三类：第一类: 父组件向子组件传递数据第二类: 子组件向父组件传递数据第三类：兄弟组件的数据传递。下面，我们先来看一下父组件向子组件传递数据的情况第一：子组件内部通过props接收传递过来的值。Vue.component('menu-item',{ props:['title'] // props后面跟一个数组，数组中的内容为字符串，这个字符串可以当做属性类使用。 temp
原创
发布博客 2021.09.24 ·
7289 阅读 ·
5 点赞 ·
0 评论 ·
4 收藏

Vue 自定义局部指令

局部指令的基本语法：directives:{ focus:{ //指令的定义 inserted:function(el){ el.focus() } }}在Vue实例中添加directives具体实现的代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />...
原创
发布博客 2021.09.23 ·
355 阅读 ·
3 点赞 ·
0 评论 ·
0 收藏

Vue 自定义指令-带参数

带参数的自定义指令创建的语法（改变元素背景色）Vue.directive('color',{ inserted:function(el,binding){ //binding表示传递过来的参数 el.style.backgroundColor=binding.value.color; }})指令的用法<input type="text" v-color='{color:"orange"}' />下面，看一下完整的代码案例：...
原创
发布博客 2021.09.23 ·
1331 阅读 ·
2 点赞 ·
0 评论 ·
0 收藏

Vue 自定义指令基本用法

为什么需要自定义指令呢？因为内置指令不满足需求。下面看一下基本的创建自定义指令语法:Vue.directive('focus',{ inserted:function(el){ //获取元素焦点 el.focus(); } })自定义指令用法<input type="text" v-focus>下面看一下具体的代码。<!DOCTYPE html>&...
原创
发布博客 2021.09.23 ·
163 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

Vue 过滤器

1. 过滤器基本使用过滤器在日常生活中也是比较常见的，例如自来水的过滤等。在Vue中，过滤器的作用就是格式化数据，也就是对数据的过滤处理，比如将字符串格式化为首字母大写或者将日期格式化为指定的格式等。下面先看一下自定义过滤器的语法Vue.filter('过滤器名称',function(value){//value参数表示要处理的数据 //过滤器业务逻辑，最终将处理后的数据进行返回})定义好以后可以使用。使用的方式如下：<div>{{msg|upper}}&
原创
发布博客 2021.09.23 ·
118 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

Vue 组件化的理解

你能谈一下对Vue组件化的理解吗？其实这也是一个比较常见的面试题。当然，这个问题的面是非常广的。可以通过以下几点来描述：定义：组件是可复用的Vue实例，准确讲它是VueComponent的实例，继承自Vue优点：组件化可以增加代码的复用性，可维护性和可测试性。使用场景：什么时候使用组件？以下分类可以作为参数第一：通用组件：实现最基本的功能，具有通用性，复用性。例如按钮组件，输入框组件，布局组件等。(Element UI组件库就是属于这种通用的组件)第二：业务组件，用于完成具体的业
原创
发布博客 2021.09.23 ·
154 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

Vue 路由守卫

Vue-router中的路由守卫，主要是对其内容进行保护，如果没有对应的权限，则不允许访问。我们首先来看一下全局守卫，也就是所有的路由都会经过全局守卫来进行检测。//实现全局守卫 router.beforeEach((to, from, next) => { //to:去哪个页面，from来自哪个页面，next继续执行. //判断哪个路由需要进行守卫，这里可以通过元数据方式 if (to.meta.auth) { ...
原创
发布博客 2021.09.23 ·
208 阅读 ·
1 点赞 ·
0 评论 ·
1 收藏

Vue 编程式导航

页面导航的两种方式声明式导航：通过点击链接实现导航的方式，叫做声明式导航 例如：普通网页中的 <a></a> 链接 或 vue 中的 <router-link></router-link> 编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航 例如：普通网页中的 location.href编程式导航基本用法常用的编程式导航 API 如下：this.$router.push('hash地址')this.$rou
原创
发布博客 2021.09.23 ·
166 阅读 ·
2 点赞 ·
0 评论 ·
0 收藏
加载更多