初识Vue
这两天老大下任务，说要研究研究Vue，于是有了这篇博客。刚刚学习Vue也是很蒙圈的状态，看了几集视频，听了一个分享，这才有些门路，趁热打铁先画个思维导图，捋一捋silu思路。虽然内容不多吧，但是花费了我将近一个小时的时间。后续还会深入了解。...
2024-01-10
Vue笔记
Vue.js笔记常用命令安装webpacknpm install webpack [-g] //-g代表global，表示将webpack安装到全局环境中安装vue脚手架npm install vue -cli [-g]项目常用命令/** 通过webpack创建vue项目工程 */vue init webpack project-name //project-name为你的工程名，不能用中文，建议用小写/** 指定vue的版本创建vue项目工程 */vue ini...
2024-01-10
Vue3的新特性
1、响应系统的变动由原来的Object.defineProperty 的getter 和 setter，改变成为了ES2015 Proxy 作为其观察机制。Proxy的优势：消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。Proxy的属性及方法2、虚拟DOM重写（Virtual DOM Rewrite）虚拟 DOM 从头开始重写，我们可以期待更多的编译时提示来减少运行...
2024-01-10
Vue初体验
Vue特点 易用：HTML/CSS/JavaScript 灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩 高效：20kB min+gzip 运行大小 超快虚拟DOM 最省心的优化 渐进式：如果之前页面全是jQ写的，那么我们想改进单个或多个页面，可以单独提取出来进行改进安装 方式一：直接CDN引...
2024-01-10
Vue随堂笔记
视频地址：https://www.bilibili.com/video/BV15741177Eh讲师：codewhy(B站搜索)资料：https://pan.baidu.com/s/1yBhquzLNs91-8fWFpwe4Bg提取码：em9kVue简介Vue (读音 /vjuː/，类似于 view)Vue是一个渐进式的框架渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。如果你希望将更多的业务逻辑使用Vu...
2024-01-10
Vue登录注册
注册1.1 注册页面的布局1.2 注册业务逻辑的实现1.3封装api登录3.导航守卫注册1.1 注册页面的布局需要用到Vant的Field组件1.views下新建一个注册页面 ，完成基本布局。引入Vue和Field并使用。3.给注册页面添加一个单独的路由，注册页面不需要底部。（注意，相关样式需要引入不同的组件，请细心查看官方...
2024-01-10
Vue过渡动画
vue可以在元素或组件进入和消失的时候提供过渡效果使用过渡：<div > <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition></div>new Vue({ el: '#demo', data: { show: true }}).fade-enter-active, .fade-leave-activ...
2024-01-10
Vue网络请求
1.props的验证props可以指定类型：string、number、boolean、array、object类型传递动态和静态的props：title是静态，:age是动态默认值default，必选项required默认值如果是数组或者对象，必须返回一个function2.插槽:内容分发，同一个内容的不同展示效果1.基础插槽：SlotDemo与Slot2.具名插槽：template中slot与slot中的na...
2024-01-10
Vue报错处理
vue项目运行中,更改个东西,更新后报错如下搜索查询是node 内存溢出解决办法如下1 安装increase-memory-limitnpm i -g increase-memory-limit2 在此项目路径输入此命令 increase-memory-limitincrease-memory-limit运行完后执行npm run serve 啊，又报错了这是为什么呢，苦思冥想得知 仅需在 node_modules/.bin 文件夹搜索 "%_pro...
2024-01-10
Vue3+TS项目报错
刚用Vue-Cli 5.x版本构建的Vue3+TS项目报错了，说找不到模块，上网查了很多资料说在shims-vue.d.ts文件中写入那些代码就可以，我这个用了好多人给的方法还是报错，问题出在哪里？main.ts文件router/index.ts文件组件中的helloworld文件store/index.ts文件回答：先 npm run build 试一下，看看是不是 ide 的问题如果是的话，...
2024-02-24
Vue3教程，抢先学习
Vue 3尚未正式发布，但是维护者已经发布了Beta版本，供我们的参与者尝试并提供反馈。如果你想知道Vue 3的主要功能和主要变化是什么，那么我将在这篇文章中重点介绍一下，告诉你使用Vue 3 beta 9创建一个简单的应用程序。我将介绍尽可能多的新内容，包括fragments，teleport，Composition API以及其他一些晦...
2024-01-10
Vue的一些考点
前言作为前端开发中现行最火的框架之一，Vue 在面试中出现的频率不断增加。基于此，总结了一些 Vue 方面经常出现的面试题，留给自己查看消化，也分享给有需要的小伙伴感兴趣的小伙伴也可以点击 这里，查看前端方面的其他面试题，欢迎 star 关注如果文章中有出现纰漏、错误之处，还请看...
2024-01-10
Vue知识点整理
Vue重学语法key的重要性由于vue循环时不是将dom元素循环创造, 而是一个dom元素重复使用, 而它的diff机制是同层元素进行对比; 如下图:如上图: 对比的原则是 父节点 A 与 父节点 A 对比,下面的子节点与子节点进行对比. 如果右边的A 节点 变为 B 节点, 但是B下面的子元素还是B1, B2, B3. Vue的diff机制会删除 A...
2024-01-10
Vue作用域插槽
假设我们有一个子组件slot-test<template> <span> <slot > {{ user.lastName }} </slot></span></template><script> export default { name: "slot-test", data: function () { return {user: {lastName: "guodong", firstName:"hu"}}; ...
2024-01-10
狂神说Vue笔记
一、前端核心分析1.1、概述Soc原则：关注点分离原则Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据网络通信 ： axios页面跳转 ： vue-router状态管理：vuexVue-UI : ICE , Element UI1.2、前端三要素HTML（结构）：超文本标记语言（Hyper Text Ma...
2024-01-10
Vue核心知识点
一、vue.config.js 基本配置module.exports = { // 基本路径 cli3.3以前版本用baseUrl publicPath: \'/\', // 输出文件目录 outputDir: \'dist\', // 用于嵌套生成的静态资源 assetsDir: \'\', // 生产环境sourMap productionSourceMap: false, // webpack配置 configureWebpack: () => {}, chainWebpack:...
2024-01-10
Vue的核心思想
Vue的核心思想为数据驱动和组件化。一、数据驱动——双向绑定Vue是一种MVVM框架。而DOM是数据的一个种自然映射。传统的模式是通过Ajax请求从model请求数据，然后手动的触发DOM传入数据修改页面。Vue中，Directives对view进行了封装，当model里的数据发生变化是，Vue就会通过Directives指令去修改DOM。同时也...
2024-01-10
浅谈Vue数据响应
Vue 中可以用 $watch 实例方法观察一个字段，当该字段的值发生变化时，会执行指定的回调函数（即观察者），实际上和 watch 选项作用相同。如下：vm.$watch('box', () => { console.log('box变了')})vm.box = 'newValue' // 'box变了'以上例切入，我想实现一个功能类似的方法 myWatch。如何知道我观察的属性被修改了...
2024-01-10
Vue3 编译流程-源码解析
前言：Vue3 发布已经很长一段时间了，最近也有机会在公司项目中用上了 Vue3 + TypeScript + Vite 的技术栈，所以闲暇之余抽空也在抽空阅读 Vue3 的源码。本着好记性不如烂笔头的想法，在阅读源码时顺便记录了一些笔记，也希望能争取写一些源码阅读笔记，帮助每个想看源码但可能存在困难的同学减少理...
2024-01-10
深入了解Vue3模板编译原理
目录ParseTransformcacheHandlershoistStaticprefixIdentifiersPatchFlagshoiststype 变化Codegen代码生成模式静态节点帮助函数 helpershelpers 是怎么使用的呢?如何生成代码？Vue 的编译模块包含 4 个目录：compiler-corecompiler-dom // 浏览器compiler-sfc // 单文件组件compiler-ssr // 服务端渲染其中 compiler-core 模块是 Vue 编译的核心模...
2024-01-10
Vue实现跑马灯效果
本文实例为大家分享了Vue实现跑马灯效果的具体代码，供大家参考，具体内容如下实现的业务逻辑1、给[嗨起来]按钮，绑定一个点击事件 v-on（@）。2、在按钮的事件函数处理中，写相关的业务逻辑：拿到msg的字符串，后调用字符串中的substring来进行字符串的截取操作，放到最后一个位置。3、为了实...
2024-01-10
Vue添加请求拦截器
一、现象统一处理错误及配置请求信息二、解决1、安装 axios , 命令： npm install axios --save-dev2、在根目录的config目录下新建文件 axios.js ，内容如下：import axios from 'axios'// 配置默认的host,假如你的API host是：http://api.htmlx.clubaxios.defaults.baseURL = 'http://api.htmlx.club' // 添加请求拦截器axios.interceptor...
2024-01-10
Vue需要注意的地方
使用vue过程中,遇到了一些问题,这里先总结以下两个:问题一:vue组件之间传递数据,在子组件中我想改变一个从父组件中传过来的值这是父组件1234567891011121314151617181920<template> <div> <Child :message="message"></Child> </div></template><script>import Child from './child.vue';export default { data() ...
2024-01-10
Vue过渡效果的实现
1、Vue 过渡组件Vue 在插入、更新或者移除 DOM 时，使用内置的过渡封装组件可以实现过渡效果语法格式：<transition name = "xx"> <div></div></transition>2、过渡的类名在进入/离开的过渡中，会有 6 个 class 切换：v-enter：进入过渡的开始状态v-enter-active：进入过渡生效时的状态v-enter-to：进入过...
2024-01-10
