Vue
文章平均质量分 84
vue
牛小小小婷~
这个作者很懒,什么都没留下…
展开
-
Vue3兄弟,爷孙组件间传值【包含手撸发布/订阅类】
1、 父组件通过v-model传递值给子组件时,会自动传递一个value的prop属性,在子组件中通过this.$emit(‘input’,val)自动修改v-model绑定的值。注意: 因为在setup中无法访问到应用实例(this),如果你需要在setup中使用eventBus,则需要通过provide/inject方式引入。1、 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件做到的。父组件A下面有子组件B,组件B下面有组件C,组件A传递数据给组件B。原创 2023-01-09 22:27:30 · 1234 阅读 · 10 评论 -
Vue与React中父子组件生命周期的执行顺序?【生命周期详细知识讲解!!!】
挂载阶段 :组件实例被创建和插入 DOM 树的过程更新阶段 :组件被重新渲染的过程卸载阶段 :组件从 DOM 树中被删除的过程【React二】生命周期钩子函数。原创 2023-01-04 10:33:36 · 581 阅读 · 0 评论 -
Vue与React分别实现登录拦截【详细例子+讲解】
创建store文件夹,进行初始化在 main.js 中创建全局的导航守卫中,拿取到这个实例。通过判断来守卫导航next()或者在login组件中通过提交userInfo数据项目地址:放置在github,点击此处项目在线查看。原创 2023-01-01 23:21:55 · 1883 阅读 · 0 评论 -
【记录】Vue关于子级组件向父级组件传值调用$emit函数不能够使用驼峰命名法的问题
1、 在$emit()中传入类似。原创 2022-12-17 11:17:21 · 457 阅读 · 0 评论 -
【Vue3】--setup两个属性+computed+watch【练习代码已上传至Gitee】
二、 setup的两个注意点2-1-1 set的两个参数: props,context2-1-2 props与emits【子像父传递参数,父向子传递参数】2-1-2-1 父组件App.vue2-1-2-2 子组件Demo.vue三、计算属性computed + watch3-1 computed3-2 watch3-2-1 两个小坑3-2-2 监视的几种情况及结果展示3-2-3 watch时value的问题3-3 watchEffect四、生命周期4-1-14-1-2原创 2022-11-13 18:54:48 · 907 阅读 · 0 评论 -
【VUE3】--创建vue-cli项目,setup+ref+reactive+vue2/vue3响应式原理【练习代码已上传至Gitee】
创建vue-cli项目,setup+ref+reactive+vue2/vue3响应式原理官方笔记地址: https://24kcs.github.io/vue3_study/原创 2022-11-13 16:28:22 · 377 阅读 · 0 评论 -
vue路由详解【多级路由+路由守卫】
特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。作用:让不展示的路由组件保持挂载,不被销毁。分类:全局守卫、独享守卫、组件内守卫。分类:全局守卫、独享守卫、组件内守卫。配置路由,声明接收params参数。作用:让路由组件更方便的收到参数。实现路由跳转,让路由跳转更加灵活。作用:可以简化路由的跳转。express搭建服务器哦。作用:对路由进行权限控制。作用:对路由进行权限控制。原创 2022-10-26 17:13:26 · 1735 阅读 · 0 评论 -
【Vue基础十三】---Vuex的求和案例--map辅助函数的使用
【代码】【Vue基础十三】---Vuex的求和案例--map辅助函数的使用。原创 2022-09-19 11:11:53 · 505 阅读 · 0 评论 -
【Vue基础十三】--安装vuex插件之后,vue原型上没有$store
检查结果: 完全正确!原创 2022-09-19 10:49:36 · 1422 阅读 · 1 评论 -
【Vue十三】-- Vuex详细介绍
备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。目的:让代码更好维护,让多种数据分类更加明确。开启命名空间后,组件中调用dispatch。开启命名空间后,组件中调用commit。对话的方法,即:包含。对话的方法,即:包含。原创 2022-09-18 21:53:13 · 960 阅读 · 0 评论 -
【Vue十二】--- 指令
功能: 用于解析标签(标签属性、标签体内容、绑定事件…)举例:,xxx同样要写js表达式,且可以直接读取到data中的所有属性Vue中有很多指令,且形式都是: v-???原创 2022-09-18 17:52:50 · 194 阅读 · 0 评论 -
【Vue基础十一】---过滤器
注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名。过滤器:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理。'YYYY年MM月DD日 HH:mm:ss'并没有改变原本的数据, 是产生新的对应的数据。'YYYY年MM月DD日 HH:mm:ss''YYYY年MM月DD日 HH:mm:ss''YYYY年MM月DD日 HH:mm:ss'原创 2022-09-18 17:30:21 · 100 阅读 · 0 评论 -
【Vue基础十】--- 兄弟组件之间传值【中央事件总线,消息订阅与发布】
任意组件间通信一种组件间通信的方式,适用于任意组件间通信。使用步骤:引入:接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。this . pid = pubsub . subscribe('xxx' , this . demo) //订阅消息 }pubsub.publish('xxx',数据)最好在beforeDestroy钩子中,用去取消订阅。原创 2022-09-18 17:06:03 · 188 阅读 · 0 评论 -
【Vue基础九】--父子组件传值
子组件 ===> 父组件使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。绑定自定义事件:或若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法。原创 2022-09-18 11:12:41 · 427 阅读 · 0 评论 -
【Vue基础八】--- ref属性,props配置,mixin混入,插件,scoped的样式
备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)// 接收的同时对数据:进行类型限制+默认值的指定+必要性的限制。// 组件交互相关的代码(数据、方法)原创 2022-09-17 20:38:11 · 87 阅读 · 0 评论 -
【Vue基础七】-- Vue CLI
因为vue.runtime.xxx.js没有模板解析器,所以不能使用template这个配置项,需要使用render函数接收到的createElement函数去指定具体内容。vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;├── babel.config.js: babel的配置文件。├── .gitignore: git版本管制忽略的配置。│ ├── favicon.ico: 页签图标。│ │── App.vue: 汇总所有组件。│ │── main.js: 入口文件。原创 2022-09-17 19:55:58 · 83 阅读 · 0 评论 -
【Vue基础七】--- 组件和模块概念
h2>学校姓名: {{schoolName}}学生姓名: {{name}}地址: {{address}}学生年龄: {{age}}学校姓名:学生姓名非单文件组件: 一个文件中包含有n个组件。// 第二步:注册组件(局部注册)// 创建school组件。// 创建school组件。// 创建student。// 创建hello组件。原创 2022-09-17 18:56:00 · 1144 阅读 · 0 评论 -
【Vue基础六】--- 生命周期详解
- 生命周期回调函数、生命周期函数、生命周期钩子 - Vue在关键时刻帮我调用的一些特殊名称的函数 - 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的 - 生命周期函数中的this指向是vm或组件实例对象原创 2022-09-16 19:49:17 · 269 阅读 · 0 评论 -
【Vue基础五】-- 收集表单数据
vue收集表单数据。原创 2022-09-16 18:24:35 · 114 阅读 · 0 评论 -
【Vue基础四】Vue检测数据改变的原理
Vue监视数据的原理vue会监视data中所有层次的数据。如何监测对象中的数据?通过setter实现监视,且要在new Vue时就传入要监测的数据对象中后追加的属性,Vue默认不做响应式处理```js```如何监测数组中的数据?通过包裹数组更新元素的方法实现,本质就是做了两件事:调用原生对应的方法对数组进行更新。重新解析模板,进而更新页面。使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()原创 2022-09-16 11:21:53 · 472 阅读 · 0 评论 -
【Vue基础三】----列表过滤实现搜索功能+列表排序
/ 原顺序 1降序 2升序。// 用computed实现。// 用computed实现。// 判断一下是否需要排序。原创 2022-09-16 09:38:17 · 479 阅读 · 0 评论 -
【Vue基础二】--- 计算属性,watch,style,class,条件列表渲染
原理:底层借助了Object.defineProperty方法提供的getter和setter。所有不被Vue管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数。优势: 与methods实现相比,内部有缓存机制,效率更高。只要data中的数据发生变化,vue一定会重新解析模板。只考虑读取,不考虑修改时,可以简写computed。Vue的watch默认是无法检测对象内部值的改变。vue中三个VScode的插件。原创 2022-09-15 20:58:16 · 376 阅读 · 0 评论 -
【Vue基础一】
基本原理: 通过Object.defineProperty()把data对象中所有属性添加到vm上,为每一个添加到vm上的属性,都指定一个getter/setter。 4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;v-model:value可以简写为v-model,因为v-model默认收集的就是value值。v-model只能应用在表单类元素(输入类元素)上-----> name。M:模型(Model):对应data中的数据。原创 2022-09-15 20:08:17 · 265 阅读 · 0 评论 -
【promise一】promise的介绍与手撸的关键问题
概念Promise是一门新的技术Promise是JS中进行异步编程的新解决方案备注: 之前是单纯使用回调函数具体:语法上: Promise是一个构造函数功能 : promise对象用来封装一个异步操作并可以获取其成功/失败的值...原创 2022-06-21 23:46:10 · 90 阅读 · 0 评论 -
Vue.js官网练习代码【所有代码均可运行,更便捷地理解官网解释】(可对照查看)
文章目录1-1 0-组件化应用构建1-2 0-起步1-3 1-模板语法1-4 2-dataProperty和方法1-5 3-计算属性和侦听器1-6 4-class与Style的绑定1-7 5-条件渲染1-9 6-列表渲染1-10 6-一个todo列表1-11 7-事件处理1-12 8-表单输入绑定1-1 0-组件化应用构建<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2022-03-17 11:40:59 · 652 阅读 · 0 评论 -
前端vue实现增删列表&原生JS实现页面的增删【代码可copy运行】
一、 vue实现1-1 页面1-2 代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1原创 2022-03-17 11:17:29 · 1062 阅读 · 0 评论 -
VUE中this.$set()
一、 套入例子进行分析1-1如下所示,双层遍历 得到展示列表1-2 “排行榜template代码” <el-row class="wrapper" :gutter="20"> <el-col :span="6" v-for="item in top_list" :key="item.id" class="toplist_item"> <div class="coverImg"> <原创 2022-03-17 10:57:09 · 1141 阅读 · 0 评论 -
vue跳转页面时传参给b页面,b页面接收参数【query】例子浅析mounted和watch
点击跳转至Song页面 <router-link class="simi-name" :to="{ path: '/song', query: { id: simiItem.id }}"> {{ simiSong.name }} </router-link><script>export default { components: { }, created () { }, data () { return { .原创 2022-03-17 10:16:11 · 2183 阅读 · 0 评论 -
ElmentUI走马灯的使用【获取后端数据进行图片的使用】解决图片无法显示的问题
<template> <div class="banner"> <el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="item in banners" :key="item.imageUrl"> <img :src="item.imageUrl" class="banner_img"> </原创 2022-03-17 09:05:15 · 2509 阅读 · 1 评论 -
Vue/React项目 如何简单配置根目录和build打包访问路径
项目打包上线时 因为 路径问题,只能访问 主页面,跳转页面之后无法找到对应路径 而无法访问?一、 项目文件夹下新建vue.config.js文件,修改publicPathmodule.exports = { publicPath: "/xs_music/"}二、 跑项目时路径也发生对应改变三、 项目打包上线时也可以正常访问比如自制播放器网址 : http://yiyaobingo.3vkj.net/xs_music/index...原创 2022-03-16 19:56:36 · 5292 阅读 · 0 评论 -
vue 如何去除 eslint 代码验证
一、 Eslint开门见山,不大会配置eslint的验证规则eslint的验证规则还和vscode的插件格式化代码相冲突就是如下情形,Ctrl+s之后、二、 解决方法在package.json文件中删除与 eslint相关的配置文件三、1、 npm install2、 npm run serve...原创 2022-03-06 22:48:33 · 1036 阅读 · 0 评论 -
【vuex】路由权限控制页面跳转
通过state.userInfo控制用户登录路由权限【Vuex 的 详细讲解 】与【count++的案例实现】文章标题一、 效果展示二、 代码展示1-0 router.js1-1 store文件夹下1-1-1 state.js1-1-2 index.js1-1-3 mutation.js1-2 main.js1-3 pages下的login.vue二、 总结一、 效果展示二、 代码展示1-0 router.jsimport Vue from "vue"import VueRoute.原创 2022-01-20 17:56:03 · 1136 阅读 · 0 评论 -
【Vuex 的 详细讲解 】与【count++的案例实现】
看vuex官网持续懵逼状,案例看不懂且无法实现???连个count++都不会整??? 看过来 看过来,用人话讲vuex学习资源:vuex慕课vuex入门原创 2022-01-20 17:47:14 · 1107 阅读 · 1 评论 -
安装nrm时:报错code: ‘ERR_INVALID_ARG_TYPE‘【已解决】
利用nrm测试npm和cnpm的速度时,全局安装之后,命令行进行测试,报错:code: 'ERR_INVALID_ARG_TYPE一. 报错信息二. 对报错信息进行修改报错信息行: at Object.<anonymous> (D:\Front-end\node.js\node_global\node_modules\nrm\cli.js:17:20)打开对应文件cli.js文件的第17行进行修改:// const NRMRC = path.join(process.en.原创 2021-08-30 12:28:22 · 1260 阅读 · 0 评论 -
VUE CLI的安装升级与创建
一、Vue CLI 的安装与升级二、创建一个新项目三、在现有项目中安装插件四、 配置参考原创 2021-12-04 20:46:48 · 728 阅读 · 0 评论 -
【yarn 和 npm 的区别】 以及 【yarn的安装及使用】
一、 yarn Yarn 对你的代码来说是一个包管理器。它可以让你使用并分享 全世界开发者的(例如 JavaScript)代码。 Yarn 能够快速、安全、 并可靠地完成这些工作。代码通过 包(package) (或者称为 模块(module)) 的方式来共享。 一个包里包含所有需要共享的代码,以及描述包信息的文件,称为 package.json 。二、从npm到yarn的迁移对于大多数用户来说从npm迁移到yarn是个简单的过程。yarn 可以使用和npm相同格式的 package.json,并且可原创 2021-12-04 15:42:16 · 1373 阅读 · 0 评论