分类：Vue

2020
10-08

Vue Render函数创建DOM节点代码实例

虽然在render里使用createElement函数创建DOM节点不是很直观，但是在部分独立组件的设计中还是可以满足一些特殊需求的。一个简单的render示例如下：<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body><divid="app"><my-component... 继续阅读 >
2020
10-08

vue 实现动态路由的方法

很多时候我们在项目的路由都是在前端配置好的但是有的时候为了进行全面的权限控制，会需要后台给出路由表，前端再渲染。不用在前端配置。下面主要讲一下思路1、和后台小哥哥沟通好数据，把我们前端配置的路由表数据给他，他就能看懂了2、拿到数据需要我们自己再处理路由中的component后台是给不了的，这里我们只需要后台小哥哥按照我们提供的前端component路径给数据，我们循环加载就可以了//view就是后台给的数据return()=>imp... 继续阅读 >
2020
10-08

vue实现导航菜单和编辑文本的示例代码

导航菜单实例<divid="main"><!--激活的菜单样式为active类--><!--为了阻止链接在点击时跳转，我们使用了"prevent"修饰符(preventDefault的简称)。--><navv-bind:class="active"v-on:click.prevent><!--当菜单上的链接被点击时，我们调用了makeActive方法,该方法在Vue实例中创建。--><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"... 继续阅读 >
2020
10-08

详解Vue.js 响应接口

Vue可以添加数据动态响应接口。例如以下实例，我们通过使用$watch属性来实现数据的监听，$watch必须添加在Vue实例之外才能实现正确的响应。实例中通过点击按钮计数器会加1。setTimeout设置10秒后计算器的值加上20。<divid="app"><pstyle="font-size:25px;">计数器:{{counter}}</p><button@click="counter++"style="font-size:25px;">点我</button></div><scripttype="text/javascript">varvm=... 继续阅读 >
2020
10-08

Vue如何实现监听组件原生事件

Vue如何实现监听组件原生事件 在首页开发中，右下角有一个返回顶部的小箭头，将它单独封装成一个BackTop组件，但是它何时出现需要依赖于首页的滑动，即另外一个Scroll组件。如果直接在BackTop组件里面监听，则需要通过this.$emit将事件发射到Home组件中，又在Home中监听自定义事件，比较复杂。因此，我们直接在Home中对BackTop组件进行监听，使用.native官网对于native的解释为:.native：监听组件根元素的原生事件代码如下：在Home.vue中对back-top组件进行点... 继续阅读 >
2020
10-08

基于VUE实现判断设备是PC还是移动端

