xm2by的博客

星级评分的实现星级评分是一种常见的打分方式，一般满分为5颗星，用户通过勾选星星的数量来给产品的某一维度进行打分，效果如下图所示：当鼠标移动到某个星星上面时，当前星星及其前面的星星需处于激活状态；当鼠标移开时，所有星星恢复原状；只有当鼠标点击某个星星时，当前星星及其前面的星星处于激活状态，评分生效，此时鼠标移开时，星星状态不用恢复原状。从上述分析可以看出，用到了鼠标进入、离开事件、以及点击事...

vue路由切换时NavigationDuplicated报错的解决方法在vue中使用this.$router.push()方法切换路由时，有时控制台会报NavigationDuplicated相关的错误，如下图所示：原因：在网上查询一番后，比较多的一种说法是，vue-router在3.1之后把$router.push()方法改为了Promise，因此在使用$router.push()时如果...

v-model的理解在input元素上使用v-model可以实现数据的双向绑定；其双向绑定的原理是利用input元素的value属性和监听其input事件；<input type="text" v-model="inputValue"></input>vue模拟v-model的实现<input type="text" :value="inputValue" ...

模拟实现Vue数据双向绑定参考文献：[1] vue的双向绑定原理及实现

vue项目中引入特殊字体

在本地通过设置域名访问vue项目时出现Invalid Host header错误原因：webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的就不能访问，我们可以通过设置跳过host检查来解决该报错，具体如下：解决方法：1、vue-cli2创建的项目，在webpack.dev.conf.js中的devServer对象中添加如下设置：//...

多行省略的实现在实际开发中，经常会遇到当文本内容比较多时，由于显示区域空间的限制，我们只需显示一部分内容，剩余的内容则用省略号（…）代替。关于单行多余内容省略的实现，可以简单的通过css样式来实现：.ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}多行省略的实现，也可以通过css样...

由npm仓库源引起的404今天新项目需要开工，像往常一样使用vue-cli构建，但在执行vue init webpack &lt;project-name&gt;命令时，出现了404 Not Found: vue@^2.5.2报错，很是奇怪，为什么找不到vue？之前使用vue-cli构建项目时可没有出现这样的报错。百度了一下并没有找到类似的报错描述和解决办法，所以就想着会不会是公司网络限制，无...

vue-cli创建项目配备element、less、axios等工具

解决IE浏览器下路由变化页面不更新问题解决办法：watch: { '$route' (to, from) { window.location.reload() }},参考文献：[1] vue——路由变化页面数据不刷新问题...

el-table表格头部内容自定义在使用element UI中的表格组件进行开发时，表格头部的内容是通过设置<el-table-column>组件的label属性进行赋值，使用label属性的话，表格头部只能展示一些静态内容；今天接到一个需求，要求表格头部的内容在鼠标hover上去的时候提示信息，通过label属性设置表格头部内容就无法满足我们的需求，这时候就需要对表格头部的内容进行...

解决使用vue-cli3创建项目时在git下交互提示符没反应问题vue-cli3下我们使用vue create命令来快速创建项目，在window下会遇到交互提示符不工作的问题，如图所示：vue-cli官网给出了两种解决方法：下面对它们具体实践一下：方法一：第一种比较简单，就是将vue create命令改为winpty vue.cmd create命令，如下图所示：方法二：第二种...

vue项目中实现pdf文件预览功能最近遇到一个实现pdf文件预览功能的需求，分享一下实现方法：pdf预览相对word、excel、ppt等文件的预览比较容易，因为常见的浏览器都是支持pdf文件直接预览，所以最简单的实现方法就是在浏览器中直接输入pdf文件存放在服务器上的路径地址就可以直接预览；1、使用浏览器默认支持访问pdf文件的功能1.1、当后端返回的是pdf文件在服务器上的路径时，直接...

参考文献：[1] 从vue源码看Vue.set()和this.$set()

vue中是如何监听数组变化？参考于Vue源码解析五——数据响应系统参考文献：[1] 如何监听数组变化?

实现一个EventBusvue组件间通信方式有多种，对于父子组件，最常用的是使用props和emit进行通信，对于非父子组件，我们会采用EventBus进行通信，具体如何操作先看如下demo：// utils.js // 创建一个Vue实例，作为EventBusimport Vue from 'vue'export const EventBus = new Vue()有三个组件：Pa...

骨架屏效果参考文献：[1] Vue页面骨架屏[2] Vue 页面骨架屏注入实践[3] 通过vue-cli3构建一个SSR应用程序

localhost改ip后无法访问

解决项目在IE中显示空白问题最近之前做的一个项目在IE浏览器下出现了一个奇怪的问题，用户用IE浏览器打开后，页面是空白的，打开F12查看IE浏览器的版本发现默认版本是IE8以下，如下图所示：但是当我将浏览器版本设置8以上，项目就可以正常显示，关闭IE后重新打开发现页面还是空白，后来通过上网查看...

使用vue-cli离线创建项目1、手动下载vue模板2、将下载的模板压缩包解压，修改文件名为wepback并放入到C:\Users\自己电脑的用户名.vue-templates文件夹中3、执行命令：vue init &amp;lt;template-name&amp;gt; &amp;lt;project-name&amp;gt; --offline...

