分类：VUE

2020
11-17

Vue 实现拨打电话操作

我就废话不多说了，大家还是直接看操作吧~<p>联系电话：<a:href="'tel:'+item.phone"rel="externalnofollow">{{item.phone}}</a></p>补充知识：vue移动项目中如何设置点击手机号码就唤起拨号功能1、在vue项目的index.html中添加如下代码：<metaname="format-detection"content="telephone=yes"/>2、在需要调起手机拨号功能的页面，写如下函数：//调用拨号功能callPhone(phoneNumber){window.location.href='tel://'... 继续阅读 >
2020
11-17

Vue基于localStorage存储信息代码实例

Vue基于localStorage存储信息代码实例 一什么是localStorage对浏览器来说，使用WebStorage存储键值对比存储Cookie方式更直观，而且容量更大，它包含两种：localStorage和sessionStoragesessionStorage（临时存储）：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载localStorage（长期存储）：与sessionStorage一样，但是浏览器关闭后，数据依然会一直存在所以上次使用cookie的时候就遇到了一个坑,设置后马上访问session会获取不到... 继续阅读 >
2020
11-17

vue 封装面包屑组件教程

vue 封装面包屑组件教程 我看过一篇关于程序员写博客的文章，他说很多的程序员过了两年写了很多的代码，但是回想起来自己具体做了哪些技术点，遇到坑几乎没有印象，所以说文字是记录的最好方式，好记性不如烂笔头，可以方便自己以后查看，在写的过程中也会再加深一遍印象，我也来折腾折腾。第一次写文章就写一个比较有意义的吧，18年四月末来到目前所在的这家公司，熟悉了一周环境和代码后，新的任务就是使用vue+element-ui来重构之前老版本的项目，我主要... 继续阅读 >
2020
11-17

Vue使用路由钩子拦截器beforeEach和afterEach监听路由

在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。总体来讲vue里面提供了三大类钩子，两种函数1、全局钩子2、某个路由的钩子3、组件内钩子两种函数：1.router.beforeEach(function(to,form,next){})/*在跳转之前执行*/2.router.afterEach(function(to,form)}{})/*在跳转之后判断*/全局钩子函数顾名思... 继续阅读 >
2020
11-17

适用于 Vue 的播放器组件Vue-Video-Player操作

