分类：Vue.Js

2020
12-29

vue.js刷新当前页面的实例讲解

在我们修改过页面的某些数据后，通过想要把页面刷新一下，看看修改后的结果。由于vue的存在，页面是不会自动刷新的，需要我们手动进行操作。在vue里有三种刷新方法，最推荐的就是组合控制法，另外另种方法也会分享给大家学习，下面我们一起来看看vue如何刷新页面吧。1.强制刷新window.location.reload()原生js提供的方法；this.$router.go(0)，vue路由里面的一种方法；这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户... 继续阅读 >

2020
11-11

vue.js+element 默认提示中英文操作

element默认中文版，但是我们在做英文页面时自己翻译很不爽，所以我们用element自带英文包，只要在html页面中引入就可以了，具体引入方法有很多种，在此提供了我用过的一种，仅作为参考使用：补充知识：element-ui组价中表单的验证提示显示后台的提示信息及自定义提示我在做这个的时候一个是分给我的那个页面是有两个接口的，所以提示信息就是根据接口的response.success提示写一个提示语“XX已存在”如下：html:​<el-fo... 继续阅读 >

2020
11-11

详解Vue.js3.0 组件是如何渲染为DOM的

本文主要是讲述Vue.js3.0中一个组件是如何转变为页面中真实DOM节点的。对于任何一个基于Vue.js的应用来说，一切的故事都要从应用初始化「根组件（通常会命名为APP）挂载到HTML页面DOM节点（根组件容器）上」说起。所以，我们可以从应用的根组件为切入点。主线思路：聚焦于一个组件是如何转变为DOM的。辅助思路：涉及到源代码的地方，需要明确标记源码所在文件，同时将TS简化为JS以便于直观理解思路每前进一... 继续阅读 >

2020
11-08

vue.js页面加载执行created,mounted的先后顺序说明

created页面加载未渲染html之前执行。mounted渲染html后再执行。由于created在html模板生产之前所以无法对Dom进行操作而mounted可以。补充知识：关于Vue子组件data选项某个属性引用子组件props定义的属性的几点思考学过Vue的都知道Vue等MVVM框架相对于传统的JS库比如Jquery最大的区别在于数据驱动视图，重点在于数据，拿到数据后将数据通过模板{{}}语法或者v-html展示在页面上。我们也都知道在Vue父子组件可以通过Props实现父组件... 继续阅读 >

2020
11-08

html+vue.js 实现漂亮分页功能可兼容IE

当功能比较简单，在单一html中使用vue.js分页展示数据，并未安装脚手架，或使用相关UI框架，此时需要手写一个分页器，不失为最合理最便捷的解决方案先看一下实现效果：  上代码：1.简单搞一搞CSS，此处代码有折叠2.简单搞一搞HTML <divid="app"v-cloak@click="showOption=false">第{{pageIndex}}页,每页显示{{pageSize}}条<divv-show="pageTotalNum>1"class="pageContainer">共{{dataListLength}}条... 继续阅读 >

2020
10-28

vue.js封装switch开关组件的操作

我的项目本来用的element，但是switch开关不符合设计要求，于是自己封装了一个switch组件，并且实现了switch开关的双向数据绑定<template><labelrole="checkbox":class="['switch',{toggled}]"><inputtype="checkbox"class="switch-input"@change="toggle"/><divclass="switch-core":style="{backgroundColor:toggled?colorChecked:colorUnchecked}"><divclass="switch-button":style="{transition:`transfor... 继续阅读 >

2020
10-10

Vue.js使用axios动态获取response里的data数据操作

今天开发时，使用axios返回的response中data有多个数据：如果是获取cn里的数据的，可以用：response.data.cn但是需求是根据选择来获取数据的，会发生变化，最开始的想法是，用一个变量来记录需要获取的key:假设need是需要获取的某个keyconstdkey=this.need;response.data.dkey这样发现获取不到数据，这是因为vue.js把dkey当成data里的某一个key了，类似于上面的"cn"。折腾了很久才突然想起，这个data其实类似一个数组，我们可以... 继续阅读 >

2020
10-10

Vue.js暴露方法给WebView的使用操作

新建一个外部公共的js文件app.js，定义一个对象并输出，如下：varhybrid={}window.Hybrid=hybridif(window.Vue){window.Vue.use(hybrid)}export{hybrid}在需要的文件中引入app.js或者在main.js引入app.js，如下（引入到main.js）：import{hybrid}from'./common/app'Vue.prototype.$hybrid=hybrid将需要暴露的方法赋给hybrid对象，如下：补充知识：将Vue项目methods中的方法暴露在window上我是一个H5,咱们在... 继续阅读 >

