Vue
关注
分享
扫一扫
guanguan0_0
学着学着就会了
展开
-
vue封装图片滑块验证组件
滑块验证组件整体不难，主要在于设置图片的样式问题，想要让背景图充满div，就需要滑块图片也跟随等比放大，效果与代码如下：HTML：<template> <section class="slider-section"> <div class="img-box"> <img :src="'data:image/png;ba...原创 2020-03-16 18:33:43 · 1681 阅读 · 0 评论 -
vue使用lottie渲染json动画
1、安装vue-lottie$ npm install vue-lottie --save2、在组件中使用Lottie渲染json动画<template> <Lottie :options="defaultOptions" :height="26" :width="26" /></template><script>i...原创 2020-02-19 18:26:10 · 2036 阅读 · 0 评论 -
如何在vue项目中使用websocket
一般先要在项目中使用websocket对某个数据流进行监听，最好使用全局方式来定义websocket具体代码如下：<script> export defalut { data() { return { path:"ws://192.168.10.4:8085" } ...原创 2020-02-18 23:59:51 · 1756 阅读 · 1 评论 -
vue获取上级路由地址
可以通过从vue-router中beforeRouteEnter钩子函数中的from参数中获取url，利用next()传递回当前组件，具体代码如下：<sctipt> export default { data() { return { beforeUrl: '' } ...原创 2020-02-17 15:01:31 · 7136 阅读 · 1 评论 -
vue对象属性变化时无法刷新v-if、v-show
普通对象赋值方式可能会使v-if和v-show无法刷新，可以使用this.$set(this.obj, 属性名,属性值)的方式来改变对象的值，例子如下：<template> <button @click="handleShow">点击</button> <div v-if="params.isShow">显示出来div<...原创 2020-02-15 13:53:55 · 9859 阅读 · 0 评论 -
vue封装加载更多组件
LoadMore.vue<template> <div class="load-more-wrapper" @touchstart="touchStart($event)" @touchend="touchEnd($event)"> <div class="inner"> <slot></slot> ...原创 2019-12-25 18:09:07 · 710 阅读 · 0 评论 -
解决移动端vue项目资源缓存问题
我们希望每次进入项目都会重新加载资源配置，以防配置文件修改而导致页面没有更新问题我们习惯通过在资源路径加上时间戳等参数来保证每次进入的正常刷新但是，vue中要怎么处理呢，代码如下：index.html:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> &...原创 2019-12-18 16:01:32 · 2335 阅读 · 0 评论 -
axios封装简明的request请求
下面以Vue为例来封装request请求request.js:import axios from 'axios'import { getToken } from '@/utils/auth'import { Message } from 'element-ui'import store from '@/store'import router from '../router'c...原创 2019-12-17 18:20:32 · 1944 阅读 · 0 评论 -
使用vue-cropper实现最实用的图片裁剪组件
先上效果图：1、安装vue-croppernpm install --save vue-cropperjs2、项目中引入使用：（1）全局引入man.jsimport Vue from 'vue'import VueCropper from 'vue-cropper'import 'cropperjs/dist/cropper.css'Vue.use(VueCro...原创 2019-12-16 14:34:36 · 2715 阅读 · 11 评论 -
vue实现播放rtmp直播视频流
1、安装依赖npm install --save vue-video-playernpm install --save videojs-flash2、项目中使用<template> <section class="video-box"> <videoPlayer ref="videoPlayer" :option...原创 2019-12-16 16:46:57 · 7383 阅读 · 3 评论 -
js倒计时实现及vue轮询报错问题
遇到验证码获取倒计时等场景需要用到定时器Interval，以下展示vue中计时器的用法data() { return { codeTime: 60, // 倒计时读秒数 codeTimer: Function // 定义验证码倒计时器 }},mounted() { this.codeTimer = setInterval(()=&g...原创 2019-11-14 19:53:45 · 437 阅读 · 0 评论 -
vue中使用eventBus
当遇到子组件与子组件之间传参，监听本地缓存变化时，可以使用bus来处理。当然也可以使用vuex，但vue-bus更加简便。vue-bus相当于是提供了一个全局的事件监听中心，可以将其全局注入，在组件中就可以使用其进行事件监听，传递。具体操作如下：1、安装vue-bus$ npm install vue-bus2、全局引入vue-busmain.js:import V...原创 2019-10-25 18:56:21 · 732 阅读 · 0 评论 -
vue监听浏览器高度变化
1、设置变量：data() { return { clientHeight: document.documentElement.clientHeight }}2、页面初始化时给onresize函数赋值：mounted() { window.onresize = () => { this.clientHeight = d...原创 2019-10-14 15:45:37 · 3902 阅读 · 1 评论 -
Vue开发——封装分页组件
使用elementui中的el-pagination来封装分页组件pagination.vue:<template> <div class="pagination"> <el-paginationsmallclass="text-center"@size-change="handleSizeChange"@cu...原创 2018-05-17 18:26:14 · 1830 阅读 · 0 评论 -
Vue开发——封装富文本编辑器组件
使用vue-quill-editor封装富文本组件editor.vue:<template><div class="quillEditor" v-loading="loading"><!-- quill-editor插件标签 分别绑定各个事件--><quill-editor v-model="content" ref="myQui...原创 2018-05-18 09:17:55 · 3057 阅读 · 0 评论 -
Vue开发——封装上传文件组件
使用elementui的 el-upload插件实现图片上传组件每个项目存在一定的特殊性，所以数据的处理会不同pictureupload.vue:<template> <div class="pictureupload"> <el-upload :action="baseUrl + ...原创 2018-05-18 09:19:08 · 4730 阅读 · 1 评论 -
Vue开发——使用zTree插件封装树组件
1.通过npm安装jquerynpm install jquery --save-dev 2.在build/webpack.base.conf文件当中引入jquerymodule.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: ...原创 2018-05-18 09:20:40 · 6431 阅读 · 4 评论 -
H5页面使用vuejs
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>xxxxx</title&a原创 2018-12-17 11:36:49 · 5040 阅读 · 0 评论 -
vue面试常见知识点
一、对于MVVM的理解？MVVM 是 Model-View-ViewModel 的缩写。 Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和...原创 2018-11-30 15:43:20 · 195 阅读 · 0 评论 -
Vue基础复习
watch属性:监听指定值的变化（异步场景）computed计算属性：方法里的任意一个值发生变化就会监听到（数据联动）条件渲染：v-if v-else v-else-if v-show列表渲染：v-for属性绑定：v-bind:xxx (:xxx) class绑定（:class） style绑定（:style）vue-cli脚手架：安装全局vue-cli...原创 2019-02-19 10:28:28 · 271 阅读 · 0 评论 -
vue移动端配置自适应，全局自动转换px单位
1、下载lib-flexiblenpm i lib-flexible --save2、在main.js中引入lib-flexibleimport 'lib-flexible/flexible'3、安装postcss-px2remnpm i postcss-px2rem --save4、安装px2rem-loadernpm i px2rem-loader --sa...原创 2019-07-04 20:10:54 · 3454 阅读 · 0 评论 -
Vue开发——watch监听数组、对象、变量
1.普通的watchdata() {return {frontPoints: 0}},watch: {frontPoints(newValue, oldValue) {console.log(newValue)}}2.数组的watch：深拷贝data() {return ...原创 2018-05-17 18:25:25 · 34107 阅读 · 3 评论