0

从使用到自己实现简单Vue Router看这个就行了

Vue Router 基础让我们先来了解下Vue Router的简单使用吧,先了解怎么使用,之后再去想办法怎么去实现1.简介路由:本质上是一种对应关系分类分为前端路由和后端路由后端路由比如node.js 的路由是 URL的请求地址和服务器上面的资源对应,根据不同的请求地址返回不同的资源前端路由在SPA(单页应用)中根据用户所触发的事件改变了URL 在无需刷新的前提下 显示不同的页面内容,比如等下就要讲的Vue Router2.Vue-Router最基础的使用步骤2.1.引入Vue-Router文件<!-- 使用vue router前提 vue 必不可少 --> <script...

阅读全文>>

0

如何手动解析vue单文件并预览?

开头笔者之前的文章里介绍过一个代码在线编辑预览工具的实现(传送门:快速搭建一个代码在线编辑预览工具),实现了css、html、js的编辑,但是对于demo场景来说,vue单文件也是一个比较好的代码组织方式,至少笔者就经常在写vue项目的同时顺便写写各种demo,但是分享不太方便,因为单文件不能直接运行看效果,基于此,笔者决定在之前的基础上再增加一个vue单文件的编辑及预览功能。 ps.如果没看过之前的文章也没关系,这里简单介绍一下该项目:code-run,基本框架使用的是vue3.x版本, 构建工具使用的是vite,代码编辑器使用的是monaco-editor,基本原理就是把css、js、ht...

阅读全文>>

0

搞懂现代Web端即时通讯技术一文就够:WebSocket、socket.io、SSE

1、引言有关Web端即时通讯技术的文章我已整理过很多篇,阅读过的读者可能都很熟悉,早期的Web端即时通讯方案,受限于Web客户端的技术限制,想实现真正的“即时”通信,难度相当大。传统的Web端即时通讯技术从短轮询到长连询,再到Comet技术,在如此原始的HTML标准之下,为了实现所谓的“即时”通信,技术上可谓绞尽脑汁,极尽所能。自从HTML5标准发布之后,WebSocket这类技术横空出世,实现Web端即时通讯技术的便利性大大提前,以往想都不敢想的真正全双工实时通信,如此早已成为可能。本文将专门介绍WebSocket、socket.io、SSE这几种现代的Web端即时通讯技术,从适用场景到技术...

阅读全文>>

0

Vuex 学习笔记

1.1 vuex的核心概念State (驱动应用的数据源)Mutation (以声明方式将 state 映射到视图)Action(响应在 view 上的用户输入导致的状态变化)Getter (对 Store 中的数据进行加工处理形成新的数据)1.1.1 Startstart 提供唯一的公共数据源,所以共享的数据要统一放到Store 的 Stare 中进行存储。// 创建 store 数据源, 提供唯一公共数据 const store = new Vuex.store({ state: { name : 'code' } })组件访问 State中数据的第一种方式...

阅读全文>>

1

Vue.js 3.2 关于响应式部分的优化

Vue 3 正式发布距今已经快一年了,相信很多小伙伴已经在生产环境用上了 Vue 3 了。如今,Vue.js 3.2 已经正式发布,而这次 minor 版本的升级主要体现在源码层级的优化,对于用户的使用层面来说其实变化并不大。其中一个吸引我的点是提升了响应式的性能:More efficient ref implementation (~260% faster read / ~50% faster write)~40% faster dependency tracking~17% less memory usage翻译过来就是 ref API 的读效率提升约为 260%,高效率提升约为 50% ...

阅读全文>>

0

JavaScript 中的事件委托

JavaScript 中一个重要的方法就是事件委托(又叫事件代理)。事件委托将事件侦听器添加到一个父级元素上,这样就只用添加一次事件侦听器,可以避免向 (父级元素内)很多特定的 DOM 节点添加多个事件侦听器,减少了内存消耗,从而优化程序性能。而这个添加在父元素上的事件侦听器通过事件冒泡的事件流机制以分析查找子元素的匹配项。事件委托的概念解释并不复杂,但很多人不明事件委托到底是如何的工作,本文就来解释一下事件委托的工作原理。事件冒泡(Event Bubbling)要完全理解事件委托的工作原理,必须要先了解事件冒泡。事件冒泡的事件流最先是由微软在其开发的 IE 浏览器中实现的。事件冒泡的事件流,...

阅读全文>>

0

尤雨溪凌晨官宣:Vue 3.2 已发布

今日凌晨,尤雨溪在微博平台官宣 Vue 3.2 已发布,并表示:<script setup> + TS + Volar = 真香Vue 3.2 版本包括许多重要的新功能和性能改进,但并不包含重大更改。新的单文件组件功能:`<script setup>` 是一种编译时语法糖,可在 SFC 内使用 Composition API 时极大地提升工作效率。`<style> v-bind` 在 SFC 标签中启用组件状态驱动的动态 CSS 值。`<style>`一起使用这两个新功能的示例组件:<script setup> import { re...

阅读全文>>

0

Vue之MVVM模型和MVC模型

MVVMMVVM简介核心思想:分而治之(不同业务代码放到不同业务模块当中,通过特定逻辑组织到一块)MVVM其实是 M、V、VM,即 Model-View-ViewModel 的缩写。它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得 ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数...

阅读全文>>

0

总结50个Vue知识点,全都会你就是神

1. Vue的优点?Vue的缺点?优点:渐进式,组件化,轻量级,虚拟dom,响应式,单页面路由,数据与视图分开缺点:单页面不利于seo,不支持IE8以下,首屏加载时间长2. 为什么说Vue是一个渐进式框架?渐进式:通俗点讲就是,你想用啥你就用啥,咱也不强求你。你想用component就用,不用也行,你想用vuex就用,不用也可以3. Vue跟React的异同点?相同点:1.都使用了虚拟dom2.组件化开发3.都是单向数据流(父子组件之间,不建议子修改父传下来的数据)4.都支持服务端渲染不同点:1.React的JSX,Vue的template2.数据变化,React手动(setState),Vu...

阅读全文>>

0

分享20款响应式CSS框架,你平时开发用的是哪一款?

使用 CSS 框架是当前大部分前后端开发人员都会选择的,CSS框架的好处是帮开发人员节省了开发时间,提高了工作效率,改善用户体验,并且能很好的解决各种浏览器之间的兼容性问题。当然也会存在代码冗余,影响网站打开速度,但是对于好处来说这些问题都不是问题。接下去我会分享我所知道的所有的CSS框架,尽量把网络上现有的框架都收集起来,方便网友们的选择和比较。(框架顺序不代码框架的好坏)Bootstrapwww.bootcss.comBootstrap 就不多做介绍了属于老牌框架了,国内教程地址:www.bootcss.com(非官网),该网站目前已经整理了从2.0~5.0的所有教程资料。layuiwww...

阅读全文>>