VUE
放羊的阿三
进阶
展开
-
Vue组件传值EventBus
vue组件传值原创 2022-01-07 16:23:48 · 1753 阅读 · 3 评论 -
Vue组件传值.sync
传统的父子组件之间传值,父组件-->子组件----父组件(父组件会接收到子组件传回来的方法,并且对数据进行更改)<template> <div class="content"> <btn :btnName='num' @changeFn= changeFn></btn> </div></template>----子组件(用props接,但是子组件只有读的属性,不可以对数据进行更改,所以$emit.原创 2021-12-15 10:29:23 · 4698 阅读 · 0 评论 -
扁平数据转树形数据结构
扁平数据转树形数据结构需要数据里每一项拥有id和pid,用于确定父子关系,如下const data = [ {id:"01", name: "张大大", pid:"", job: "项目经理"}, {id:"02", name: "小亮", pid:"01", job: "产品leader"}, {id:"07", name: "小丽", pid:"02", job: "产品经理"}, {id:"08", name: "大光", pid:"02", job: "产品经理"}.原创 2021-11-01 18:01:44 · 1426 阅读 · 0 评论 -
搜素联想列表关键文字高亮
主要原理: <span style="color:red;">关键字</span> ,找到关键字加样式<!-- 搜索联想建议列表 --> <div class="sugg-list" v-if="kw.length > 0"> <div class="sugg-item" v-for="(Str, index) in sugList" :key="index" ..原创 2021-10-22 19:53:50 · 187 阅读 · 0 评论 -
tabbar购物车案例
基本结构大致如下 组件拆分: MyHeader.vue – ==复用之前的== MyTabBar.vue – 底部导航 MyTable.vue – 封装表格 三个页面 -MyGoodsList.vue – 商品页 MyGoodsSearch.vue – 搜索页 -MyUserInfo.vue – 用户信息页 需要安装插件 less less-loader@5.0.0 -Dboots..原创 2021-09-29 21:06:39 · 178 阅读 · 0 评论 -
vue入门案例(高亮显示思路)
导航栏高亮(主要写功能,css,数据及html复制的,代码在下面,)<template> <div class="wrap"> <div class="nav_left" id="navLeft"> <div class="nav_content"> <span></span> </div> </div> <div clas.原创 2021-09-27 23:49:33 · 437 阅读 · 0 评论 -
VUE学习第一天
第一天主要讲了webpack使用一.基本概念什么是webpack? 答:静态模块打包工具, 分析翻译, 压缩, 打包代码.我们为什么学习webpack? 答:①减少文件数量, 缩减代码体积 .②提高网页打开速度.二.webpack使用步骤webpack如何使用? 答:①src/index.js是入口文件 .②所有代码都引入到入口文件内 ③执行build打 包命令 ④打包整合到dist/main.js出口文...原创 2021-09-22 18:06:35 · 77 阅读 · 0 评论