实际开发工作中会经常遇到一个需求，就是判断当前登录网页的设备是PC还是移动，要求PC端和移动端显示的是不同的网页内容。那么我们就需要对当前登录设备进行判断。使用navigator.userAgent字符串检测我是在PC端开发完接到要做移动端的需求，而且移动端只有一个页面，我就统一放在了一个文件夹内。首先在app.vue文件内，判断当前设备是pc端还是移动端。methods:{//添加判断方法isMobile(){letflag=navigator.userAgen... 继续阅读 >
2020
10-08

vue过滤器实现日期格式化的案例分析

vue过滤器实现日期格式化的案例分析 说明今天将要介绍的是vue中的过滤器，并且将实现一个日期格式化的小案例。大家都知道，我们获取当前日期可以通过Date对象获取。下面我将获取当前时间并打印出来。console.log(newDate());我们获取的是一个标准时间，控制台的输出如下所示。在实际项目开发中，我们通常获取标准时间后不是直接拿来使用，而是要进行一些操作然后将它显示在页面中，我们将这些操作称作时间格式化。过滤器在vue中，我们可以使用过滤器来进行时间格式化... 继续阅读 >
2020
10-08

vue结合el-upload实现腾讯云视频上传功能

起因根据需求要实现一个视频上传功能，之前采用七牛云上传，小点视频没问题，大体积视频比如600M左右，再考虑到网速等其他原因就会花费半个小时左右。后来分析到不仅要考虑上传时间的问题，更重要的是要考虑用户使用4G网络的情况，考虑用户的流量，线上的视频，不能不做压缩转码，就放到页面上，视频不是图片，不能甩到cdn上就行了。要考虑视频大小，pc移动端适配，转码，还有防盗版等问题。最终决定使用腾讯云上传视频，我的... 继续阅读 >
2020
10-08

vue商城中商品“筛选器”功能的实现代码

   在使用vue搭建商城项目的时候，要实现一个商品筛选器的功能，在完成之后，再一次被vue的数据驱动的强大感到震撼！       首先，我们来看一下具体的需求吧。你可以先看下面的这两张图，然后再看文字描述，可能会更容易理解。没有触发时的状态触发后的状态       我们需求有下面几点：       1、默认... 继续阅读 >
2020
10-08

vue实现购物车列表

vue实现购物车列表 本文实例为大家分享了vue实现购物车列表的具体代码，供大家参考，具体内容如下功能：删除单选全选增加数量减少数量计算总价计算数量搜索代码：<!DOCTYPEhtml><!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scriptsrc="./js/vue.js"></script></head><body><divid="app">筛选：<inputtype="text"v-model="key"><tableborder="1"cellspacing="0"cellpadding="10"><tr><th... 继续阅读 >
2020
10-08

vue实现简单图片上传

vue实现简单图片上传 本文实例为大家分享了vue实现简单图片上传的具体代码，供大家参考，具体内容如下功能实现图片上传显示进度条<template><divclass="about"><div><div><img:src="'https://www.xxx.com'+item"alt=""v-for="iteminpics"></div><label><inputtype="file"ref="file"@change="up()">+<spanclass="label":style="{width:pre+'%'}"></span></label></div></div></template><stylescoped="scoped">label{widt... 继续阅读 >
2020
10-08

vue基于better-scroll仿京东分类列表

vue基于better-scroll仿京东分类列表 本文实例为大家分享了vue基于better-scroll仿京东分类列表的具体代码，供大家参考，具体内容如下效果图和目录结构1、main.js（需要安装router）importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'import'../src/assets/js/mock'importaxiosfrom'axios'axios.defaults.baseURL='http://mockjs.com/api'Vue.prototype.$http=axiosVue.config.productionTip=falsenewVue({router,render:h=... 继续阅读 >
2020
10-08

vue使用better-scroll实现滑动以及左右联动

vue使用better-scroll实现滑动以及左右联动 本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码，供大家参考，具体内容如下一、首先需要在项目中引入better-scroll1.在package.json直接写入"better-scroll":"^1.15.1" 版本以github上为准（目前最新）2.cpnminstall 在node_modules 可以查看版本是否安装3.直接在你的组件里面写入importBScrollfrom'better-scroll';二、better-scroll优点1.体验像原生：滚动非常流畅，而且没有滚动条。2.滚... 继续阅读 >
2020
10-08

vue实现评价星星功能

vue实现评价星星功能 本文实例为大家分享了vue实现评价星星的具体代码，供大家参考，具体内容如下代码：<template><ulclass="StarsWrap"><liv-for="(i,index)inlist":key="index"@click="clickStars(index)"><img:src="xing>index?stara:starb"/></li></ul><p>{{rateScoreText}}</p></template><script>exportdefault{name:'evaluate',data(){return{rateScoreText:'',rateScoreDesc:['非常不满意，各方面... 继续阅读 >
2020
10-08

vue开发简单上传图片功能

vue开发简单上传图片功能 本文实例为大家分享了vue实现简单上传图片功能的具体代码，供大家参考，具体内容如下vue简单的上传个图片的功能，主要代码：<template><divclass="plan_list"><divclass="plan_nameUpload_name">企业logo</div><divclass='Upload'><inputtype="file"name="pclogo"id="xdaTanFileImg"@change="xmTanUploadImg()"ref='box'accept="image/*"><imgsrc="../../static/img/Authentication/shxy.jpg"class=... 继续阅读 >