利用vue实现“显示更多”功能 当网页内容比较多时，将内容全部显示一方面会显得冗余，另一方面并不是每个人都喜欢看所有内容。因此，为了提高用户体验，一些网站便将内容显示一部分，然后使用“显示更多”功能来对剩余内容进行显示与隐藏。下面是利用vue.js实现上述功能的demo。demo&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&l...

vue中的.sync修饰符 在Vue中，子父组件最常用的通信方式就是通过props进行数据传递，props值只能在父组件中更新并传递给子组件，在子组件内部，是不能改变传递进来的props值，这样保证了数据单行流通。但有时候，我们会遇到一些场景，需要在子组件内部改变props属性值并更新到父组件中，这时就需要用到.sync修饰符。下面将代码来感受一下.sync修饰符的作用。为了展示.s...

vue中的.self修饰符 在Vue中，由于事件捕获和冒泡的存在，当点击某个元素时会引发其父元素（父父元素、父父父元素……）的点击事件发生，使得点击某个元素时达不到想要的效果。.self修饰符可以很好的解决这一情况，.self修饰符只有在点击事件绑定的元素与当前被点击元素一致时才触发点击事件。在下面demo中，3个class分别为outer、mid、inner的div标签嵌套，并分别...

vue中的keep-alive keep-alive的作用主要是在组件切换时，保存组件的状态，防止重复渲染引发性能问题。比如：常见的列表页与详情页，当我们在列表页通过滚动鼠标寻找到自己感兴趣的标题时，点进去进入详情页，当浏览完详情页后返回到列表页，此时我们希望返回的列表页不是重新渲染后的列表页，而是我们之前滚动到的位置，keep-alive 就可以帮助我们缓存列表页的状态，实现上述效果。k...

vue中的ref属性  使用vue开发时经常会用到ref属性，ref属性有什么作用呢？我刚开始用的时候发现这个属性有点鸡肋，总是感觉可有可无，但是随着不断的使用vue，慢慢地发现它的作用还是挺重要的，比如：有时候我们想在父组件中调用子组件的方法或属性，这个时候该怎么做呢？可以通过为子组件设置ref，然后通过this.$refs.refName（refName为子组件的ref值）获取到子组件，然...

vue项目打包后favicon无法正常显示 vue项目打包后favicon无法正常显示，原因可能是由于打包的时候没有配置favicon选项或者favicon路径配置错误。解决方法：在webpack.pro.config.js中的HtmlWebpackPlugin插件选项中配置favicon选项，其中favicon的路径是个相对路径...new HtmlWebpackP...

让vue-cli搭建的脚手架可以处理vue文件中postcss语法

vue项目中配置favicon图标如上图所示，页面顶部的小图标会让页面显得高大上，一般把这种图标叫做favicon图标。利用vue-cli脚手架搭建的项目，如果不手动配置，页面中是不会显示favicon图标。不配置是这样子的：favicon图标的配置也很简单，vue-cli默认帮我们安装了html-webpack-plugin（如果没有，可以自己npm安装），我们只需在html...

vue-cli脚手架构建的项目中引入iconfont图标方法 图标作为一种装饰，会让页面变得好看、简洁明了。iconfont是阿里巴巴提供的一个矢量图标库，我们可以在库中找到需要的图标，通过下载并引入到项目中就可以直接使用了。前提：使用vue-cli脚手架构建的项目1、选择需要的图标并下载2、解压下载后的文件并找到以下四个文件，将这四个文件放入到项目的assets文件夹中（为...

vue-cli构建的项目中图片路径以变量形式传入时显示解决办法直接将图片路径以变量形式传入时，页面时显示不出来的解决方法：使用require对图片路径进行引用；参考文献[1] vue-cil和webpack中本地静态图片的路径问题解决方案...

vue项目兼容IE浏览器 利用vue写出的项目打包后在IE浏览器下显示空白，是因为缺少babel-polyfill的缘故。解决方法：1、安装babel-polyfill包；2、在main.js文件中引入babel-polyfill；3、在webpack.base.config.js中将entry中的app: './src/main.js'配置改为：app: ['babel...

vue项目中实时搜索功能的优化——减少请求次数与取消上一次请求 vue项目中的实时搜索功能是指在用户输入的过程中，不断的向后端发送请求，并展示用户已经输入的内容对应的结果。在vue项目中实现实时搜索功能的思路一般是：1、监听输入框的输入内容，通过emit将输入内容传递给实时搜索的父组件，同时触发父组件向服务器发送请求；2、实时搜索的组件在接收到服务器返回的数据后将其传递给...

vue-cli配置代理参考文献：[1] vue-cli本地环境API代理设置和解决跨域[2] vuejs添加环境常量----多环境开发打包场景解决方案之一[3] vue-cli項目開發/生產環境代理實現跨域請求+webpack配置開發/生產環境的接口地址...

如何在vue项目中引入json数据文件？方法1：可能会出现的问题：方法2：参考文献：[1]

如何将vue-cli创建的项目关联到github或gitlab远程仓库进入需要关联到远程仓库的项目文件夹中，执行以下命令：1、git init使用git初始化项目2、git remote add origin &lt; remote-project-repository-address &gt;将项目关联到远程仓库，&lt; remote-project-repository-addre...

        数据驱动和组件化是vue.js两个最重要的特点。组件化是为了方便代码复用，提高开发效率。常见的vue组件写法有四种，各有特色，适用于不同的场景。1、全局组件结构：// 组件的注册Vue.component( 'componentName', { template: // 组件的html结构, data(){ return{ ...