- 博客(126)
- 收藏
- 关注
RSS订阅原创 Element UI的介绍
在从来没有接触过 UI 组件库之前，我们页面上所有元素的样式效果和交互动作都要自己挨个去实现，就会增加很多的工作量。Element UI 组件库中提供了按钮、图标、输入框、评分组件、轮播图、消息提示、对话框等等一系列组件。大幅提升了我们的开发效率。Element UI 是由饿了么前端团队推出的基于 Vue 封装的 UI 组件库。提供的组件样式都是非常的简洁的，以及代码调用也是非常容易。官方网站：https://element.eleme.io/#/zh-CN。
2023-10-11 15:51:06
330
原创 Vuex的核心概念及作用
Store 有五个核心的概念，State、Getters、Mutations、Actions、Modules。你都必须要知道它们的作用是什么。
2023-10-10 13:54:28
159
1
原创 Vuex的介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。你完全可以理解 vuex 中的状态 state 就是和选项 data 几乎一模一样，唯一不同的是选项 data 是定义在组件内的，不同组件之间访问需要传来传去。而 vuex 中的 state 是全局的，在任何组件内，只需要通过就能访问了。Vuex 可以让 Vue 实例内的所有组件共享同一个状态（变量）。
2023-10-09 13:53:15
85
原创 Vue Router的进阶
官方文档上面描述的会比较深奥，而守卫类型也比较多，其中包含了全局前置守卫、全局解析守卫、全局后置钩子、路由独享守卫、组件内守卫。每一种守卫的作用和用法都不相同。这会使得大家去学习的时候觉得比较困难，这边主要介绍比较常用的守卫，全局前置守卫，其他的基本上没有那么常用就不讲解了，大家只需要学会全局前置守卫即可。另外导航守卫其实你可以理解成组件的生命周期那样，就是在路由变化过程中的每一个环节，都会触发特定的钩子函数，去做一些事情。
2023-10-08 16:44:33
223
原创 Vue Router的使用
新建 路由表文件。 注册路由。设置路由出口 。验证路由，在网页 url 中输入路由地址 就能够看到我们的页面了。以上是路由的基本使用。动态路由匹配动态路由是指我们的路由后面携带了动态的参数，例如我有一个新闻详情页面，每个新闻详情页面展示的数据都不同，但是却又使用的是同一个组件。这种情况是可以使用动态路由。通过 路由信息对象获取动态路由参数。验证路由。嵌套路由其实很简单，但是你思路没想通之前就会觉得很复杂。我们平时使用的页面切换的场景，基
2023-10-07 14:06:33
143
原创 Vue Router的安装
在我们使用脚手架搭建项目的时候，默认是没有帮我们安装的。需要自己手动进行安装。安装的 Vue-Router 插件时需要注意版本信息，Vue2.0 使用的是 Vue-Router3.x ，而 Vue3.0 使用的是 Vue-Router4.x。通过命令安装 vue-router@3 插件。
2023-09-27 14:06:56
202
原创 Vue Router的介绍
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。那么什么时候需要用到路由呢？最简单的想法就是切换页面的时候，想要实现类似切换页面的效果，也是可以使用路由实现的。在阅读本问文章之前已经确认你对单页面应用有一定的了解，并且清楚知道单页面应用的工作原理，以及它的优点、缺点。:::warning 注意。
2023-09-26 13:55:57
207
原创 单页面应用 Single Page
也就是指我们的系统只加载一次页面，剩下的页面切换交给路由去处理。页面中的数据替换则是交给 JavaScript 和 Ajax 处理。这些操作处理中页面是不会进行刷新的。在传统的模式中，如果是传统的前后端不分离，你每次修改页面中的数据基本上都要重新请求服务器资源，然后刷新整个页面进行重新渲染。在后来就是传统模式的前后端分离，可以通过 Ajax 获取数据，通过 JavaScript 给指定 DOM 进行替换内容。但是这种方式的页面切换时，也是会刷新整个页面的，而且一般都是通过a。
2023-09-25 13:55:11
188
原创 Vue中的侦听器 Watch
::warning 注意阅读本章内容之前必须先了解什么是 计算属性 Computed。相比计算属性，计算属性更适合用来做一些数据加工、过滤等处理。而侦听器更适合用来监听一个数据是否发生变化（包含 data、props、computed），如果发生变化则触发特定的函数操作。定义 Watch 侦听器函数时，请不要使用箭头函数。:::Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动。侦听器 Watch 是一个对象，键是需要观察的表达式，值是对应回调函数。
2023-09-21 14:49:24
202
原创 Vue中的计算属性 Computed
::warning 注意阅读本章内容之前必须先了解什么是 getter 、setter。必须知道模板语法以及过滤器的使用。:::小伙伴们应该都知道选项 data 里面可以用来定义一些数据，也可以通过 props 接收父组件传进来的数据，props 接收进来的数据是不能进行修改的，这里在明确声明一下。当我们想对展示的数据进行修改，可以通过过滤器的方式，之前的文章有介绍过了，还可以通过表达式来修改，因为模板语法支持表达式。下面进行代码回顾一下，之前验证过了，这里就不验证了。
2023-09-20 10:03:10
280
原创 跨级通信 Provide & Inject
Provide、inject 是一对选项。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深。依赖指的就是数据，可以将一份数据传给后代组件。后代组件通过 inject 可以进行接收。这个其实和 props 是很相似的。接下来进行实践一下。
2023-09-19 14:42:10
81
原创 Mixin 混入
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。怎么理解呢，就是每一个组件都会有一些选项 data、computed、methods …对吧，假设我有 10 个组件，每一个组件内都有一个相同的 methods 方法，那我就将这个可复用的方法抽离到 mixin 文件中，然后在引入进来。
2023-09-18 17:04:58
81
原创 Vue中的过滤器 Filters
例如我想对展示的文本进行一些特殊处理，将金额进行四舍五入后再展示。选项 filters 内可以编写多个自定义过滤器。过滤器一般用于格式化文本内容，通常可以在两个地方使用，主要是模板语法、以及。用法：变量名或文本 | 过滤器名称。
2023-09-15 17:29:16
154
原创 Vue中的动态 Class & Style
我们平时可以直接给元素设置静态的 Class 或者是 Style，但是这种方式会带来很多限制，假设我想要内容动态的改变 Class 或者是 Style，通过原生的方式要通过 JavaScript 频繁操作 dom 才能够实现。而在 Vue 中我们无需关心内部实现原理，可以直接给元素的 Class、Style 绑定一个变量或表达式，这样使得我们的代码更加灵活。
2023-09-14 16:16:58
729
原创 Vue中的生命周期钩子
::warning 注意所有生命周期钩子的 this 上下文将自动绑定至实例中，因此你可以利用 this 访问 props、data、computed 和 methods 等选项内的数据/函数。这意味着你不应该使用箭头函数来定义一个生命周期方法，因为箭头函数中没有 this，这样会导致 this 无法指向实例中。:::可以理解每一个组件就是一个实例，每个实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
2023-09-13 15:56:55
154
原创 VUE响应式
::tip 提示我们了解过响应式可以同步更新数据和视图，但是其工作原理我们最好也要了解一下。这样当你使用时遇到一些常见的错误，也能够快速定位是什么问题导致的。了解响应式原理之前，你必须要先去了解 ES5 的。:::响应式是 Vue 最独特的特性之一，之前我们在 MVVM 模式中也有介绍到数据模型。数据模型你可以理解就是在选项 data 中定义的变量。数据模型在响应式系统中仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接。
2023-09-12 14:15:17
203
原创 VUE中的插槽
这种方法有个弊端，万一有 100 种情况，那岂不是要在这个组件里面写 100 种展示形式，那这个组件可能要被代码撑爆了。可以发现，我们的 parent div 标签已经传入到子组件里面去了，并且也在子组件里面进行了接收，slot 标签代表展示的位置，slot 中的 name 代表接收的参数名称，这里可能就会想到了，插槽是可以传入多个的，如果传入多个，则会按不同的 name 进行区分。阅读该文章之前，已经确认你掌握了组件的基础知识，包含如何注册组件、引入子组件、组件之间的传递参数方式等。
2023-09-11 14:02:46
173
原创 组件以及组件间的通讯
在父组件中可以通过v-on或者在子组件身上进行监听事件，子组件通过调用 $emit 可以触发父组件监听的事件，同时还能够传递参数。:::warning 注意监听的事件名必须和触发的事件名保持一致。
2023-09-07 14:44:36
535
原创 Vue组件化
::tip 现实生活举例平时多注重一些细节，你就会发现生活中无处不在都是组件化。那么就举一个显示生活的例子，例如一台电脑，是不是由主板、CPU、内存条、硬盘、显卡多个部分组成，那么为什么不把这些配件全部焊接在主板上呢，作为一个整体呢？:::组件化是一种思想，就是你编写代码的时候不能像传统的思路一样，刷刷刷的把一整个页面的代码全部写在一个.html文件中。而是要把一个大的页面拆成若干个模块，若干个模块继续拆分成更细粒的模块，每一个模块刚好对应一个.vue文件。
2023-09-06 15:08:06
130
原创 模 板 编 译
Vue 的核心功能之一，模板编译。我们无需关心如何通过数据操作 DOM 进行页面渲染，这些事情 Vue 内部已经帮我们实现了。我们只需要关心数据层面即可。
2023-09-04 10:18:31
81
原创 什么是单文件组件？
单文件组件形式非单文件组件可以理解为是通过 html 文件来使用 Vue。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="wi
2023-09-01 14:19:26
679
原创 什么是 MVVM 模式？
MVVM 是一种新的开发模式，对比传统模式，例如我们要更新 DOM ，一般都是通过 JavaScript 处理数据然后操作 DOM API 将数据渲染到页面上。后续每一次修改数据后，都要重新调用 DOM API 进行数据渲染。当用户操作表单信息后，也要将数据同步到 JavaScript 数据中，这一系列操作将会变得很繁琐。
2023-08-31 09:51:37
189
原创 Vue怎么安装？看这一篇就够了！
一般我们都不会单独用 npm 去安装 Vue 插件，而是通过脚手架 Vue CLI 去初始化一个 Vue 项目。
2023-08-30 14:26:28
109
原创 什么是Vue？
::warning 注意在学习 Vue 之前建议你已经学会了 HTML5、CSS3、Javascript、ES6、ESLint、Webpack、Sass、前端工程化等基础。否则你学习起来可能会有点吃力。:::在我们传统模式中，都是通过 HTML5、CSS3、JavaScript 进行页面开发，但是其中会存在一系列的问题。而使用目前主流的框架则是解决了这些问题。当前三大主流框架分别有、Vue、React、Angular。
2023-08-29 14:01:30
267
原创 基于 xhr 实现 axios
上面我们讲到二次封装 axios ，但是现在我们尝试完全脱离 axios，自己实现一个 axios，由于 axios 底层是基于 xhr 做了二次封装，所以我们也可以尝试一下。
2023-08-28 15:44:08
1257
原创 axios 二次封装
基本上每一个项目开发，都必须要二次封装 axios。主要是为了减少重复性工作，不可能每一次发起新请求时，都要重新配置请求域名、请求头 Content-Type、Token 等信息。所以需要把公用的部分都封装成一个函数，每次调用的时候只需要传入变化的参数。:::warning 注意基于上个案例在继续做优化，如需要请查看。
2023-08-25 14:03:12
1772
原创 axios 进阶
使用 xhr 原生技术或者是 axios 时，它的 post 传参方式是键值对的形式key=value。但是在实际开发中一般是使用对象的形式定义数据，方便读取和赋值。所以当我们需要发起请求时可以通过 qs 这一款插件将对象转成键值对形式，也可以将键值对形式转成对象，这样就省去了我们自己手动转换的代码。:::warning 注意接下来的会在上一个 axios 案例的基础上去做调整，如需要请查看。
2023-08-24 16:44:20
700
原创 axios 介绍
axios 是一款基于 javascript xhr 进行封装的插件，自己通过 xhr 进行编写 ajax 请求，实现起来逻辑比较复杂，axios 封装后将复杂的逻辑写在插件的内部，我们用户只需要关心如何调用即可。对我们的开发带来了很大的便捷。
2023-08-23 14:04:46
1027
原创 HTTPS 握手过程
服务器收到客户端请求后，确认加密通信协议版本是否一致，如果版本一致则返回服务器证书，否则关闭加密通信。客户端收到网站证书后会检查证书的颁发机构以及过期时间, 如果没有问题就随机产生一个秘钥。用户在浏览器里输入一个 https 网址，与服务器建立 ssl 连接。客户端利用公钥将秘钥加密, 并传输给服务端。之后服务器与客户端使用秘钥加密传输。服务端利用自己的私钥解密出秘钥。
2023-08-21 15:33:07
1496
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人