VUE
VUE相关知识
啦啦啦鱼儿
这个作者很懒,什么都没留下…
展开
-
Vue.nextTick 的原理和用途
文章链接 https://segmentfault.com/a/1190000012861862原创 2021-05-04 22:01:23 · 126 阅读 · 0 评论 -
Vue-router 中hash模式和history模式的区别
最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描原创 2020-10-04 10:57:57 · 363 阅读 · 0 评论 -
Vue组件样式穿刺
为什么需要穿透scoped?引用了第三方插件或库,需要在组件中修改该插件或库的的样式,而一半情况下组件内的样式会使用scoped防止组件间样式污染。此时只能样式穿透scoped来修改第三方插件或库的样式。穿刺方法sass和less穿透使用:(/deep/)外层类 /deep/ 想要修改的类名 { 要修改的样式}例:.wrapper /deep/ .el-card__header {border-bottom: none}通用样式穿透使用:(::v-deep)::v-deep原创 2020-10-03 09:15:17 · 1091 阅读 · 0 评论 -
计时器和计算属性computed
setTimeout()是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式。语法格式可以是以下两种:setTimeout(要执行的代码, 等待的毫秒数)setTimeout(JavaScript 函数, 等待的毫秒数) setTimeout(functiom(){ },xx-ms)...原创 2020-04-16 23:17:28 · 1723 阅读 · 0 评论 -
为何在大型项目中data需要使用return返回数据呢?
为何在大型项目中data需要使用return返回数据呢?原因:不使用return包裹的数据会在项目的全局可见,会造成变量污染 使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。...原创 2020-04-16 23:16:04 · 283 阅读 · 0 评论 -
组件化中特定标签嵌套
todolist 待办事项 <input type=“text” v-model=“content” @keyup.enter=“addTask”/><button @click=“ad...原创 2020-04-16 23:15:43 · 133 阅读 · 0 评论 -
Vue中的scoped及样式穿透
何为scoped?在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。scoped的实现原理vue中的scoped属性的效果主要...原创 2020-04-11 22:46:40 · 987 阅读 · 0 评论 -
VUE项目轮播插件的使用-vue-Awesome-swiper
安装npm install swiper vue-awesome-swiper --save全局注册import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/css/swiper.css' Vue.use(VueAwesomeSwiper)使用<template> <swiper re...原创 2020-04-11 21:15:33 · 211 阅读 · 0 评论 -
VUE项目——使用全局变量
优点: 提高代码可维护性,比如改变整个页面的主题颜色。使用方法: 在styls文件夹下创建 varibles.styl文件$bgColor = #00bcd4$headerHeight = .5rem在组件中引入,然后直接使用变量名即可@import '~@/assets/styles/varibles.styl'.header height $headerHeight ...原创 2020-04-11 18:21:36 · 125 阅读 · 0 评论 -
vue组件名name的作用
keep-alive 在判断组件是否需要缓存的时候,进行正则匹配/名称匹配的时候,就是根据组件的名称来进行判断的便于调试,有名字的组件可以有更清晰的警告信息,在vue-devtools中也会显示组件名,可以观察到更有语义化的组件树组件调用自己,完成递归组件的实现...原创 2020-04-07 17:10:28 · 318 阅读 · 0 评论 -
插槽—v-slot
具名插槽v-slot的缩写: slot="header" = v-slot:header = #header -----都是具名插槽的语法**父组件**<child-component> <template #header> //它们三个并没有任何不同,都是具名插槽<!-- <template v-slot:h...原创 2020-04-07 01:18:20 · 570 阅读 · 0 评论 -
父子组件间的传值
VUE单向流数据即在父子组件的传值中 子组件只可以接收父组件的数据而不能修改父组件的数据,不然会造成其他子组件引用相同父组件数据时产生错误。 如果子组件接收父组件的数据需要修改,则需在子组件内拷贝一份接收的数据data:function(){return {拷贝属性名: this.父组件传递的数据属性名}然后在组件内进行修改即可。!注意:不可以直接用父组件数据属性名进行赋值。因为...原创 2020-04-04 15:31:58 · 278 阅读 · 0 评论