如果h5的标签<vedio>不能满足你的需求，那就用这个组件Vue-Video-Player吧，也许可以覆盖到你的需求。<video-playerclass="video-playervjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"></video-player>配置参数：playerOptions:{height:400,playbackRates:[0.7,1.0,1.5,2.0],//播放速度autoplay:false,//如果true,浏览器准备好时开始回放。muted:false,... 继续阅读 >
2020
11-17

Vue中使用JsonView来展示Json树的实例代码

Vue中使用JsonView来展示Json树的实例代码 前两天干活儿有个需求，在前端需要展示可折叠的Json树，供开发人员查看，这里采用JsonView组件来实现，它是一款用于展示Json的Vue组件，支持大体积的Json文件快速解析渲染，下面记录一下实现过程。1.首先先下载好JsonView的组件：JsonView.vue，组件代码如下：<template><divclass="bgView"><div:class="['json-view',length?'closeable':'']":style="'font-size:'+fontSize+'px'"><span@click="toggleClose"... 继续阅读 >
2020
11-17

Vue 数据绑定的原理分析

原理其实原理很简单，就是拦截了Object的get/set方法，在对数据进行set(obj.aget=18)时去重现渲染视图实现方式有两种方式1定义了同名的get/set就相当于定义了agevartest={_age:18,getage(){console.log('触发get');//直接会this.age会进入死递归的returnthis._age;},setage(age){console.log('触发set');this._age=age;}};为了让test不显示多余的变量，可以把_age定义在外... 继续阅读 >
2020
11-17

Vue 使用iframe引用html页面实现vue和html页面方法的调用操作

Vue 使用iframe引用html页面实现vue和html页面方法的调用操作 当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时，我们可以使用iframe去引用html页面，实现他们的交互首先我们可以再vue页面中使用标签引用html页面<template><div><iframename="iframeMap"id="iframeMapViewComponent"width="100%"height="470px"v-bind:src="smgHtmlPath"frameborder="0"scrolling="no"ref="iframeDom"></iframe></div></template>其中src就是我们html的地址，我... 继续阅读 >
2020
11-16

Vue指令实现OutClick的示例

原始实现下面是两种常见的模态框的实现方式方案一：默认click都是放在冒泡阶段，只要在内容区域上添加click的阻止冒泡即可<divclass="cover"@click="close"><!--阻止冒泡--><divclass="content"@click.stop>modalcontent</div></div>方案二：通过代码判断点击触发的DOM是否在内容区域内<divclass="cover"@click="handleClick"><divclass="content"ref="content">modalcontent</div></div>handleClick(e){l... 继续阅读 >
2020
11-16

浅谈vue在html中出现{{}}的原因及解决方式

原因：浏览器渲染机制，解析html结构->加载外部脚本和样式表文件->解析并执行脚本代码->构造htmldom模型->加载图片等外部文件->页面加载完毕。初始化vue的js写在页面底部，也就是最后才执行js脚本。所以页面从头到尾开始渲染时，渲染到标签时，由于vue还未初始化，所以就会显示类似这样的代码<h2>{{courseName}}</h2>当网速很慢的时候就看得比较清楚，可能会让用户误以为bug之类的，快一点的话就是一闪而过，体验不是很... 继续阅读 >
2020
11-16

vue组件中传值EventBus的使用及注意事项说明

vue组件中传值EventBus的使用及注意事项说明 主要想说下非父子组件之间的通信。项目场景：在app.vue里写了一个公共的顶部导航navbar，然后右侧有个分享按钮，而这个分享按钮只有在特定的页面才展示，项目里是在lottery.vue页面，然后想实现app.vue里点击分享按钮，触发lottery.vue里的分享方法。解决：使用eventBus1、创建一个event-bus.jsimportVuefrom'vue'exportconstEventBus=newVue()2、在app.vue引入eventbus，点击分享按钮时触发方法import{EventBus}from... 继续阅读 >
2020
11-16

基于Vue+Webpack拆分路由文件实现管理

事实是，如果你的项目不是特别大，一般是用不着分拆的。如果项目大了，那就需要考虑分拆路由了。其实，这个操作并不复杂。当我们用vue-cli工具，创建一个新的vue项目时，就已经给大家新建好了一个路由文件src/router/index.js，内容如下：importVuefrom'vue'importRouterfrom'vue-router'importHelloWorldfrom'@/components/HelloWorld'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',na... 继续阅读 >
2020
11-16

vue+Element-ui实现登录注册表单

vue+Element-ui实现登录注册表单 本文实例为大家分享了vue+Element-ui实现登录注册表单的具体代码，供大家参考，具体内容如下登录注册表单验证通过Element-ui的表单实现登录注册的表单验证效果图如下注册登录表单登录的实现，需要通过手机号或者邮箱进行登录,验证手机号或者邮箱符合要求//登录表单验证的代码//template的代码<el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-ite... 继续阅读 >
2020
11-16

Vue+Element-U实现分页显示效果

Vue+Element-U实现分页显示效果 本文实例为大家分享了Vue+Element-U实现分页显示效果的具体代码，供大家参考，具体内容如下当我们从后端返回的数据量很大，并且根据需求我们需要将返回的数据全部都显示在页面中，默认情况下会把所有的数据全部显示在一个页面，这样非常影响视觉和页面的使用，所以需要使用分页我这次使用的是Vue4.0+ Element-UI组件，Element-UI库非常的丰富，它提供了一个分页组件Pagination展示效果：这个是获取两个时间段的上机记录HTM... 继续阅读 >
2020
11-16

vue+Element-ui前端实现分页效果

vue+Element-ui前端实现分页效果 本文实例为大家分享了vue+Element-ui前端实现分页效果的具体代码，供大家参考，具体内容如下分页技术分页技术的概念分页就是将所有的数据分段展示给用户，用户看到的可能不是全部的数据，而是其中一部分，用户可以通过点击页码来查找自己需要的内容，也可以通过模糊查询获取符合内容的数据分页的意义分页确实有效,但它一定会加大系统的复杂度,但可否不分页呢?如果数据量少的话当然可以.但是对于企业信息系统来说数据量不会限制... 继续阅读 >