VUE开发常用知识
A: Vue (读音 /vjuː/，类似于 view)作者：尤雨溪(EvanYou) 中国人是一套用于构建用户界面的渐进式框架。学习使用之前须掌握 HTML、CSS 和 JavaScript 等知识。B: VUE优点：小而简单,轻量级框架,上手容易,简单易学,便于与第三方库或既有项目整合只关注视图层， 采用自底向上增量开发
Vue2中利用webpack动态生成路由在Vue2中，我们如果想要新增一个页面，步骤一般如下：在 src/views 目录下新建路由组件 page1.vue；在 src/router 目录下新增路由配置，建立起映射关系；这是最简单的情况，但是每次新增页面都要改动两处地方，着实不便，其次，随着项目越做越大，路由中的映射关系也会变得越来越复杂，超级难维护，比如说我现在接手的项目，路由组件就有180个，
目录前言一、动态路由是什么？二、如何实现1.登录时将获取的路由信息存入vuex2.持久化处理3.加载动态路由总结前言最近在学习vue3时，准备用vite+vue3弄一个后台管理系统，于是准备看看动态路由的实现方式。一、动态路由是什么？动态路由，顾名思义是动态获取的，是可变的。我们可以根据不同的角色身份加载不同的路由，使用动态路由不仅更加灵活，还便于维护，我们可以将路由信息存入数据库，前端只需通过一
转载
2024-10-29 23:55:26
72阅读
# 在 Vue 2 中添加 Axios 的详细步骤
## 概述
在现代的前端开发中，Axios 是一个广泛使用的 HTTP 客户端库，尤其是在使用 Vue.js 时。本文将详细介绍如何在 Vue 2 项目中添加和使用 Axios。
## 流程概述
以下是我们将要遵循的步骤，这里将其列成表格便于阅读。
| 步骤 | 描述 |
|------|-
原创
2024-09-29 04:04:53
53阅读
介绍：前台使用vue+vant开发的单页面，后台使用ant design pro单页面，实现手机端和后台聊天功能。效果如图(PC+移动)： 一、申请融云账号（token、appKey） 建议先看教程：sdk使用介绍 过一遍教程，接下来开始写 二、引入融云IM如图： 位置：public/index.html,引入<script src="https://cdn.ronghub.com/Rong
转载
2024-10-20 06:41:17
764阅读
前言之前有些过移动端的项目搭建的文章，感觉不写个pc端管理系统老感觉少了点什么，最近公司项目比较多，恰巧要做一个申报系统的后台管理系统，鉴于对vue技术栈比较熟悉，所以考虑还是使用vue技术栈来做；看过一个不错的后台配置模板（vue-element-admin），页面也挺美的，但是还是碍于不想看太多关于这个模板的配置说明，于是又拉出来之前我搭建的简易版的模板，决定重构下，使用自己搭建的后台系统模板
property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的userInfo.age 并没有在data 中定义，当点击按钮更新的时候，视图中的userInfo.age 也发生了变化
原创
2022-12-21 10:21:12
516阅读
目录 一、什么是模板引擎？ 二、将数据变为视图的方法：1、纯DOM法2、数据join()法：3、ES6的反引导法：4、模板引擎mustache：（1）循环对象数组：（2）数组嵌套：（3）不循环对象数组：（4）循环简单数组：（5）布尔值：一、什么是模板引擎？模板引擎是将数据变为视图最优雅的解决方案。 二、将数据变为视图的方法： 1、纯DOM法通过原生JS分别创
转载
2023-12-21 08:22:37
132阅读
前面我们已经陆续介绍了 Vue.js 框架的常用基本语法，现在，我们可以结合这些语法实现一个小功能：展示一个 Web 框架列表，并支持新增框架。 在 vue_learning/basic 目录下新建一个 computed.html 保存本篇教程的代码，然后编写上述功能的实现代码如下：
<html lang="en"><head> <m
<!-- HomeComp.
vue -->
<template>
<div class="home-comp" v-draggable>
<!-- 子组件内容 -->
</div>
</template>
<script>
export default {
directive
原创
2024-06-06 10:18:49
717阅读
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。如果
原创
2023-09-13 10:27:27
225阅读
前面我们已经实现了虚拟dom转变为真实dom，并且挂载到页面的逻辑了，其实已经很接近vue源码的思想了，但是我们还是稍微调整一下代码，让我们调用的时候更加像vue。现在我们要声明一个vue函数，做以下几件事：声明一个Vue函数，让我们可以new调用这个函数获取传入的options参数初始化数据挂载生成的dom元素function Vue（options）{
this.$options =
为什么需要模块化?答：真实开发的时候，代码量大，js文件多，分工开发的时候大家都不知道别人的代码，容易引发全局变量灾难。 node应用由模块组成，采用的commonjs模块规范。每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等，对其他的模块都不可见。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即modu
转载
2024-10-20 17:39:00
320阅读
v-for中的key来给每个节点做一个唯一的标识，diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点；key的主要作用是为了高效的更新虚拟dom，另外vue在使用相同标签名元素的过渡切换时，也会使用到key属性，目的是让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。v-for中带上key，防止vue替我们去计算DOM说到这个问题想必要举个例子了
copy fro
转载
2023-09-15 23:13:19
72阅读
说完了对象的监听和后期添加对象的操作，接下来，我们来说一说针对于数组的监听。1、首先还是定义一组数据用于展示，hobbys 为字符串数组，friends 为对象数组const vm = new Vue({
el: '#root',
data() {
return {
hobbys: ['抽烟', '喝酒', '烫头'],
firends: [
转载
2024-04-05 09:55:40
424阅读
在项目中，我们时常会遇到动态的去绑定操作切换不同的CSS样式，结合自身项目中遇到的一些情况，也参考了一些文档，针对vue.js样式的动态绑定切换做出如下小结：动态切换的核心思想：利用vue指令v-bind来实现动态绑定，从而设置切换不同的样式～vue的最大特点是数据驱动，利用特殊的语法将DOM“绑定”到底层数据，DOM与数据保持同步，每当数据发生变化，DOM视图就会做出相应的更新和响应，正是基于这
在动态组件上使用 keep-alive我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件：<component v-bind:is="currentTabComponent"></component>当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面：Pos
目录在 css 自定义变量的功能以及出来许久了，但实际开发中大家使用并不多。归其原因是因为 less、sass 等预处理器已经拥有定义变量的功能，以及Vue、react很方便设置 style 样式，大家可能觉得使用 css 定义变量不方便且没必要。实则不然举个最直观的栗子：“如何使用 vue 设置伪类伪元素的样式”。这是个世纪难题，大部分人可能会通过修改类名的方式解决，可如果要修改的样式多，或者我
# 在 Vue 2 项目中添加 TypeScript 的完整指南
在现代前端开发中，TypeScript已经成为一种流行的工具，它能够为JavaScript提供静态类型检查，帮助开发者在编码时减少错误。对于刚入行的新手来说，将 TypeScript 添加到现有的 Vue 2 项目中可能会感到困惑。本文将为你详细讲解如何实现这一过程，并提供必要的代码与说明。
## 过程概览
为了将 TypeS
