随笔分类 -  Vue

Vue v-html换行处理
摘要：v-html输出一段 html代码，可能 ‘\n’ 等换行字符失效此时要加个css white-space: pre-wrap; 就能成功换行 normal连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。nowrap和 normal 一样，连 阅读全文
posted @ 2021-08-05 11:08 BenBonBen 阅读(2697) 评论(0) 推荐(0)
Vue 路由3种模式
摘要：Hash: 使用URL的hash值来作为路由。支持所有浏览器。 History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式 Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。 has 阅读全文
posted @ 2021-07-12 17:32 BenBonBen 阅读(1324) 评论(0) 推荐(0)
自写一个vue 描点定位 ，鼠标滚动控制描点切换
摘要：效果：https://xmtc88.com/index开发一个官网的时候，遇到这种整屏切换需求，并且滚轮控制切换。swiper有类似效果，但是感觉不符合我的理想效果话不多说 上代码。 滚动监控主要用到 addEventListener('mousewheel', this.handleScroll, 阅读全文
posted @ 2021-07-09 15:06 BenBonBen 阅读(531) 评论(3) 推荐(0)
vue 组件间 8 大通讯方式 之三 eventBus
摘要：五、eventBus eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。 缺点：eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难 在Vue的项目中怎么 阅读全文
posted @ 2021-07-01 13:51 BenBonBen 阅读(249) 评论(0) 推荐(0)
vue 组件间 8 大通讯方式 之二 provide/ inject ref / refs
摘要：三、provide/ inject （使用于多层渗透父子组件） provide/ inject 是vue2.2.0新增的api, 简单来说就是父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量。 注意: 这里不论子组件嵌套有多深, 只要调用了inject 那么就可以注入 阅读全文
posted @ 2021-07-01 11:25 BenBonBen 阅读(316) 评论(0) 推荐(0)
vue 组件间 8 大通讯方式 之一 props / $emit $children / $parent
摘要：一、props / $emit （最常用） 1.父传子 props // section父组件 <template> <div class="section"> <com-article :articles="articleList"></com-article> </div> </template 阅读全文
posted @ 2021-07-01 11:04 BenBonBen 阅读(192) 评论(0) 推荐(0)
keep-alive 的作用及使用场景
摘要：keep-alive：主要用于保留组件状态或避免重新渲染。 比如： 有一个列表页面和一个 详情页面，那么用户就会经常执行打开详情=>返回列表=>打开详情这样的话 列表 和 详情 都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返 阅读全文
posted @ 2021-06-30 10:13 BenBonBen 阅读(1799) 评论(0) 推荐(0)
Vue 全家桶 之 Vuex
摘要：Vue有五个核心概念，state, getters, mutations, actions, modules。本文将对这个五个核心概念进行梳理。 1. state：vuex的基本数据，用来存储变量 2. geeter：从基本数据(state)派生的数据，相当于state的计算属性 3. mutati 阅读全文
posted @ 2021-06-08 09:58 BenBonBen 阅读(71) 评论(0) 推荐(0)