Vue基础
Vue.js起手式+Vue小作品实战 本文是小羊根据Vue.js文档进行解读的第一篇文章，主要内容涵盖Vue.js的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代码，然后根据代码给予个人的一些理解，最后还放上在线编辑的代码以供练习和测试之用；在最后，我参考SegmentFault上的一...
2024-01-10
Vue基础笔记3
插槽指令<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>插槽指令</title> <style> body { font-size: 30px; } li:hover { color: orange; cursor: pointer; } .del:hover { c...
2024-01-10
Vue3的新特性
1、响应系统的变动由原来的Object.defineProperty 的getter 和 setter，改变成为了ES2015 Proxy 作为其观察机制。Proxy的优势：消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。Proxy的属性及方法2、虚拟DOM重写（Virtual DOM Rewrite）虚拟 DOM 从头开始重写，我们可以期待更多的编译时提示来减少运行...
2024-01-10
初识Vue
这两天老大下任务，说要研究研究Vue，于是有了这篇博客。刚刚学习Vue也是很蒙圈的状态，看了几集视频，听了一个分享，这才有些门路，趁热打铁先画个思维导图，捋一捋silu思路。虽然内容不多吧，但是花费了我将近一个小时的时间。后续还会深入了解。...
2024-01-10
Vue国际化
简单的实现由 vue-i18n实现的国际化首先我们需要安装 npm i vue-i18n;然后在 src文件下 新建一个i18n的文件然后在这个文件中放入 你的国际化js然后在main.js中 引入import VueI18n from ‘vue-i18n’import zh from ‘./i18n/zh.js’import en from ‘./i18n/en.js’然后在需要的页面写入就可以了...
2024-01-10
Vue的使用
Vue的使用一.挂载点<!--导入vue--><script src="js/vue.js"></script><script> new Vue({ el:'ccs选择器' })</script>这样设置好了后这个vue中的内容会与对应的css选择器进行关联注意点:挂载点只遍历第一个匹配的结果html与body标签不可以作为挂载点挂载点的只一般就采用id选择器(唯一性)二.插值表达式...
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搭配食用
总结index.html 用来被app.vue挂载main.js 用来告诉我们把app.vue挂载在哪里，以及引入要挂载的模板App.vue 被引入的基础模板，里面有路由标签，告诉我们路由输出的模板会在这里显示index.js 路由的控制器，引入要在路由标签显示的组件，配...
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个人笔记
目录前言Vue的插值表达式怎么保留小数位表格列被挤，位置很小v-if多个条件前言此笔记仅仅记录我在使用过程中遇到的一些问题，不定期更新Vue的插值表达式怎么保留小数位插值表达式其实都是字符串之类的，...
2024-01-10
Vue列表过渡
前面的话 本文将详细介绍Vue列表过渡概述 前面分别介绍了单元素CSS过渡和JS过渡，以及多元素过渡。如何同时渲染整个列表呢？在这种情景中，需要使用<transition-group>组件【<transition-group>】 <transition-group>不同于 <transition>， 它会以一个真实元素呈现：默认为一个 <span>。也可以通过 tag...
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
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
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的一些考点
前言作为前端开发中现行最火的框架之一，Vue 在面试中出现的频率不断增加。基于此，总结了一些 Vue 方面经常出现的面试题，留给自己查看消化，也分享给有需要的小伙伴感兴趣的小伙伴也可以点击 这里，查看前端方面的其他面试题，欢迎 star 关注如果文章中有出现纰漏、错误之处，还请看...
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(渐进式JavaScript框架)根据开发需求，可以决定vue框架控制项目的具体方位:可以为一个标签，也可以为一个页面，甚至可以为整个项目。一.vue导读主流前台框架:Angular,React,Vuevue框架 vue是前台html+css+js框架，是不同于js与jq的数据驱动框架 vue优点:结合其他框架的优点，轻量级，中文API，数据...
2024-01-10
Vue实现跑马灯效果
本文实例为大家分享了Vue实现跑马灯效果的具体代码，供大家参考，具体内容如下实现的业务逻辑1、给[嗨起来]按钮，绑定一个点击事件 v-on（@）。2、在按钮的事件函数处理中，写相关的业务逻辑：拿到msg的字符串，后调用字符串中的substring来进行字符串的截取操作，放到最后一个位置。3、为了实...
2024-01-10
最近的Vue知识总结
Vue的模板实现方式一种是基本的template模式一种是render函数结合jsx一种是render结合createElementrender提升了Vue的编程能力从单线程异步角度来说，开发是对时间的管理开发也是代码的管理，是对逻辑的管理，设计模式发生的范畴就是逻辑领域最近看到一句话如果一件事你做了有效果，那么就一直做，做...
2024-01-10
