Vue学习笔记

Vue学习笔记五--路由

1、什么是路由2、VueRouter2、1VueRouter介绍2、2使用步骤2、3路由封装3、router-link3.1两个类名3.2声明式导航传参4、路由重定向、404当找不到路由时，跳转配置到404页面5、路由模式6、通过代码跳转路由---编程式导航&传参路由跳转时传参跳转方式两种，传参方式两种7、组件缓存8、多级路由在Vue中，多级路由指的是一个路由可以拥有多个子路由，这些子路由可以有不
夜阑卧听风吹雨，铁马冰河入梦来·2024-01-13 21:30

Vue学习笔记六--Vue3学习

1、Vue3的优势2、创建Vue3工程前提：node-v查看node版本，需要在16.0及以上创建命令npminitvue@latest,先安装create-vue然后创建项目然后执行npmrundev提示sh:vite:commandnotfound,需要执行npmi重新安装依赖，之后再执行npmrunbuild，再执行npmrundev可以正常运行了更换npm淘宝源首先打开命令提示符或者终端。
夜阑卧听风吹雨，铁马冰河入梦来·2024-01-13 21:30

Vue学习笔记

Vue基础笔记一、MVC与MVVM1.MVC（单向操作）model数据View视图controllor控制器2.MVVM（双向数据绑定）model数据View视图viewModel视图模型二、利用npm构建vue项目npminit-y//快速初始化npminit//手动设置npminstallvue//安装三、Vue指令1.v-model:表单数据数据双向绑定（后面会有详细介绍）2.v-html:
陈俊嵩·2024-01-10 20:22

Vue学习笔记之一起步

1.起步创建一个html，然后通过如下方式引入Vue：或者1.1HelloWorld：{{msg}}varvm=newVue({el:'#app',data:{msg:'HelloVue!'}})以上就成功创建了第一个Vue应用！Vue将数据和DOM之间建立了关联，所有东西都是响应式的。打开控制台修改msg的值，你将看到上例相应地更新。除了文本插值，我们还可以像这样来绑定元素特性：鼠标悬停几秒钟查
聽見下雨的_聲音·2024-01-08 01:04

Vue学习笔记（二） ——Vue组件化

组件的定义实现应用中局部功能代码和资源的集合，提高复用性。非单文件组件：一个文件中包含有n个组件，单文件组件：一个文件中只包含一个组件。本质是一个VueComponent的构造函数，且是由Vue.extend生成的。vc和vm极其相似，但并不是同一个东西，vm可以通过el决定根容器，vc则不能。非单文件组件基本使用1.创建组件通过Vue.extend({配置项})创建。注意，配置项与vue实例略有
m0_53507067·2024-01-07 23:43

Vue学习笔记

最近学习了Vue，Vue的出现简化了很多代码步骤，Vue最强大的就是双向数据绑定。什么是Vue？Vue是一套用于构建用户界面的渐进式框架。它的核心是视图层，它在前端MVVM中的角色是VM.它是调度者，它分割了M和V。如果V（视图层）想要取数据，那么它会通过VM到M层去取数据；存储数据，VM会将V层的数据存储到M层。VM是M层和V层沟通的桥梁Vue主要是以Vue内置命令驱动，这是我根据Vue官方总结
程序员海军·2024-01-06 20:44

4.vue学习笔记(事件处理+事件参数+事件修饰符)

文章目录1.事件处理1.1.内联事件处理器2.事件参数2.1.传参过程中获取Event3.事件修饰符3.1.阻止默认事件+阻止事件冒泡1.事件处理我们可以使用v-on指令（简写为@）来监听DOM事件，并在事件触发时执行对应的JavaScript。用法：v-on:click="methodName"或@click=“handler”事件处理器的值可以是1.内联事件处理器：事件被触发时执行的内联Jav
訴山海·2024-01-04 13:30

3.vue学习笔记（条件渲染+列表渲染+通过key管理状态）

文章目录1.条件渲染1.1.v-if1.2.v-else-if1.3.v-show1.4.v-if与v-show区别2.列表渲染2.1.复杂数据2.2.v-for与对象3.通过key管理状态1.条件渲染在vue中，提供了条件渲染，这类似于JavaScript中的条件语句v-ifv-elsev-else-ifv-show1.1.v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式
訴山海·2024-01-04 13:29

2.vue学习笔记（目录结构+模板语法+属性绑定）

