vue学习

Vue学习笔记——前端模块化

视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通文件仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。本节目录：为什么需要模块化前端模块化为什么需要模块化JavaScript原始功能js文件太多，可能造成变量冲突。加载的顺序不同，可能造成覆盖匿名函数的解决方案使用闭包，把函数括起来(function(){varna
小910888·2024-01-28 15:54

Vue学习笔记-地区选择器

最近在项目里需要用到地区选择器，就找到V-Distpicker是一个简单易用的地区选择器。使用非常简单，功能强大，推荐大家使用。官网:https://distpicker.pigjian.comgithub:https://github.com/jcc/v-distpickerInstallationnpminstallv-distpicker--saveOryarnaddv-distpicker
赵客缦胡缨v吴钩霜雪明·2024-01-28 10:11

Vue学习笔记1(基础知识点和触发事件)

一套用于构建用户界面的渐进式JavaScript框架。Vue可以自底向上逐层的应用，简单应用：只需一个轻量小巧的核心库。Vue官网英文官网：API—Vue.js(vuejs.org)vue的md文档:在线版https://wekenw.gitee.io/vuedoc/Vue开发者工具：https://pan.baidu.com/s/1UvK1QtFjfrFKqqzYBgQPow?pwd=ziy4提
热爱可抵岁月mrx·2024-01-28 00:46

Vue学习笔记之应用创建和基础知识

1、安装方式CDN方式安装：2、创建应用使用Vue内置对象创建一个应用，基本代码结构如下：const{createApp}=Vue;createApp({data(){return{}},methods:{},mounted(){},computed:{}}).mount('#app');id为app的div元素，代表vue应用绑定的dom元素，vue对内部数据的操作都会直接影响dom的数据更新；
Three Big Stones·2024-01-28 00:44

Vue 学习

vue学习记录。
BGING·2024-01-28 00:43

Vue学习计划-Vue3--其他API：shallowRef与shallowReactive、readonly与shallowReadonly、toRaw与markRaw、customRef

其它API【shallowRef与shallowReactive】shallowRef作用：创建一个响应式数据，但只对顶层属性进行响应式处理。用法：letmyVar=shallowRef(initValue)特点：只跟踪引用值的变化，不关心值内部的变化shallowReactive作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的用法：letmy
化作繁星·2024-01-26 12:20

vue学习（22）表单数据

收集表单数据账号：密码：性别：男女爱好：学习睡觉吃饭所属校区请选择校区北京上海深圳其他信息阅读并接受《用户协议》提交Vue.config.productionTip=false;newVue({el:'#root',data:{account:'',password:'',sex:'',hobby:[],city:'',other:'',agree:''},methods:{submit(){co
哆啦C梦的百宝箱·2024-01-26 10:07

Vue学习笔记12--Vue3之setup/ref函数/reactive函数/Vue3响应式原理/reactive对比ref

一、拉开序幕的setup理解：Vue3中一个新的配置项，值为一个函数。setup是所有CompositionAPI(组合API）表演的舞台。组件中所用到的：数据、方法等，均要配置在setup中。setup函数的两种返回值：若返回一个对象，则对象中的属性、方法在模板中均可以直接使用。若返回一个渲染函数，则可以自定义渲染内容注意点：尽量不要与Vue2.x配置混用Vue2.x配置（data/methos
jxncxgx·2024-01-26 09:54

vue学习之slot 解决element-ui在table中插入链接地址

今天在element-ui的学习中要在表格中写入一个链接{{link}}结果什么都没有（后面的链接）官方文档是有介绍通过Scopedslot可以获取到row,column,$index和store（table内部的状态管理）的数据，用法参考demo。要写成这样{{test.row.link}}效果就是前图的前面那个链接。为此详细地学了一下Vue的slotslot就是一个插槽，将原本不属于这个模板的
雁过无声1986·2024-01-25 22:28

Vue学习- 侦听器使用

当有一些数据需要随着其它数据变动而变动时，很容易滥用watch，对于任何复杂逻辑，应当使用计算属性（computed），计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。Vue提供了一种通用的方式来观察和响应Vue实例上的数据变动：侦听属性（watch）。当需要在数据变化时执行异步或开销较大的操作时，使用侦听属性，比如在搜索框，输入文本后向后台请求搜索结果的场
_pass·2024-01-25 00:30

Vue 插槽 (Slots) 源码解析与用法

聚沙成塔·每天进步一点点本文内容⭐专栏简介1.默认插槽的实现原理用法示例：2.具名插槽的实现原理用法示例：3.作用域插槽的实现原理用法示例：⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue
几何心凉·2024-01-24 23:41

Vue 动态组件与异步组件：深入理解与全面应用

聚沙成塔·每天进步一点点本文内容⭐专栏简介1.动态组件实现原理：用法示例：2.异步组件实现原理：用法示例：3.异步组件的高级应用a.异步组件的命名：b.异步组件的加载状态管理：⭐写在最后⭐专栏简介Vue
几何心凉·2024-01-24 23:09

Vue学习笔记11--路由2（路由传参/命名路由）

一、路由的query传参路由的query参数传递参数{{m.title}}-->{{m.title}}接收参数$route.query.id$route.query.title二、命名路由作用:可以简化路由的跳转使用方法给路由命名：{path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'
jxncxgx·2024-01-24 17:38

Vue学习笔记9--vuex(专门在Vue中实现集中式状态（数据）管理的一个Vue插件）

一、vuex是什么？概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。Github地址：https://github.com/vuejs/vuex二、什么时候使用vuex?多个组件依赖于同一状态来自不同组件的行为需要变更同一状态多个组件需要共享数据时三、Vuex工作原理图Ac
jxncxgx·2024-01-24 17:37

Vue学习笔记8--插槽＜slot＞＜/slot＞

一、作用让父组件可以向子组件指定的位置插入html结构，，也是一种组件间通信的方式，适用于父组件===》子组件。二、分类：默认插槽具名插槽作用域插槽三、使用方法1.默认插槽父组件中：html结构1子组件中：插槽默认内容...2.具名插槽父组件中html结构1html结构2子组件中插槽默认内容...插槽默认内容...3.作用域插槽理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（
jxncxgx·2024-01-24 17:37

Vue学习笔记10--路由1(概念、基本使用、多级路由）

一、路由的概念路由就是一组key-value的对应关系key为路径，value可能是function或component多个路由，需要经过路由器的管理路由分类后端路由理解：value是function,用于处理客户端提交的请求工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据前端路由理解：value是component,用于展示页面内容工作过程：当浏览器的路径改变
jxncxgx·2024-01-24 17:35

Vue学习整理（二）

1.Vuex是什么？怎么使用？哪种功能场景使用它？Vuex是一个专为Vue.js应用程序开发的状态管理模式。每一个Vuex应用的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态(state)。在main.js引入store，注入。新建了一个目录store，……export。场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车state：Vu
三生有幸%·2024-01-23 22:08

vue学习，使用provide/inject通信

提示：组件的provide，可以被其内所有层级的组件，通过inject引用文章目录前言一、通信组件二、效果三、参考文档总结前言需求：使用provide/inject通信一、通信组件1、AA.vue1级providimportBBfrom'./BB'exportdefault{name:'AA',components:{BB},data(){return{title:'---测试provid和inj
longlongago~~·2024-01-22 02:32

Vue学习第19天——vue脚手架配置代理

目录一、什么是配置代理1、vue官方文档解释2、理解3、语法二、案例练习1、创建包含学生数据的服务器server12、开启server1服务器3、开启代理服务器4、通过ajax发送网络请求获取数据5、在以上代码的基础上改进配置代理①、通过ajax发送请求时更改一下路径②、在vue.config.js中添加配置代理规则四、总结①方法一：在vue.config.js中添加以下配置②方法二：在vue.c
离奇6厘米·2024-01-21 11:52

Vue学习笔记：vue权限设计（权限组件、权限指令）

1、权限组件：render函数，全局注册组件。优点：使用起来很方面，但缺点就是需要自己建立一个vue文件。S1.Authorized.vue是设计的权限组件（由于权限判断，如果在每个vue文件都先引入再使用会很麻烦，所以把他注册为全局，要用的话，直接使用会方面很多）补充知识点：a.h作为createElement的别名是Vue生态系统中的一个通用惯例，实际也是JSX所要求的【consth=this
smartHui·2024-01-20 19:51

Vue学习笔记--（2018-11-25）

概要：主要内容：vue安装时常用命令，文件目录介绍，better-scroll库的使用，项目部分优化措施*node安装node-v检查node版本*vue-cli全局安装npminstall-gvue-cli//加-g是安装到全局安装完成后使用vue回车可以看到针对vue的命令行*使用淘宝镜像网址:http://npm.taobao.org安装：npminstallcnpm-g--registry
Rain_Wuu·2024-01-20 18:20

vue学习第四天小结及周总结

回顾```监听器：{data:{msg:"",obj:{a:10,b:20}},watch:{msg(newVal,oldVal){//只要data中msg变化了，此函数自动触发},'obj.a'(newVal,oldVal){//obja属性值变化触发},obj:{handler(newVal,oldVal){//只要obj任意一个属性的值变化，都会触发},deep:true}}}计算属性使用一
微文殇却卟丢气质·2024-01-20 17:21

uniapp 学习笔记

VUE学习笔记布局横向布局H(){display:flex;//创建布局管理器flex-direction:row;//方向row垂直flex-wrap:wrap;//显示不下是否换行}//居中.center
宙思无限·2024-01-20 16:30

vue学习（41）消息订阅与发布

知识点消息订阅与发布是一种理念，实现它需要具体的第三方库，比如在angular中我们常用的rxjs,在这里讲的是使用pubsub-js这个库。一种组件间通信的方式，适用于任何组件间通信。使用步骤安装pubsub:npmipubsub-js引入：importpubsubfrom'pubsub-js'订阅：A组件想接收消息，则在A中订阅消息，订阅的回调写在A组件中。...mounted(){//订阅消
哆啦C梦的百宝箱·2024-01-20 15:15

VUE学习（三） 箭头函数（=>）

习惯了写传统js的我，看了箭头函数的第一眼，就是....这啥东西？经过大神指点后，总结出的一条道理就是：1.当在vue中使用箭头函数，可以在函数中使用this来引用全局的vue对象，若在传统函数中，有时会引不到。2.并不是所有的函数都适合改为箭头函数。当函数中使用本身的this时，我们再用箭头函数将会造成冲突，此时应在函数外面定义一个变量let$this=this。在函数内部通过$this来操作全
两个娃他爹·2024-01-20 03:37

Vue教程

一、Vue尚硅谷Vue学习视频：尚硅谷学习视频尚硅谷:http://www.atguigu.com/Vue学习视频(尚硅谷)：https://www.bilibili.com/video/BV1Zy4y1K7SH
Jin-进·2024-01-19 23:49

Vue学习笔记——vue-router

视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通文章仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。==箭头函数==：一种定义函数的方式//1.定义函数的方式：functionconstaaa=function(){}//2.对象字面量中定义函数constobj={bbb:function(){},bbb(){}
小910888·2024-01-19 20:15

非父子组件通信的方法

$attrs和$listeners5.第三方状态管理库⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对V
几何心凉·2024-01-19 18:48

vue前端面试题

virtualDOM都可以放进一个HTML文件中或成为更复杂的Webpack设置模块都有独立但通用的路由器和状态管理库React把组件定义为类Vue把组件定义为对象2.vue特点轻量级，相对于其他框架，vue
逸尘·2024-01-19 15:26

【vue学习】数组/对象更新监测

数组监测案例imageimage点击修改，页面未变化，查看控制台打印信息（items是最新数据）：image加上this.$forceUpdate()，页面更新。也可以直接用vm.$set()或给items重新赋值或用数组方法，如下：image再来看个神奇的操作【这里应该涉及到diff算法、VNODE，另行学习】image将修改按钮的函数改成如上图，这时候点击修改按钮imagethis.items
前端菜篮子·2024-01-19 02:15

Vue学习计划：从基础到实战，全面掌握Vue技术栈

如何高效的学习vue，来看看以下学习计划吧。阶段一：Vue基础阅读Vue官方文档，了解Vue的基本概念和用法。学习Vue的模板语法，掌握Vue指令和表达式的使用方法。学习Vue组件的使用方法，包括组件的定义、注册和使用。学习Vue的生命周期，理解组件在不同阶段的状态和行为。学习Vue的事件处理，包括事件绑定、自定义事件和事件修饰符。学习Vue的计算属性和监听属性，掌握数据的响应式更新和依赖收集。阶
袁代码·2024-01-17 23:03

Vue学习（1）

vue初始化项目npminit初始化一个项目npminstallvue然后安装vue初始化会产生一个pacakge.json的文件，这个文件用来描述项目的依赖执行完npminstallvue之后，会产生一个node_modules文件夹，其中存放着项目的依赖。此时项目的结构如下：image.pngpacakge.json文件中的内容如下：描述了项目的一些信息{"name":"vue-stydy",
不吃鱼的猫_8e95·2024-01-17 01:30

Vue中的v-model

聚沙成塔·每天进步一点点本文内容⭐专栏简介基本用法文本输入框复选框下拉框原理解析文本输入框的原理复选框和下拉框的原理⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue技能树参考资料专栏！
几何心凉·2024-01-16 19:21

Vue中的全局组件与局部组件

聚沙成塔·每天进步一点点本文内容⭐专栏简介1.全局组件的原理2.局部组件的原理3.组件注册的影响与考虑因素全局组件的使用场景：局部组件的使用场景：4.组合使用全局组件与局部组件⭐写在最后⭐专栏简介Vue
几何心凉·2024-01-16 19:21

Vue中父子组件通信

Vue中父子组件通信1.Props父组件：子组件：2.自定义事件子组件：父组件：3.使用`v-model`子组件：父组件：4.使用`$refs`子组件：父组件：5.使用EventBus⭐写在最后⭐专栏简介Vue
几何心凉·2024-01-16 19:21

Vue中的v-model绑定修饰符

.`.trim`修饰符的原理⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对Vue.js技能树的学习。
几何心凉·2024-01-16 19:49

Vue学习笔记6--配置代理

一、axiosAxios是一个基于promise网络请求库，作用于node.js和浏览器中。它是isomorphic的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.jshttp模块,而在客户端(浏览端)则使用XMLHttpRequests。二、配置代理1.方法一在Vue.config.js中添加如下配置：devServer:{proxy:'http://local
jxncxgx·2024-01-16 08:52

Vue学习笔记5-- nextTick | Vue封装的过渡与动画

一、nextTick(tick-工作，起作用；下次起作用）语法：this.$nextTick(回调函数）作用：在下一次DOM更新结束后执行其指定的回调。什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数在一个函数中，一般要函数执行完之后才会更新DOM，但有些涉及到DOM的操作比如获取焦点this.$ref.inputxxx.focus()必须DOM
jxncxgx·2024-01-16 08:51

Vue学习笔记4---消息订阅与发布(pubsub-js)

1.一种组件间通信的方式，适用于任意组件间通信。在实际应用中还是全局事件总线用得多。2.使用步骤：安装第三方的订阅与发布库pubsub:npmipubsub-js接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身methods:{getStudentName(msgName,data){console.log('有人发布了hello消息，hello消息的回调执行了！',ms
jxncxgx·2024-01-16 08:21

Vue学习笔记1

localStorage:本地存储sessionStorage:会话存储，会话关闭后数据丢失1.数组的基本操作：todos.unshift（）在数组的开头添加新元素todos.shift（）删除数组的第一个元素todos.push（）在数据的末尾添加新元素todos.pop（）删除数组的最后一个元素todos.reverse()元素的顺序反转排序todos.splice()从某个位置开始添加元素t
jxncxgx·2024-01-16 07:44

vue学习记录之——文件流导出下载以及文件流乱码的处理

导出下载功能要看后端接口返回的是文件流还是url还是id,url和id都很好处理，直接使用windouw.location.href，而文件流就比较麻烦。文件流下载具体代码及注释：exportfunctiondownloadFile(data,fileName,mime){varblob=newBlob([data],{type:mime||'application/octet-stream'})
孙梦biubiu·2024-01-15 04:06

vue实现搜索功能且关键字高亮，介绍(axios,promise)

很多伙伴在自己用vue学习开发的过程中，不像真正的工作开发，有后端支持，可以从后端那里调接口拿到真实的数据进行展示。
超人鸭·2024-01-14 22:30

Vue过滤器详解

聚沙成塔·每天进步一点点本文内容⭐专栏简介基本用法多个过滤器的串联过滤器在指令中的应用全局过滤器⭐本期推荐⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue技能树参考资料专栏！
几何心凉·2024-01-14 19:39

Vue中的class和style绑定

聚沙成塔·每天进步一点点本文内容⭐专栏简介动态绑定class对象语法数组语法动态绑定style对象语法多重值⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue技能树参考资料专栏！
几何心凉·2024-01-14 19:38

Vue学习计划-Vue3--核心语法（八）组件通信

组件通信Vue3组件通信和Vue2的区别：移出事件总线，使用mitt代替。vuex换成了pinia。把.sync优化到了v-model里面了。把$listeners所有的东西，合并到$attrs中了。$children被砍掉了。常见搭配形式：props概述：props是使用频率最高的一种通信方式，常用与：父↔子。若父传子：属性值是非函数。若子传父：属性值是函数。父组件：父组件父组件内的值：{{ca
化作繁星·2024-01-13 22:12

Vue学习计划-Vue3--核心语法（七）pinia

pinia案例gitee地址1.pinia准备一个效果【搭建pinia环境】安装pinia:npminstallpinia/yarnaddpinia第二步：操作src/main.tsimport{createApp}from'vue'importAppfrom'./App.vue'/*引入createPinia，用于创建pinia*/import{createPinia}from'pinia'/*
化作繁星·2024-01-13 22:41

Vue学习计划-Vue3--核心语法（九）slot插槽

【slot】插槽：简单说就是父组件内部使用了子组件，但是子组件内部某些结构需要使用者自行定义，此时就需要用到插槽实现默认插槽默认插槽的name是default父组件默认插槽子组件-->具名插槽在插槽上加上name,可以实现多个结构匹配v-slot必须要加在组件标签或者template标签上父组件-->插槽c1插槽c1子组件作用域插槽理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定
化作繁星·2024-01-13 22:39

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学习总结（一）

1.v-if和v-show的使用与区别1.1v-ifv-if用来控制是否显示包含该元素的块是否显示。接收一个布尔类型的值，为true的时候则显示，为false的时候就不显示。通常与v-else或者v-elseif配合使用。类似于代码中的if-else判断和if-elseif-else判断的使用。这是if判断中的文本这是else判断中的文本如果不显示，在DOM结构中，vue会将该元素直接注释掉。在查
GhostPaints·2024-01-13 05:15
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他