Vue.js
文章平均质量分 84
椰果uu
严于律己 软件工程普本大三 记录自己前端学习路程,后续也会分享自己的求职历程,分享自己的经验和心得
展开
-
Vue3(六):Vue3其他API、Vue3新组件Teleport、Vue2和3区别
通过使用 [shallowRef()]和[shallowReactive()来绕开深度响应。浅层式 `API` 创建的状态只在其顶层是响应式的,对所有深层的对象不会做任何处理,避免了对每一个内部属性做响应式所带来的性能成本,这使得属性的访问变得更快,可提升性能。就是当你只关心修改整体的时候就可以用这两个属性。原创 2024-04-17 15:56:51 · 747 阅读 · 0 评论 -
Vue3(五):组件通信详解(九种方法)
自定义事件常用于:子 => 父- 事件名是特定的(click、dbdlick、change等等)- 事件对象`$event`: 是包含事件相关信息的对象(`pageX`、`pageY`、`target`、`keyCode`)- 事件名是任意名称- 事件对象`$event`: 是调用`emit`时所提供的数据,可以是任意类型!!!vue2中 @click是自定义事件,可以通过.native修饰符变为原生DOM事件。原创 2024-04-16 20:41:46 · 687 阅读 · 0 评论 -
Vue3(四):Pinia
Pinia是一个专门为Vue.js设计的状态管理库,它提供了一种简单和直观的方式来管理应用程序的状态。在使用Pinia时,可以轻松地创建定义状态的存储,然后将其与Vue组件绑定,使它们能够使用该状态。和上一个博客提到的Vuex相比,Pinia 更加简单易用,体积更小,同时具有更好的 TypeScript 支持和插件系统。在Vue.js的官网中,我们可以看到Pinia目前已经取代Vuex,成为Vue生态系统的一部分。原创 2024-04-15 22:11:12 · 637 阅读 · 0 评论 -
Vue3(三):生命周期、路由、自定义hooks
hook本质是一个函数,用use开头,把setup函数中使用的Composition API进行了封装。可以更方便我们去复用处理数据的逻辑.有时候我们会写很多数据和方法,如果都写在Person.vue会很大很复杂也不好修改,所以我们可以在src下新建hooks文件夹 ,建立useDog.ts和useSum.ts,拆分Person.vue中的东西。原创 2024-04-14 14:31:17 · 1353 阅读 · 0 评论 -
Vue3(二):报错调试,vue3响应式原理、computed和watch,ref,props,接口
setup`是`Vue3`中一个新的配置项,值是一个函数,它是 `Composition API`表演的舞台,组件中所用到的:数据、方法、计算属性、监视......等等,均配置在`setup`中。- `setup`函数返回的对象中的内容,可直接在模板中使用。- `setup`中访问`this`是`undefined`。- `setup`函数会在`beforeCreate`之前调用,它是“领先”所有钩子执行的。直接写数据名即可,监视的是其`value`值的改变原创 2024-04-13 16:23:56 · 1003 阅读 · 0 评论 -
Vue3(一):win7使用vue-cli创建vue3工程
因为我的是 win7系统,之前在学习vue2的时候,一直用的是vue-cli 2.9.6版本。Check the features needed for your project - 多选择上 TypeScript,特别注意点空格是选择,点回车是下一步。安装完成后再次查看自己的vue-cli版本(vue -V)我的升级之后是@vue/cli 5.0.8。npm install -g @vue/cli(重新安装最新版本的vue-cli)npm install -g vue-cli(卸载之前的vue-cli)原创 2024-04-11 15:55:52 · 1140 阅读 · 0 评论 -
element-ui的按需引入报错解决:MoudleBuildFailed,完整引入和按需引入
官网: Element - The world's most popular Vue UI frameworknpm i element-ui -S在 main.js 中写入以下内容:App.vue(3)效果:2.按需引入(1)下载;然后,将 .babelrc 修改为:此处疑问?????出现MoudleBuildError报错,按照老师的修改es2015依然报错。 (我与张天宇老师的脚手架版本不一样,我的是较低版本的vue-cli,所以有.babelrc这个文件)接下原创 2024-04-10 19:44:18 · 511 阅读 · 0 评论 -
Vue2(十五):replace属性、编程式路由导航、缓存路由组件、路由组件独有钩子、路由守卫、history与hash
1、作用:控制路由跳转时操作浏览器历史记录的模式2、浏览器的历史记录有两种写入方式:分别为push和replace,push是追加历史记录,replace是替换当前记录。路由跳转时候默认为push3、如何开启replace模式:News, 加一个replace即可理解:如果你用的是默认的push,你点击进入到下一个路由的时候可以返回到上一个路由。原创 2024-04-10 15:12:37 · 1379 阅读 · 1 评论 -
Vue2(十四):路由的使用及注意点、嵌套路由、路由的query和params参数、props配置
1、路由就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。2、key 为路径, value 可能是 function 或 component组件3、vue 的一个插件库(vue-router),专门用来实现 SPA 应用。原创 2024-04-08 14:27:43 · 943 阅读 · 0 评论 -
(已解决)引入本地bootstrap无效,bootstrap和jquery的引入
首先我是跟着张天宇老师下载的bootstrap文件,新建了一个css文件夹,但是这样子<link rel="stylesheet" type="text/css" src="./css/bootstrap.css">在index.html引入没有用。(老师是在index.html引入<link rel="stylesheet" type="text/css" src="./css/bootstrap.css">,把这个删了不用在这里引入)原创 2024-04-07 20:43:02 · 452 阅读 · 0 评论 -
Vue2(十三):Vuex环境搭建、Vuex工作原理、几个配置项、多组件共享数据、Vuex模块化
JS执行的时候会把import提升到顶部,与摆放顺序无关,如果放在main.js里 import store from './store' 无论放到哪里都会比Vue.use(Vuex)先执行,要想把 Vue.use(Vuex) 要放到实例化之前只有放进index.js。在此文件中引入插件并使用vuex插件,使用vuex插件必须在引入store之前,如果在main.js中引入和使用vuex的话,由于js文件里所有的import语句都会提升到最开始执行,所以会报错滴。注意Vue2一定要安装vuex3,如果是。原创 2024-04-06 15:45:50 · 618 阅读 · 0 评论 -
报错(已解决)uncaught referenceerror:vuex/store is not defined
我把关于创建和暴露store的又。原创 2024-04-05 22:39:45 · 328 阅读 · 0 评论 -
Vue(十二):脚手架配置代理,github案例,插槽
如果数据不在App中了,而在Category.vue中,然后App.vue要用到数据,这时我们就可以在Category.vue中使用slot标签给父组件App传值,写法很像当时父给子传值的props写法,在标签里搞个:games="games",然后用到插槽的地方必须使用template标签包裹,并且配置scope属性来接收数据,接过来的是一个对象。这样的话在传数据时就要在不同的事件节点去触发全局事件并且传不同的值,比较好的做法是数据配置到对象里,传值也传一个对象,这样写起来比较方便。原创 2024-04-01 11:41:18 · 695 阅读 · 0 评论 -
求助(已解决):配置脚手架代理,跨域问题proxyTable配置无效,访问后显示404?
已经在这里卡了一天了。找了很多解决办法,比如重启,修改proxytable等等,但是每次但是404,求助各位大佬,怎么解决?原创 2024-03-27 10:54:45 · 134 阅读 · 0 评论 -
Vue2(十一):全局事件总线、消息订阅与发布pubsub、TodoList的编辑功能、$nextTick、过渡与动画
/挂载完成后给全局事件总线添加事件},//最好在销毁前解绑},原创 2024-03-25 21:32:43 · 1461 阅读 · 0 评论 -
(已解决)vue运行时出现Moudle Bulid error: this.getoptios is not a function at........
点击package.json 即可查看less-loader版本,我之前的版本是12.0,太高了,出现了不兼容的问题。我安装的是4.1.0版本。原创 2024-03-25 10:38:25 · 155 阅读 · 0 评论 -
Vue2(九):浏览器本地存储、组件自定义事件、TodoList自定义事件
1、一种组件间通信的方式,适用于:子组件 ===> 父组件2、使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B的标签绑定自定义事件(事件的回调在A中,用来接收数据)。3、绑定自定义事件:<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>......(3)若想让自定义事件只能触发一次,可以使用.once修饰符,或$once方法。4、触发自定义事件:this.$emit('atguigu',数据)给谁绑的就找谁触发。原创 2024-03-24 17:15:42 · 1227 阅读 · 0 评论 -
Vue2(九):尚硅谷TodoList案例(初级版):组件化编码流程的使用
(1)拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。(2)实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:一个组件在用:放在组件自身即可。一些组件在用:放在他们共同的父组件上(状态提升)。(3)实现交互:从绑定事件开始。原创 2024-03-22 21:08:57 · 762 阅读 · 0 评论 -
Vue2(八):脚手架结构、render函数、ref属性、props配置项、mixin(混入)、插件、scoped样式
定义在另一个js文件中,这里定义在mixin.js中methods: {},console.log('混合里的mounted优先调用');可以在另一个js中配置插件,然后通过import引入到main.js中看看下面的代码,复习复习之前的知识//第一个参数是Vue构造函数//后面的参数是使用者传进来的东西123//1.定义一个全局过滤器//返回值别忘了});//2.定义一个全局自定义指令,元素默认获取焦点},el.focus();},})原创 2024-03-19 20:54:54 · 1109 阅读 · 0 评论 -
Vue2(七):超详细vue开发环境搭建(win7),nodejs下载与安装,安装淘宝镜像(报错已解决),配置脚手架
本来想粗略写一下的,但是搭建脚手架的时候,遇到了很多问题,浪费快两天时间,记录一下自己的解决办法希望对你们有帮助!原创 2024-03-19 16:26:33 · 1501 阅读 · 2 评论 -
Vue2(六):生命周期、组件、组件的嵌套、VueComponent构造函数、单文件组件
使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别;(1)el不要写,为什么?最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。备注:使用template可以配置组件结构。(2)data必须写成函数,为什么?避免组件被复用时,数据存在引用关系,比如我父组件要多次复用一个子组件,那如果其中一个子组件做了修改数据操作,其他复用的地方数据也会被修改。看看下面的代码,就明白了。原创 2024-03-16 11:56:24 · 867 阅读 · 0 评论 -
Vue2(五):收集表单数据、过滤器、内置指令和自定义指令
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理比如价格1999改成1,999等需求,复杂的用计算属性或方法)。语法:1、注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}2、使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"(第二种几乎不用)备注:1、过滤器也可以接收额外参数、多个过滤器也可以串联2、并没有改变原本的数据, 是产生新的对应的数据。原创 2024-03-13 18:08:08 · 976 阅读 · 0 评论 -
Vue2(四):Vue监测数据的原理(对象,数组),Vue.set的使用方法
如果我要点击按钮实现更新冯万宁儿的信息,那么如果一个属性一个属性地改,可以修改成功,并且Vue也会检测到并更新到页面。但是我如果直接把要修改的信息写在this.persons[0] = { id: 001, name: '冯千宁儿', age: 66, sex: '女' };这里,就不行,Vue监测不到并且不更新到页面,这是为什么?原创 2024-03-12 17:49:18 · 1010 阅读 · 0 评论 -
Vue(三):样式绑定、条件渲染、列表渲染、列表过滤与列表排序
绑定样式:1.class样式写法:class="xxx”xxx可以是字符串、对象、数组。字符串写法适用于:类名不确定,要动态获取。对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。2.style样式:style="{fontSize:xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。1、用于展示列表数据。原创 2024-03-11 18:22:52 · 860 阅读 · 0 评论 -
Vue(二):事件处理,计算属性、监视属性及二者的区别
3. 计算属性总结定义:要用的属性不存在,要通过Vue中已有属性计算得来。原理:底层借助了Objcet.defineproperty方法提供的getter和setter。get函数什么时候执行?(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。备注:1.计算属性最终会出现在vm上,直接读取使用即可,不用加括号,和methods区别一下子。原创 2024-03-09 15:32:44 · 904 阅读 · 0 评论 -
Vue2(一):初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件
Vue是一套用于构建用户界面的渐进式JavaScript框架。Vue可以自底向上逐层的应用,简单应用:只需要一个轻量小巧的核心库。复杂应用:可以引入各式各样的Vue插件。4.Vue实例和容器是一一对应的;5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;7.一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新;Vue模板语法有2大类:1.插值语法:功能:用于解析标签体内容。原创 2024-02-17 22:13:22 · 838 阅读 · 0 评论 -
Vue2:Vue的开发者调试工具下载与安装
工欲善其事,必先利其器。提取码: zlss。原创 2024-02-02 15:00:31 · 565 阅读 · 0 评论