文章目录1.目录结构2.模板语法2.1.文本插值2.2.使用JavaScript表达式2.3.原始HTML3.属性绑定3.1.简写3.2.布尔型Attribute3.3.动态绑定多个值1.目录结构1.vscode——VSCode工具的配置文件夹2.node_modules——Vue项目的运行依赖文件夹3.public——资源文件夹（浏览器图标）4.src——源码文件夹5..gitgnore——gi
訴山海·2024-01-04 13:59

5.vue学习笔记(数组变化的侦测+计算属性+Class绑定)

文章目录1.数组变化的侦测1.1.变更方法1.2.替换一个数组2.计算属性计算属性缓存vs方法3.Class绑定3.1.绑定对象3.2.多个对象的绑定形式3.3.绑定数组3.4.数组与对象1.数组变化的侦测1.1.变更方法vue能够侦听响应式数组的变更方法，并在它们被调用时出发相关的更新。这些变更方法包括：push()pop()shift()unshift()splice()sort()rever
訴山海·2024-01-04 13:58

Vue学习笔记（2）:Vue使用中碰到的一些坑

1.子组件获取不到父组件异步加载的值父组件：exportdefault{components:{Child},data:function(){return{childInfo:'1'}},created(){this.getInfo()},mounted(){},methods:{getGoodInfo:function(){this.$axios.get('http://localhost:80
疏花·2024-01-04 03:20

安装vue,使用idea运行vue3

vue学习笔记-安装vue,使用idea运行vue31.安装node.js1.https://nodejs.org/zh-cn/，点击长期支持版进行下载2.win+R输入cmd,输入node-v和npm-v
G_G_B·2024-01-02 10:25

Vue学习笔记：路由详解

路由：Hash地址与页面的对应关系。1、vue-router的基本使用（1）安装vue-roouter包[email protected]（2）创建路由模块在src源代码目录下，新建roouter/index.js路由模块，并初始化如下代码：importVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter))//调用V
子非余不知渔之乐·2023-12-28 09:22

VUE学习笔记-页面跳转

在最近的项目开发中，需要使用到Vue的页面跳转，就记录一下常用的几种：原生JSvarurl='https://10.50.1.10:8888/'window.open(url)//打开新页面window.location.href=url//跳转页面template点击跳转$router.push有时候我们需要的是点击按钮跳出弹窗，选择判断后进行跳转，我们常用.$router.push跳转传参：跳
赵客缦胡缨v吴钩霜雪明·2023-12-28 07:24

Vue学习笔记（一）

笔者不追求对Vue有深入的了解，笔者只对Vue进行了初步地学习，只为掌握springboot+Vue的前后端相结合的数据流动，所以笔记是基础中的基础。请搭配前几篇Springboot学习笔记食用。1.前端环境准备2.Vue框架介绍3.Vue快速入门4.axios快速入门5.跨域问题6.前端请求后端数据1.前端环境准备编码工具：VSCODE依赖管理：NPM项目构建：VueCli2.Vue框架介绍Vu
MSK_OS·2023-12-23 11:25

VUE学习笔记（黑马2023版 持更）

VUE学习笔记（黑马2023版）第一天1.Vue是什么？
m0_70675152·2023-12-21 03:25

Vue学习笔记(黑马前端)

Vue阶段作业地址Vue核心技术与实战day01Vue快速上手Vue概念/创建实例/插值表达式/响应式特性/开发者工具Vue指令v-html/v-show/v-if/v-else/v-on/v-bind/v-for/v-model综合案例-小黑记事本列表渲染/删除功能/添加功能/底部统计/清空Vue快速上手Vue是什么概念：Vue是一个用于构建用户界面的渐进式框架基于数据渲染出用户看到的页面Vue
ltpbje·2023-12-21 03:54

Vue学习笔记01-基础部分

文章目录VUE笔记-01基础1、简介mvvmES6补充js高阶函数let/varconst增强字面量写法2、基础2.1、引入2.2、第一个Vue程序el挂载点data数据对象methodsVue的生命周期(补)2.3、Vue指令**Mustache:胡子/胡须.****v-once**不经常**v-pre**cloak(了解)v-htmlv-textv-on绑定事件v-onv-on修饰符v-on参
sgxmr·2023-12-18 23:12

Vue学习笔记-Vue3中的readonly和shallowReadonly

readonly导入：import{readonly}from'vue'作用：让一个响应式数据变为只读的（深只读）用法：letdata=readonly(data)shallowReadonly导入：import{shallowReadonly}from'vue'作用：让一个响应式数据变为只读的（浅只读）用法：letdata=shallowReadonly(data)[备注]：上述应用场景一般用在
theLuckyLong·2023-12-17 19:31

Vue学习笔记 —— 关于vue.config.js不生效的解决方案

Vue学习笔记——关于vue.config.js不生效的解决方案前言检查script脚本启动项结束语前言今天在写Vue项目的时候，需要配置axios跨域代理，之后在根目录下创建了vue.config.js
Marinda_Speed·2023-12-17 17:35

Vue学习笔记-Vue3中的Teleport组件

作用该组件的作用一般用于CSS样式，Teleport能够将写在其中的组件传输到指定位置使用示范我是一个弹窗今日要闻今日要闻今日要闻今日要闻关闭弹窗如上述代码所示，teleport中的html元素被传送至body中，无论谁调用该组件
theLuckyLong·2023-12-16 03:32

Vue学习笔记-Vue3的toRef和toRefs

toRef作用：创建一个ref对象，其value值指向与其绑定的数据对象中的某个属性，当toRef创建的对象值改变时，与其绑定的响应式对象中对应的属性也发生改变导入：import{toRef}from'vue'使用：constname=toRef(data,'name')，其中data为响应式对象,'name'为其对应的属性的key应用场景：将某个响应式对象中的某个属性单独给外部使用时toRefs
theLuckyLong·2023-12-16 03:57

Vue学习笔记之组件开发

5.1组件化开发思想文章目录5.1组件化开发思想5.2组建的创建与使用5.3组件之间的通信5.4组件生命周期组件化是vue的精髓，vue开发就是由一个一个组件构成组件的分类：页面级组件业务上可复用的基础组件与业务无关的独立功能组件组件开发三要素：prop用于定义组件的属性自定义事件用于出发组件的事件slot用于组件功能的扩展组件设计需要考虑的问题：可扩展性强组件中方法函数的抽离，便于复用，适用程度
bfbshs_ddd·2023-12-16 01:39

Vue学习笔记之路由

文章目录第六章element-ui(vue2)/element-plus(vue3)第七章vue-router7.1路由的实现7.1.1MVC及MVVM架构下的路由7.1.2vue路由实现7.2延迟加载动态导入（懒加载）7.3路由模式解析7.4全局变量7.5嵌套路由7.6重定向和别名7.7导航守卫第六章element-ui(vue2)/element-plus(vue3)安装：npmelement
bfbshs_ddd·2023-12-16 01:39

Vue学习笔记之状态管理

第八章vuex状态管理文章目录第八章vuex状态管理8.1Vuex介绍8.2Vuex使用8.1Vuex介绍Vuex是一个专门为Vue.js应用程序开发的状态管理模式，将组件之间共享的数据（状态）放置在一个单独的容器（store）中可以看作一个加强版的data，一个全局的data属性，便于处理大量的需要在组件间传递的数据页面比较简单则最好不引入VuexVuex也是响应式什么情况下使用Vuex管理状态
bfbshs_ddd·2023-12-16 01:39

vue学习笔记之组合式API

第九章组合式API文章目录第九章组合式API9.1认识组合式API(CompositionAPI)9.2setup()方法应用9.3Composition常见API9.3.1响应式API9.3.2计算属性API9.3.3侦听器watch9.4组合式API中生命周期函数9.5组合API中provide和inject使用9.6组合式API结合路由9.7组合式API结合Vuex9.8其他API9.1认识
bfbshs_ddd·2023-12-16 01:58

VUE学习笔记

框架和插件框架不能轻易换，库可以MVC和MVVMnode（后端）中MVC：后端的分层开发概念MVVM是前端视图层的概念，主要关注视图层分离，把前端视图层分成三部分：Model、view、vmviewmodelimageVUE基础一、数据与方法当数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于data中的属性才是响应式的。使用Object.freeze()，会阻止修改现有的属
骆骆呀·2023-12-15 21:01

Vue学习笔记-Vue3中的shallowReactive和shallowRef

shallowReactive作用：与reactive作用类似，但只处理对象最外层属性的响应式（浅响应式）使用场景：如果有一个对象数据，结构比较深（内嵌多层对象），但只需要最外层的属性进行响应式，则使用shallowReactiveshallowRef作用：与ref作用类型，但只处理基本数据类型的响应式，不处理对象类的响应式使用场景：如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的
theLuckyLong·2023-12-15 13:11

Vue学习笔记-Vue3对响应式数据的判断

导入import{isRef,isReactive,isReadonly,isProxy}from'vue'作用isRef：检查一个值是否为ref对象isReactive：检查一个对象是否由reactive创建的响应式代理**isReadonly：**检查一个对象是否由readonly创建的只读代理**isProxy：**检查一个对象是否由reactive或readonly创建的代理
theLuckyLong·2023-12-15 13:54

Vue学习笔记-Vue3中的provide与inject

作用provide和inject用于实现祖孙间的数据通信用法导入：import{provide,inject}from'vue'使用：provide：祖组件使用该方法提供数据（可以给任意后代组件，但一般用于孙组件及其后代组件，因为父子间的数据传递用props）setup(){letcar=reactive({name:'Benz',price:'40W'})//给自己的后代组件提供数据provid
theLuckyLong·2023-12-15 13:53

Vue学习笔记-Vue3中的customRef

作用创建一个自定义的ref，并对其依赖项的更新和触发进行显式控制案例描述：向输入框中输入内容，在下方延迟1秒展示输入内容代码：{{keyword}}import{customRef}from'vue'exportdefault{name:'App',setup(){functionmyRef(value){returncustomRef((track,trigger)=>{lettimerretu
theLuckyLong·2023-12-15 12:38

Vue学习笔记-Vue3中的toRaw和markRaw

toRaw作用：将一个由reactive生成的响应式对象转为普通对象导入：import{toRaw}from'vue'使用方法：letdata=reactive({k1:'v1',k2:'v2'})//将对象变为非响应式的普通对象letraw_data=toRaw(data)使用场景：用于读取响应式对象对应的普通对象，对该普通对象的所有操作不会引起页面更新markRaw作用：标记一个对象，使其不再
theLuckyLong·2023-12-15 12:08

VUE学习笔记

安装第一次尝试在vscode中，新建终端，在终端中操作cdxxx进入要建立目录的目录输入vueinitwebpacktest1然后几次回车y以后就会创建如果输入cdtest1就会进入项目目录cnpminstall会下载安装项目的依赖最后输入cnpmrundev编译完成后在浏览器通过http://localhost:8080地址访问快捷键代码格式化：Shift+Alt+F
1Milion·2023-12-06 18:52

Vue学习笔记-activated和deactivated生命周期

作用路由组件所独有的2个生命周期activated生命周期函数用于在路由组件每次由消失到出现时所调用的函数deactivated生命周期函数用于路由组件每次由出现到消失时（无论是否缓存）所调用的函数案例定义一个NewsVue组件，要求：当该组件出现时，部分字体的透明度周期性变化，当该组件被切换走时，需要被缓存，但需要注销其定时器在其父组件中，需要将NewsVue组件设置为缓存在NewsVue模板中
theLuckyLong·2023-12-06 04:13

Vue学习笔记-编程式路由导航

作用不借助实现路由跳转，让路由跳转更加灵活具体代码可以在方法中通过指定API进行路由跳转//采用push模式进行跳转this.$router.push({name:'routeName',query:{key1:xxx,key2:xxxx,......}});//采用replace模式进行跳转this.$router.replace({name:'routeName',query:{key1:xx
theLuckyLong·2023-12-06 04:43

Vue学习笔记-＜router-link＞的replace的属性

router-link的replace属性作用：控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种写入方式：push和replace，其中push是追加历史记录（将浏览的url请求入栈），replace则是替换当前记录。路由跳转时默认为push模式如何开启replace模式：XXX或者XXX，前者为简写，后者为全写
theLuckyLong·2023-12-06 04:42

Vue学习笔记-缓存路由组件

作用让不展示的路由组件保持挂载，不被销毁具体编码在需要缓存的路由组件上级组件中编写如下代码
theLuckyLong·2023-12-05 09:57

vue学习笔记（七）——购物车案例及开发中的一些心得体会

一、props属性定义以及一些细节应用1.1props的2种定义方式props:[]-只声明变量,不能类型校验props:{}-声明变量和校验类型规则-不对则报错父组件定义属性子组件接收父组件传的值props:{backgroundColor:String,//外部传入此变量的值必须为字符串类型，否则报错title:{type:String,required:true//必须传入此变量的值，否则会
因为奋斗超太帅啦·2023-12-04 15:38

Vue学习笔记-模块化+命名空间

目的让代码更好维护，让多种数据分类更加明确（不同的模块挤在一个index.js中显得臃肿且不方便管理）实现方式修改store/index.js(也可以将不同模块分别写在不同的js文件中)constcountAbout={//开启命名空间namespaced:true,actions:{......},mutations:{......},state:{sum:0,},getters:{bigSum
theLuckyLong·2023-12-01 23:16

Vue学习笔记-命名路由

作用简化路由的跳转,适合在路径过长的时候使用（例如：path:'/a/b/c/d/e/f/...'）如何理解：相当于给路径起别名使用方式给路由命名//创建一个路由器constrouter=newVueRouter({routes:[......{path:'/home',component:HomeVue,children:[{path:'news',/*二级路由不用写斜杠*/component:
theLuckyLong·2023-12-01 23:16

Vue学习笔记-路由的基本使用

版本问题vue2要下载vue-router3vue3要下载vue-router4使用步骤安装vue-router，命令：npmivue-router@版本号在main.js中导入vue-router模块，并且使用vue-router插件......//引入vue-routerimportVueRouterfrom'vue-router'......//应用插件Vue.use(VueRouter)在
theLuckyLong·2023-12-01 23:45

vue学习笔记：路由vue-router的使用，路由传递数据

在使用vue-router之前要先引入:cnpm/npminstallvue-router--save引入之后就可以在组件之间使用路由进行跳转，首先建立两个组件titleHeader和homeHeader，和他们下面的内容路由文件titleContent和homeContent，再然后在main.js中引入vue-router,importVueRouterfrom'vue-router'Vue.
落花别有意 流水似无情·2023-11-29 16:27

【Vue学习笔记_09】v-model绑定表单元素

【Vue学习笔记_09】v-model绑定表单元素v-model基本使用和原理v-model绑定radio元素v-model绑定checkbox元素checkbox单选框checkbox复选框v-model
BugFrog1024·2023-11-29 12:27

Vue学习笔记-搭建Vuex

1.概念在Vue实现集中式状态（数据）管理的一个插件，对Vue中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通信方式，适用于任意组件间的通信2.使用场景多个组件需要共享数据时3.搭建Vuex环境创建文件src/store/index.js//index.js文件用于创建Vuex中最为核心的store对象importVuefrom'vue'importVuexfrom'vuex'V
theLuckyLong·2023-11-29 10:52

Vue学习笔记-Vuex中getters的使用

概念当Vuex中state里的数据需要加工后再使用,并且希望复用时，可以使用getters加工配置在/store/index.js中追加getters配置......conststate={...sum:3,...}//这里的getter用法类似于vue中的计算属性，getters中的方法参数天生可以获取state对象constgetters={bigSum(state){returnstate.
theLuckyLong·2023-11-29 10:52

Vue学习笔记-Vuex四个map方法的使用

在组件中导入方法import{mapState,mapGetters,mapActions,mapMutations}from'vuex'mapState方法的使用注意：这里的…是ES6语法，表示将该的对象所有属性展开，放入其所在上级对象中......computed:{//借助mapState生成计算属性，从Vuex中的state对象中读取数据（对象写法）...mapState({sum:'su
theLuckyLong·2023-11-29 10:52

Vue学习笔记-Vuex基本使用

基本使用初始化数据、配置actions、mutations，操作文件/store/index.js//index.js文件用于创建Vuex中最为核心的store对象importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)//actions对象用于响应组件中的动作,专门负责业务逻辑constactions={//函数声明完整写法，actions中的方法天
theLuckyLong·2023-11-29 10:46

Vue学习笔记之vue-cli安装

Vue学习笔记之vue-cli安装（一）安装node.js首先需要安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。
cctN·2023-11-28 07:50

Vue+Springboot项目练手（主要是后端）

Vue学习笔记：我个人不太建议看这篇文章，可以自己去找文章看看，我这篇文章我感觉写得有点乱，我建议跳过前面四部分，直接看后面。
同学郑学习·2023-11-26 17:23

vue学习笔记

该笔记均来自B站up主[程序员Allen]的视频前端项目/vue项目实战/vue+element-ui/vue经典案例分享/紧贴实战的vue经典案例_哔哩哔哩_bilibilitips：报Componentnamesshouldalwaysbemulti-word等错误，如不能命名Home.vue等，在vue.config.js中添加lintOnSave:false，然后重新runvue命令vsc
王小帅帅帅·2023-11-26 13:25
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他