2020
10-10

三步搞定:Vue.js调用Android原生操作

第一步：Android对Js的接口，新建AndroidInterfaceForJs.jsimportandroid.content.Context;importandroid.os.Build;importandroid.os.Handler;importandroid.os.Looper;importandroid.support.annotation.RequiresApi;importandroid.util.Log;importandroid.webkit.JavascriptInterface;importandroid.webkit.ValueCallback;importandroid.widget.Toast;importcom.just.agentweb.AgentWeb;importcom.yidumedical.ui.ac... 继续阅读 >

2020
10-10

vue.js 输入框输入值自动过滤特殊字符替换中问标点操作

我就废话不多说了，大家还是直接看代码吧~<Inputv-model="relatedWords"type="textarea"placeholder="请输入"@input='verifyInput(formItem.relatedWords)'/>verifyInput(v){let_this=this;letpunctuation=/[`~!@#$%^&*_\-=<>?:"{}|.\/;'\\[\]·~！@#￥%……&——\-={}|《》？：“”【】、；‘'。、]/im;letarr=v.split('')letstr=''arr.map(i=>{if(!punctuation.test(i)){str+=i}})str=... 继续阅读 >

2020
10-09

详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别

如下所示：1.index.html文件入口；2.src放置组件和入口文件；3.node_modules为依赖的模块；4.cofig中配置了路径端口值等；5.build中配置了webback的基本配置、开发环境配置、生产环境配置等。main.js是我们的入口文件，主要用于初始化vue实例，并使用需要的插件。App.vue是我们的主组件，所有的页面都在App.vue下进行切换。我们可以将router标示为App.vue的子组件。6.在每个模板中给style设置一个scoped属性，意为该style的属性只... 继续阅读 >

2020
10-09

vue.js click点击事件获取当前元素对象的操作

Vue.js可以传递$event对象<bodyid="app"><ul><liv-on:click="say('hello!',$event)">点击当前行文本</li><li>li2</li><li>li3</li></ul><script>newVue({el:'#app',data:{message:'HelloVue.js!'},methods:{say:function(msg,event){//获取点击对象varel=event.currentTarget;alert("当前对象的内容："+el.innerHTML);}}})</script></body>属性描述... 继续阅读 >

2020
10-08

如何在Vue.JS中使用图标组件

原文链接：https://gist.github.com/Justineo/fb2ebe773009df80e80d625132350e30本文对原文进行一次翻译，并从React开发者的角度简单地做了一些解读。此文不包含字体图标和SVGsprite。仅在此讨论允许用户按需导入的图标系统。TherearethreemajorwaysofexposingAPIofaniconcomponentinVue.jsandeachoneofthemhasitsownpros&cons:在Vue.js的生态里，有3种主流的API形态，它们有各自的优缺点：1.使用单一的... 继续阅读 >

2020
10-08

Vue.js中使用Vuex实现组件数据共享案例

当组件中没有关联关系时,需要实现数据的传递共享,可以使用Vuex先不管图片一、安装在vuecli3中创建项目时勾选这个组件就可以了或者手动安装npminstallstore--save二、使用main.jsstore.js.vue文件图片中的js文件中有三部分分别与图片上对应1.state中存储数据2.而数据的修改需要先经过action的dispatch方法(不需要异步获取的数据可以不经过这一步,如上图)3.然后经过matations的commit方法将展示在页面上{{this.$store.st... 继续阅读 >

2020
10-08

vue.js 解决v-model让select默认选中不生效的问题

笔者今天在开发中遇到一个看起来很神奇的问题，平时编辑的页面我们select下拉选框利用vue.js的v-model来实现自动选中，今天无论如何都选不中，后来经过很久的复查和大神的一句话终于解决这个这个问题，顺便分享一下。问题先上代码：上图是前端的H5页面下面是js代码：一眼看上好像也没有什么问题。js在初始化的时候，调用后台接口，取到数据然后传递给vue里面定义的data里面。并且前端页面除了select不能正常选中，其他的input框... 继续阅读 >

2020
10-08

解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

先看效果图，这是弹窗效果，要求就是弹窗出现和消失时候不是很突兀，要有过渡效果。首先看弹窗出现的实现思路，先加一个beforeActive类，再加一个active类。我们看审查元素，一开始display：none；在beforeActive中display：block；只是background:transparent;然后在一定时间后再加上active类。问题就来了，在打开弹窗代码中，如下图，settimeout第二个参数小于60ms效果就会不稳定，有时候有过渡效果，有时候没有过渡效果。//... 继续阅读 >