初识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
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
Vue指令
介绍：什么是Vue：它是一个构建用户界面的JAVASCRIPT框架 特性：数据驱动视图指令(Directives) 是带有v- 前缀的特殊属性,指令属性是单一的js表达式.指令的职责就是表达式的值发生变化时,在DOM中做出相应的回应.如下例子：<div id="app"> <p v-if="seen">现在你看到我了</p></div><script>new Vue({ el: '#app', data:...
2024-01-10
Vue介绍
1、什么是VueVue.js是目前最火的前端框架，React是最流行的前端框架。和Angular.js与React.js一起并称为前端三大主流框架。Vue.js是一套构建用户界面的框架，只关注视图层。框架：是一套完整的解决方案，对项目的侵入性非常大。库：提供某一个功能的解决，对项目的侵入性很小。2、MVC与MVVM的关系MVC...
2024-01-10
Vue3的诞生之路
观感度：????????????????????口味：麻辣小龙虾烹饪时间：10min因时间有限，文中翻译不对的地方还请指出，望海涵。想感受原汁原味还请移步上方链接。致敬尤大！Vue3 的诞生之路EVAN YOU重写 Vue.js 下一个主要版本的经验在过去的一年中，Vue 团队一直在研究 Vue.js 的下一个主要版本，我们希望在 202...
2024-01-10
Vue（二）
---恢复内容开始---1、vue条件指令 可以运行加减运算 可以进行if判断<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>模板</title></head><body><div id="app"> <p v-if="r1" key="p_r1">if条件</p> <p v-show="r2">show条件</p> {{ num + 1 - 5 * 2}} <!--列表--> <!--v-el...
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过渡动画
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的插值表达式怎么保留小数位表格列被挤，位置很小v-if多个条件前言此笔记仅仅记录我在使用过程中遇到的一些问题，不定期更新Vue的插值表达式怎么保留小数位插值表达式其实都是字符串之类的，...
2024-01-10
Vue列表过渡
前面的话 本文将详细介绍Vue列表过渡概述 前面分别介绍了单元素CSS过渡和JS过渡，以及多元素过渡。如何同时渲染整个列表呢？在这种情景中，需要使用<transition-group>组件【<transition-group>】 <transition-group>不同于 <transition>， 它会以一个真实元素呈现：默认为一个 <span>。也可以通过 tag...
2024-01-10
Vue3 如何复用模板
在Vue3里面如下图，红框的部分是一样的，在不抽离成组件，不使用h函数的条件下，如何复用这一块代码回答：template 本来就不适合复用，你见过哪个组件库里可以复用的部分是用 template 开发的？Vue3 本来为了更好的复用，提出了 Composition API，为啥非得在 template 一棵树上吊死呢？回答：如果内容固定并且一致，for循环应该是最好的选择。如果模型基本一致，内...
2024-02-19
Vue的一些考点
前言作为前端开发中现行最火的框架之一，Vue 在面试中出现的频率不断增加。基于此，总结了一些 Vue 方面经常出现的面试题，留给自己查看消化，也分享给有需要的小伙伴感兴趣的小伙伴也可以点击 这里，查看前端方面的其他面试题，欢迎 star 关注如果文章中有出现纰漏、错误之处，还请看...
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
Vue3状态管理的使用详解
目录背景Provide / Inject抽离共享状态提供数据注入数据小结reactive抽离共享状态使用共享状态小结结语背景随着Vue3的逐步应用，对状态管理的需求越来越多。起初是基于Vuex4进行状态管理的，但是Vuex4也暴露了一些问题。从个人角度来说，Vuex4类似于过渡期产品，对TypeScript的支持性并不完整。如果使用Ty...
2024-01-10
Vue编译提示警告
There are multiple modules with names that only differ in casing.有多个模块同名仅大小写不同This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.这可能导致在一些文件系统中产生不是预期的行为Use equal casing. 使用唯一的写法提示原因：import Pagination from '../../../...
2024-01-10
Vue的手风琴过渡
我想给Accordion组件与车身的过渡整合，但没有成功:(所有的工作，以及除动画Vue的手风琴过渡模板：。<div class="accordion"> <div class="accordion-title" @click="isOpen = !isOpen" :class="{'is-open': isOpen}"> <span>{{title}}</span> <i class="ic ic-next"></i> </div> <div class="ac...
2024-01-10
最近的Vue知识总结
Vue的模板实现方式一种是基本的template模式一种是render函数结合jsx一种是render结合createElementrender提升了Vue的编程能力从单线程异步角度来说，开发是对时间的管理开发也是代码的管理，是对逻辑的管理，设计模式发生的范畴就是逻辑领域最近看到一句话如果一件事你做了有效果，那么就一直做，做...
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
