![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 70
M78_国产007
前端越学越不懂 难受嗷
展开
-
Pinia相关知识点
Pinia 是 Vue 的存储库,它支持vue2和vue3。因此在写项目中,我们可以使用pinia代替vuex,就我个人而言,我觉得pinia使用起来方便的多。与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的规范,提供了 Composition-API 风格的 API,最重要的是,在与 TypeScript 一起使用时具有可靠的类型推断支持。原创 2022-09-22 17:25:21 · 1099 阅读 · 0 评论 -
Vue3.0中配置公共数据并完成axios网络请求工具的全局配置
vue2.0使用公共配置时一般绑定在原型上无论是否使用都在每一个组件的this链上,这样的设计不太友好,因此我们在vue3.0中为我们提供了专门公共数据配置的方式: globalProperties getCurrentInstance。rewrite: (path) => path.replace(/^\/api/, '/'), // 路径重写。target: 'http://127.0.0.1:7001', // 代理的目标地址。// port:"5173",//默认可以不写。原创 2022-09-21 22:59:11 · 1661 阅读 · 0 评论 -
组合式API之isRef、toRef、toRefs
前面我们学习了ref这个API,它的作用是将数据变成响应式数据。今天这学习与之相关的三个API。原创 2022-09-21 21:48:16 · 692 阅读 · 0 评论 -
Vue3.0种中新增的teleport和suspence标签
我们通过vue创建的项目,最终的html文件,只会有aap那个div标签,所有组件都是基于这个div显示。然而,有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。这个标签的用途是对异步组件加载时的一种效果优化,其实在vue2.0的时候,高级异步加载组件也可以实现这个效果,但是有点复杂就没有什么人用。可以看到在teleport中是可以获取setup中的数据的,我们想要添加的内容也到了app2这个div的内部。原创 2022-09-21 18:06:30 · 1140 阅读 · 0 评论 -
setup中使用watch
有关引用数据还有一个问题,当监听reactive处理过的引用数据内的一个引用数据时,这时它不具备默认深度监听,需要手动开启。并且如果要监听某个引用数据的属性,watch的第一个参数不再是写对象的引用,而是要写为。不过当监听的是引用数据时,有几点需要注意:1、处理函数获取不了旧值,我们打印出来的跟新值一样,这是vue3.0的一个bug;,用法也是:watch("数据名",处理函数,配置对象(可省)),用法:watch("数据名",处理函数,配置对象(可省))当点击按钮,a的value值-37,被监听到。原创 2022-09-20 18:04:27 · 4436 阅读 · 0 评论 -
在setup中使用计算属性
在学习vue3.0后,我们一般都不再单独配置data、methods、computed、filters和生命周期函数等,我们一般给script标签行内加上setup,使整个标签环境都为setup函数环境,然后在这个环境管理全部配置。data和methods内的数据和方法,我们直接在setup函数环境下声明即可。但是计算属性computed需要缓存它所监控的数据的结果,当页面第一次渲染后,只有计算属性内所使用的数据发生变化时才会再次触发计算属性的方法。原创 2022-09-16 22:53:10 · 1344 阅读 · 0 评论 -
vue3.0的setup函数以及解决其内的数据不是响应式数据的问题
1.这个函数内部的变量/函数是局部的;2.如果想要使用其的数据或函数,需要return出来,这个就好比我们学的闭包。这个函数的返回值 可以被当前组件的任意地方使用;3、但是函数内不可以使用外部的数据或函数,即setup内不能使用this。4、setup返回的对象中的数据和data中的数据同名了 setup优先级更高5.setup在组件加载期间 只会运行一次setup还有一个语法糖,直接在script标签行内写setup。原创 2022-09-16 21:25:43 · 4023 阅读 · 1 评论 -
进入vue3.0之前了解一下新的打包工具vite
在前面我们已经将vue2.0的知识差不多学习完了,今天我们来进入vue3.0的学习。vue3.0作为一个大版本的升级,使用起来也是做了很多改变,接下来我们一点一点的来学习。在学习vue3.0之前,我们学习一个新的打包工具vite.。原创 2022-09-16 19:43:41 · 1914 阅读 · 0 评论 -
Vue的仓库vuex
Vue.js是一个渐进式的框架,是一个分层的设计模式。一共分为五层,核心库为基础,在这基础上添加组件系统、客户端路由、大规模状态管理和开发环境。其中大数据状态管理对应的技术就是vuex,它是由Vue框架开发团队提供的一个插件。能够在vuex中集中管理共享的数据,易于开发和后期维护;能够高效地实现组件之间的数据共享, 提高开发效率;存储在 vuex中的数据都是响应式的,能够实时保持数据与页面的同步。原创 2022-09-14 00:27:58 · 938 阅读 · 0 评论 -
路由守卫相关知识点
所有守卫的执行顺序:beforeRouteLeave 、beforeEach 、 beforeRouteUpdate 、beforeEnter 、 beforeRouteEnter 、 beforeResolve 、 afterEach出发路由,预备从当前组件离开,判断路由变化,判断组件是否重用,判断新路由初始化,判断组件初始化,路由与组件初始化完毕,路由组件重定向完毕。原创 2022-09-13 19:43:19 · 343 阅读 · 0 评论 -
Vue框架中路由的三种模式
history 底层切换组件的方式是使用的H5的window.history的技术,其中history对象提供了两个方法pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。 当地址栏的history状态发生变化时 切换了router-view渲染的组件 来"欺骗"用户 到达切换新网页的效果,需要后端配合。原创 2022-09-11 03:23:00 · 1473 阅读 · 0 评论 -
Vue中的路由嵌套
我们还可以做一个优化,在home路由对应的组件加载到页面时,我们需要默认加载一个子路由时,我们需要做一个重定向,在home路由中redirect:"重定向的子路由网址"。路由嵌套,即在当前路由中注册子路由中,形成父子结构,显示子路由对应的组件,需要网址在父路由的pathname下才能实现,后面再具体演示。子路由内也可以注册它的子路由,一直下去就可以形成一个庞大的“家族”。这个时候子路由已经注册好了,子路由的path路径都是在父路由的基础下创建,我们再在对应引入组件的位置创建好组件。原创 2022-09-11 02:06:41 · 2599 阅读 · 0 评论 -
路由之间的转跳及传参
2、编程式转跳,通过vue对象的原型上的$router对象的push方法,$router对象是我们配置路由插件时,Vue.use(VueRouter)给vue对象的原型添加的,在任何组件中都可以直接使用。点击跳转到/xthis.$router.push({path:"/x",query:{参数1:'aa',参数2:'bbb'}})原创 2022-09-11 01:02:14 · 1353 阅读 · 0 评论 -
认识Vue中的路由
vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 vue-router就是专门做的功能,它是一个单独的技术,依赖vue。SPA(Single Page Application)单网页应用,整个网站只有一个页面。原创 2022-09-10 23:02:07 · 203 阅读 · 0 评论 -
Vue中的异步组件
一个网站的开发是由非常多的组件构成,如果当我们在打开网页的时候,突然一下子把这些所有的组件加载上来,这么多的请求全部同时开始请求,势必会造成网页打开很慢,使客户得到的是非常差劲的体验。:通过异步加载的组件会缓存起来,当你下一次再用到这个组件时,丝毫不会有任何的疑迟,组件很快会从缓存中加载出来。异步组件是对网站的一种优化,其意思就是懒加载,当我们需要用到那个组件的时候才去打包挂载到DOM树上。:用不到的组件不会加载,因此网页打开速度会很快,当你用到这个组件的时候,才会通过异步请求进行加载;原创 2022-09-09 00:49:56 · 893 阅读 · 0 评论 -
Vue中的动态组件和缓存组件
因此:我们运用了组件缓存时,如果想每次切换都发送一次请求的话,需要把请求函数写在activated中,而写在created或mounted中其只会在首次加载该组件的时候起作用。,首先我们要明白为什么要引入缓存组件,我们在通过动态组件时切换组件时,被切换掉的组件会被销毁掉,如果我们之前在这个页面还有数据也会被丢失,很明显这在实际产品中是不被允许的。实现思路:创建三个子组件对应三个页面,导入父组件注册,当我们点击对应的按钮时将对应的组件名传入component标签的is属性中,实现对应组件在页面的渲染。原创 2022-09-09 00:13:55 · 872 阅读 · 0 评论 -
组件之前的传值——中央事件总线bus
因为如果像以前那样在一个组件内定义一个事件,只能在引入该组件的组件中绑定事件,但是vm对象内所有组件都可以访问。我们一般给这个vm对象命名为$bus,即我们称为中央事件总线,我们可以把中央事件总线看做是一个桥梁,也可以把它看作是一个运输工具,它可以将两个组件的信息相互传输,传输完毕以后自己是不产生任何信息数值的。如果不再使用可以将事件解绑,绑定的事件不再会触发:this.$bus.$off("事件名",callback解绑时触发)。1.触发x组件的a事件: x.$emit("a事件",参数...)原创 2022-09-08 22:12:47 · 362 阅读 · 0 评论 -
组件之间的传值——provide和inject
在需要获取数据的组件内直接用inject注入到当前组件中,不管你处于那一层都能够获取到,inject属性的值为一个字符串数组,或一个对象,对象的情况可具体查看官方API。组件之间的多层传值我们前面学习过了通过$attrs和$listeners,今天我们来学习一个更为简单的方法利用组件对象的属性provide和inject,它们与data、methods这些属于同级。但是它有一个缺点就是数据不是响应式的,如我在爷爷组件方法内修改提供的值,但是子组件中获取的值不会改变。父亲组件:可以被注入提供的数据。原创 2022-09-08 20:00:31 · 1195 阅读 · 0 评论 -
多层组件传值$listeners/$attrs和获取组件$ parent/$root/$children/$refs
在组件中传值,在父子级组件很好就实现了,但是如果第一层的组件向第六层或者更高的层次传值时,我们就非常难办了,在我们以前学习的知识来实现。可以在组件或者原生元素绑定ref属性(类似于id),在通过$refs来获取对应的组件或元素节点,只会在组件渲染完成之后生效,并且它们不是响应式的。尽管框架为我们提供了多层组件传值的方法,但是我们还是要一层一层的去配置v-bind="$attrs"和v-on="$listeners"。我们来三个组件来演示父组件向孙组件传数据,孙数据向父组件传数据。原创 2022-09-07 23:44:28 · 475 阅读 · 0 评论 -
难点组件之间的传值——反向传值
在这之前我们已经学习过了组件的属性,它可以用于组件的传值,将父组件的数据传给子组件。但是它只能实现单向的组件传值,还不能实现子传父。在此基础上,我们今天来研究组件之间的反向传值。原创 2022-09-07 22:22:55 · 451 阅读 · 0 评论 -
Vue框架中的面试相关问题
当数据发生变化以后: 当状态(数据)变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff),记录两棵树差异,把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch),视图就更了。1、组件中的data是函数的设计是因为组件被复用时,data数据源才不会共用,每次复用该组件生成的data数据源都是相互独立的,不会受到相互之间的影响;拿属性传值为例,父组件能够向子组件传值,父组件传的值改变子组件接收的值对应改变,但是子组件中修改传来的这个值,并不能够修改父组件的这个值。原创 2022-09-07 20:20:02 · 171 阅读 · 0 评论 -
在Vue官方提供的脚手架中做网络请求
首先我们需要在脚手架中下载axios包用于我们做网络请求:npm i axios然后我们可以在两个地方做网络请求,一个是在我们的组件中,另外一个是在main.js入口文件做网络请求。在做网络请求前,我们先在egg框架中写一个数据接口并启动服务器,我们在vue脚手架中去请求数据。原创 2022-09-07 00:54:55 · 492 阅读 · 0 评论 -
Vue中自定义事件
事件我们并不陌生,以前我们都是用的框架帮我们配置好的事件,我们称为原生事件。通过v-on:或者@绑定事件,事件触发时执行对应的程序。今天我们自己来创建一个事件,我们要先知道事件的三要素:事件源 target 、事件类型type 、监听器handler在自定义事件中,事件源就是我们设置的组件,事件类型我们自己命名,监听器就是事件绑定的那个函数,我们想要完成一个组件的完成,我们需要在组件中用到vm对象原型上的一个方法:this.$emit("事件类型名","要给触发的事件的函数handler传入值(可省)")我原创 2022-09-06 21:00:28 · 891 阅读 · 0 评论 -
Vue中的插槽v-slot
插槽是在创建组件时设定的一块位置,在后面组件导入注册使用时,在组件标签中写传入设定的那块位置的信息。所以使用插槽,组件必须使用双标签。插槽可以分为默认插槽(没有设置插槽名)和具名插槽(设置了插槽名),使用具体使用那种插槽呢?当组件中只有一个插槽时,就可以用默认插槽,因为传入的数据都在其中;但是如果设置了多个插槽就需要使用具名插槽,插入数据时通过插槽名选择插入那个位置。原创 2022-09-06 17:51:23 · 389 阅读 · 0 评论 -
Vue文件中css相关知识
原理就是vue的插件webpack打包时会把当前组件模板中的每一个元素添加一个相同的哈希值命名的属性名,并且为添加了scoped的style中的样式选择器上添加一个属性选择器。vue文件中可以出现多个style标签 凡是添加了scoped属性的,里面的选择器就会被修改 没添加scoped属性的就不会被修改。如果全局样式出现了相同的选择器. 就看是哪个最后打包引入项目,哪个的优先级就最高。1、在.vue文件中的style中写的样式 打包后就是全局样式;tcss.vue文件:设置颜色为红色。原创 2022-09-05 23:30:34 · 1234 阅读 · 0 评论 -
组件的属性
组件的属性有两种写法:1、简单声明 2、详细叙述。原创 2022-09-05 22:53:13 · 242 阅读 · 0 评论 -
单文件组件
如果.vue的script注释了 在打包的时候 vue的打包环境 会帮我们把这个文件解析为一个对象 然后给这个对象添加一个template属性 值为解析的template页面模板字符串。前面我们在html文件中通过src外部导入Vue.js框架,今天我们不再这样,我们直接下载Vue的包导入到项目中,直接在vue的代码环境中写项目。这样做的好处:业务区分更加明显,能够更好的维护,不用在一个文件中写所有代码,在团队开发时可以很好的分工完成。单文件组件,即每个组件单独一个文件(后缀.vue),按需导入。原创 2022-09-05 21:15:36 · 841 阅读 · 0 评论 -
初识Vue的组件
其中Box为组件名, 组件名可以用驼峰命名 使用时可以用连字符,如注册时为SmallBox,使用的时候就要变成,当然你仍然使用也可以,但是官方不建议这样,因为组件不区分大小写,当存在smallbox组件时可能会造成出错。,只能在它所注册的那个vm对象所关联的节点元素内使用,一个vm实例可以有多个局部组件,但是都只能供当前vm实例所关联的节点元素内使用。可见将内容写在组件中,然后放在html标签实现的效果与直接写在html中是一样的。原创 2022-09-05 01:03:23 · 192 阅读 · 0 评论 -
生命周期函数
destoryed这些钩子都只执行一次;beforeUpdate updated第一次构建不会调用,以后每次data被更新了就会调用;beforeDestroy destroyed 销毁的方式有两种:用户关闭和代码this.$destroy()//销毁vm实例。只有beforeUpdate updated运行时不能做网络请求;我们一般把网络请求放在created或者mounted中,具体的根具业务需求来;原创 2022-09-05 00:22:45 · 2068 阅读 · 0 评论 -
计算属性,属性侦听器,方法,过滤器有什么区别?
方法一般是提供给模板事件和其他方法(比如钩子函数)使用,如果在模板中使用了方法,而且不是事件,如果模板中的渲染的任意数据源改变了 它都会重新调用;计算属性(computed)会把计算的结果缓存起来,并监听计算过的数据源 如果监听的数据源发生变化才会重新计算;属性侦听器(watch):只有侦听的属性发生变化才会触发(可以深度侦听,但是更消耗内存);过滤器往往用于数据渲染前的数据处理 除了用法跟方法不一样其他都一样,只有它没有被劫持。为了业务更明显 功能更好调试。为什么要把这些函数分开设计?原创 2022-09-04 22:23:12 · 204 阅读 · 0 评论 -
Vue的自定义指令、nextTick函数
这里的inserted是钩子函数,其第一个参数el为指令所在的那个元素节点,第二个option是传入的实参对象,就是v-指令名="",引号中的变量的值。框架中为我们提供了很多基础指令,但是有些需求官方提供的指令无法办到,即官方允许我们自己定义指令。只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。规定:指令都以v-开头,后跟我们自己取的指令名,注意我们取得指令名不能是官方已经声明过的。第二个参数(可选):一个对象,包含指令名称及该指令所绑定的表达式信息。原创 2022-09-04 21:16:12 · 528 阅读 · 0 评论 -
Vue中的侦听属性watch
要侦听那个数据,就在watch内写方法,方法名必须与数据名相同,在方法内就写对应的处理程序;当数据发生变化时就触发;这一点与计算属性(computed)相似,只有数据发生变化时才触发,但是侦听器属性,比计算属性计算效率消耗大。方法名msg就是监听的data内的msg属性,a1接收每次msg改变时的那个值,a2为未改变时msg的值。特殊:当data内的数据是个对象时,侦听这个对象但是修改的是对象内的值是否会触发侦听呢?需求:当我们在一个框内输入金额时,另一个框内对应的显示对应货币的转换的金额。原创 2022-09-04 19:56:05 · 400 阅读 · 0 评论 -
Vue中的计算属性computed
这也是computed与methods、filters的区别,当数据源中的数据发生改变时会重新渲染页面并且会再次调用在methods和filters中用到的方法,但是修改的数据源的数据如果computed中的方法没有用到,则不会调用computed的方法,computed内的方法只有当监听的数据源发生变化时才会从新调用。,计算属性会把使用到的data中的属性缓存起来,防止页面发生大量重复计算, 提升js 运行效率,但是这也是其的缺点,为什么这么说呢?而且会监听计算属性中使用到的数据源,然后把计算的结果。原创 2022-09-01 23:12:50 · 1204 阅读 · 0 评论 -
Vue中的过滤器filter
1、在开发项目时,我们一般将methods里的方法用于处理业务,filters里的方法用于处理数据,这样层次会更鲜明,但是如果你非要将处理数据的方法放在methods里面也不会出错。3、调用传参的写法上,methods的方法在调用时通过()传参,如{{ fn(str) }};这里我们学习一个新的属性filters,在里面也是书写方法。注意:{{str|fn}}调用filters里的方法可以连调,上一次调用的返回值会当作参数传入下一次参数传入下一个参数,如{{str|fn|fn1|fn2}}...原创 2022-08-31 23:56:37 · 157 阅读 · 0 评论 -
Vue中的循环渲染v-for
解决方案:采用嵌套写法,将v-for放在外层,v-if放在里层,用vue推出的template标签装v-if,为什么要用template标签呢,因为如果用其它标签渲染完成以后,v-if在那个标签也会被生成,但是它没有用,还浪费资源,所以我们用template标签,可以理解为dom操作中的fragment,完成任务过后他就会自动消失。v-for指令非常重要,它可以遍历数据容器,可以理解成我们以前使用的for in 循环,在很多地方都需要使用它,例如我们网络请求到数据一般都是采用v-for遍历渲染到页面上。..原创 2022-08-31 23:18:15 · 3136 阅读 · 0 评论 -
响应式数据
1基础上 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;Vue框架劫持对象的属性的值是数组时,数组的下标时不能被劫持的,但是可以劫持数组的方法。也可以通过原型上的方法:this.$set(this.arr对象,下标,修改的值)...原创 2022-08-31 22:50:34 · 316 阅读 · 0 评论 -
Vue中的条件渲染v-if、v-show
拿v-if=""来说,其底层就是if(){}语句,""中传入的表达式就会放在()小括号内判断,最终得出true或false,这个就是JS的语法了。最开始flag为true,box11显示,box12移除,点击按钮触发事件后flag取反,box11移除,box12显示,再点再取反,就达到切换效果。可以看到只有3和7没有显示在,其余的都显示了,就应证了我们前面所说的JS环境下解析表达式为true显示,false不显示。反之为false时,v-if或v-show所在的标签显示。那这两个指令到底谁好呢?...原创 2022-08-30 23:09:39 · 326 阅读 · 0 评论 -
Vue是什么?
而在框架的开发模式下,开发者应该按照框架提供的规范来进行后续的开发,因此框架模式下,控制权由框架把控;5. 同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。(3)框架与库的使用场合。4. ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。2. 是一个比较完善的前端框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能;..原创 2022-08-30 21:28:32 · 4184 阅读 · 0 评论 -
Vue中的样式绑定
如果我们将style中第二个参数加上引号那么就会变成字符串,直接就把作为属性值,就如我们直接改为"blue",标签能得内容就变为蓝色。这种方式对象的属性值会在data数据中去匹配,如果我们不需要改变当前类名时我们可以在行内直接将其写成true或者false,也是同样成立的。在这种class属性绑定中对象的属性值为布尔值,当为true时,该属性值的属性为类名成立,反之不成立。class=""中写数组,数组内每一项可以写不同的形式,是前面的综合,这种形式我们平时都不会用,用的最多的就是写表达式。...原创 2022-08-30 19:47:27 · 1118 阅读 · 2 评论 -
Vue中的方法和事件绑定
self 其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素。3、ES6的箭头函数中的this就不是vm,因为箭头函数中的this跟谁调用无关,指向上一个不是箭头函数的函数的this==>因此推荐事件的函数采用ES6的对象的方法写方法 这种写法不推荐。我们也可以打印一下事件对象,看一下它的事件链,在绑定事件的方法传入$event,...原创 2022-08-30 16:38:01 · 1202 阅读 · 0 评论