Vue
大雄Obear
越努力,越幸运。你要努力,你会越来越好得!
展开
-
教你轻松搞定Vue事件总线(EventBus)
前言vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过 props向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系,该如何通信了?如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信,就可以考虑Vue中的 事件总线 ,即 EventBus来通信。Event...转载 2020-03-08 20:51:55 · 453 阅读 · 0 评论 -
教你如何理解Vue中的nextTick
示例先来一个示例了解下关于VueDOM更新以及nextTick的作用。<div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div> <div v-if="...转载 2020-03-05 21:34:55 · 253 阅读 · 0 评论 -
Vue数据更新视图不更新的几种解决方案
在一个组件实例中,只有在data里初始化的数据才是响应的,Vue不能检测到对象属性的添加或删除,没有在data里声明的属性不是响应的。Vue不允许在已经创建的实例上动态添加根级响应式属性,但是可以使用$set方法将相应属性添加到嵌套的对象上。数组数据变动,使用某些方法操作数组,变动数据时,有些方法无法被vue监测push(),pop(),shift(),unshift(),...原创 2019-10-16 21:03:56 · 60044 阅读 · 18 评论 -
Vue路由如何设置导航选中(高亮)
本文内容知识点比较简单,主要面向vue新手朋友们解答疑惑。vue前辈请忽略。我自己学习vue的时候也有遇到过这个情况,看到一些新人朋友们在问,vue的路由怎么设置选中(高亮)呀? 默认class是否可以不显示呀? 请看下文原创 2019-05-26 22:45:57 · 4155 阅读 · 1 评论 -
vue路由(router)设置:父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失
本文知识点比较简单,主要面向新人解惑,vue前辈请忽略。我们需要实现的效果,父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失,见下图:在实际开发中,可能遇到了当前路由下(父路由)在点击它的子路由时,他的(父路由)选中状态消失了原因:1、子路由router-link加了exac精确匹配路由2、在写路由的时候,父子路由没有严格按照一级/二级来写...原创 2019-05-26 23:03:02 · 17272 阅读 · 4 评论 -
vue router-link添加点击事件无效
本文知识点比较简单,只要面向新人解惑,vue高手请忽略。在vue实际开发中可能会遇到比较常见的问题之一:router-link添加点击事件无效。 这是为什么呢? 请看下文原创 2019-05-27 12:34:18 · 3106 阅读 · 2 评论 -
全网最全教你轻松把vue项目部署到IIS服务器
需求:1、项目完成了,但是还没有与正式后台连接(数据是本地json)2、现有代码上线IIS准备工作1、部署IIS服务器2、项目执行build生成需要部署的文件步骤一:复制文件把build之后的文件(dist文件夹)拷贝到IIS存放网站文件的目录注意:拷贝的时候不一定是要把dist整个文件夹拷贝,也可以拷贝里面的内容,这个需要看自己的需求。如果不...原创 2019-05-31 22:24:00 · 63560 阅读 · 17 评论 -
vue更新路由router-view复用组件内容不刷新
本文知识点比较简单,主要面向vue新人解惑,vue前辈请忽略。实现功能:见上图,这是一个产品列表,当进入不同列表时应该更新内容。代码如下://router配置{ path: "/products/:category", name: "Products", components: { ... } ...原创 2019-05-27 14:39:31 · 5605 阅读 · 3 评论 -
zTree模糊搜索(子级和父级都不匹配时隐藏节点)
具体效果见上图。具体代码以下代码是基于Vue编写的。Html部分<div class="search-box clearfix"> <a-input placeholder="请输入搜索关键词..." v-model="key" @keyup.enter="searchDev" /> <a-button @click="searchDev"...原创 2019-10-06 21:35:10 · 1100 阅读 · 0 评论 -
对话面板,发送对话之后滚动至最新内容处
效果图需求分析见上图,该功能为常见对话面板。需求:对话列表按照时间先后依次由上到下排列,每次发送对话内容之后,对话列表应始终在最新对话位置。解决方案注意:多方对话需要使用webSocket<div class="input-box"> <div class="btn-speak"><i class="icon material-icon...原创 2019-09-18 09:04:57 · 229 阅读 · 0 评论