vue
面壁思过程
这个作者很懒,什么都没留下…
展开
-
vue自定义日历插件(自己传入开始日期)
选择一个时间段开始日期是自己传入 选择截止日期组件代码如下<template> <div class="calendar"> <!-- 选择日历的弹出层 --> <div class="model_mask" v-show="showtimemask" @click="showmask1()"> <...原创 2019-08-06 14:11:05 · 1211 阅读 · 0 评论 -
vue开发小技巧(持续更新)
1、引入不同的组件库 按需加载时需要用vue.use() 1. 以前的写法import VeeValidate from 'vee-validate'; // 表单验证import { Button, Lazyload, Popup,Toast } from 'vant';Vue.use(VeeValidate);Vue.use(Button);Vue.use(Lazyload); //图片懒加载Vue.use(Popup);Vue.use(Toast); 2. 优化 ...原创 2020-08-21 15:36:57 · 324 阅读 · 0 评论 -
vue-computed利用闭包传值转换数据
比方str的数据传唤成zz这个样子定义一个计算属性computed: { resList() { return function(realstr) { if (realstr) { let res = realstr.substring(0, realstr.length - 1); let arr1 ...原创 2020-01-15 16:52:12 · 1245 阅读 · 0 评论 -
vue input上传视频以及图片
图片示例主要代码1、把图片视频转成本地的地址在页面显示 getObjectURL(file) { var url = null; // 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已 if (window.createObjectURL != undefined) { // basic ...原创 2019-12-05 13:45:05 · 2686 阅读 · 0 评论 -
关于input禁止输入中文、只允许输入正整数的用法
1、只允许输入正整数vue写法<p> <span>只允许输入正整数</span> <input type="text" placeholder="输入正整数" @keyup="number=number.replace(/^(0+)|[^\d]+/g,''...原创 2019-11-20 10:44:52 · 753 阅读 · 0 评论 -
多级复选框实现vue
HTML部分<template> <div class="Multistage_check"> 多级复选 <input class="checkbox" type="checkbox" v-model="allCheack" @change="selAll(list)" /> <span>选择全部</span...原创 2019-11-19 14:16:42 · 1988 阅读 · 2 评论 -
类似于课程表切换上下周的日历
如下图周数算法是从这个月第一个周一开始算第一周开始<template> <div class="calendar1"> <p>第一个日历</p> <div> <p> <span>总共{{week_counts}}周</span> ...原创 2019-11-09 15:53:15 · 627 阅读 · 0 评论 -
vue嵌套路由之间的通信(eventbus实现组件之间相互传值)
效果:其实用法跟父子组件之间的通信方法相似哈,闲得时候研究了一下,其实更简单的方法可以用vuex1.先在main.js里生成一个自定义事件2.这是我路由设置的嵌套路由3.用法:A.子路由接收父路由上的值可以直接用this.$parent.value B.副路由接收子路由用自定义事件 子路由里的事件绑定 : this.$root.myE...原创 2018-12-07 10:09:06 · 3114 阅读 · 0 评论 -
vue父子组件之间的通信
一、把父组件里的值传给子组件1.父组件通过v-bind:绑定传输的值2.子组件用props接收1.父组件里的代码如下<template> <div class="parent_component"> <p>父组件里的时间{{starttime}}</p> <childcomponent class="ch...原创 2019-08-09 09:36:05 · 242 阅读 · 0 评论 -
vue项目中配置跨域问题
VueCli2.0版本1.找到config文件目录下的dev.env.js以及prod.env.js文件dev.env.js是配置本地环境的 prod.env.js是配置正式环境的分别在这两个文件下的API_URL中写下对应的正式服测试服域名下面的是正式服的域名2.请求是的时候通过 process.env.API_URL拿到需要的域名如果你的请求是通过a...原创 2019-08-20 13:52:52 · 2313 阅读 · 0 评论 -
axios二次 封装
前提准备下载axios 下载mint-uiaxios.js代码如下import axios from "axios"; //引入axios// 引入提示组件以及加载中的组件import { Toast,Indicator} from "mint-ui";//配置全局的路由axios.defaults.baseURL = process.env.API_URL...原创 2019-08-20 14:16:42 · 276 阅读 · 0 评论 -
vue动态的更改数组的值视图更新
1.通过7个特定的api方法来实现push pop shift unshift splice sort reverse如果我们想要实现上面说的效果就 这样写:vm.list.splice(2,1,5) //意思是把list这个数组的坐标为二的值开始,删除1个,然后添加一个52.通过改变对象地址的方法来实现说白了就是 vm.list=[1,5,3,4]...原创 2019-09-24 09:40:02 · 1837 阅读 · 0 评论 -
Vue关于 keep-alive的一些用法以及采坑记录
<keep-alive> 可以对不同的组件进行缓存 keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一 个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素<keep-alive>生命周期 activated:页面第一次进入的时候,钩子触发的顺序是created->mo...原创 2019-09-19 22:42:54 · 5494 阅读 · 0 评论 -
vue实现大转盘抽奖
效果图如下中奖提示代码如下<template> <div class="dial" v-wechat-title="$route.meta.title"> <div class="times">抽奖次数{{LuckyClick}}</div> <!-- 转盘包裹 --> <...原创 2019-09-24 17:31:45 · 12549 阅读 · 13 评论 -
vue实现九宫格抽奖游戏
效果图如下页面代码如下由于原点以及图片的位置都是动态的渲染进去的,这部分代码也不细说了主要是要计算好每个图片以及原点的偏移位置,找到规律<template> <div class="Sudoku" v-wechat-title="$route.meta.title"> <div class="container-out"> ...原创 2019-09-25 10:10:28 · 1714 阅读 · 0 评论 -
vue混入的用法
定义minxin//minxin.jsvar myMixin = { data: function () { return { message: 'hello', foo: 'abc' } }, created: function () { console.log('混入对象的钩子被调用') }, methods...原创 2019-09-26 09:20:59 · 657 阅读 · 0 评论 -
vue实现自定义的多选按钮
图示返回的选中列表是一个数组html部分<!-- 自定义多选 --> <div class="list" v-for="(item,index) in arr" :key="index" :class="item.ischeck==true?'active':''" @click="sel(index,item)">{{item.val}}&...原创 2019-07-22 10:32:15 · 2362 阅读 · 5 评论 -
vue项目中常用到的插件
1.vue-router: 页面路由,用于做单页面应用(SPA)2. axios: 一个很好的ajax封装集3.vuex: 数据状态管理。4. vue-lazyload :一个简单易用的 Vue 图片延迟加载插件;5.v-distpicker : 省市区三级联动6.mint-ui :移动端的UI库7.vue-scroller : 平滑滚动,拉动刷新和无限加载...原创 2019-08-03 09:25:20 · 603 阅读 · 0 评论 -
vue关于输入框的一些操作
关于输入框监听输入失去焦点的事件<template> <div class="orderinfo"> <input type="text" v-model="text" @blur="blur()"> </div></template><script>export default {...原创 2019-04-30 13:54:40 · 3295 阅读 · 0 评论 -
vue移动端,下拉刷新,上拉加载更多 插件
封装模板<template lang="html"> <div class="yo-scroll" :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}" @touchstart="touchStart($event)" @touchmove="tou原创 2019-03-15 13:32:53 · 3107 阅读 · 1 评论 -
Vue自定义指令动态更改标题方法
main.js添加如下 可使用第一种或者第二种方式// 自定义标题Vue.directive('title', { // 第一种方式 v-title="'haha'" 这样使用---传参方法 bind(el, binding, vunode) { document.title = binding.value }, //第二种方式 v-title da...原创 2019-03-14 20:16:36 · 2177 阅读 · 0 评论 -
vue 项目用better-scroll实现楼层滚动
先安装better-scrollnpm install better-scroll --save完整的代码<template> <div class="better_scroll" v-wechat-title="$route.meta.title"> <p>我是滚动1</p> <div class=&quo原创 2018-12-26 14:26:34 · 4250 阅读 · 1 评论 -
vue项目常用的插件安装命令
1.安装axiosnpm install --save axios2.安装饿了么uinpm i element-ui -s3.安装图片懒加载npm install vue-lazyload --save-dev main.js引入插件import VueLazyLoad from 'vue-lazyload'Vue.use(VueLazyLoad,{ ...原创 2018-12-14 14:38:47 · 3172 阅读 · 0 评论 -
vueX使用
<template> <div class="vuex"> <div>{{mes}}</div> <hr /> <!-- 得到state里数据的方法 --> <!-- 直接赋值 --> <h3>{{$st原创 2018-12-05 10:47:59 · 195 阅读 · 0 评论 -
vue组件使用(脚手架中使用)
父组件// 父组件<template> <div id="app"> <img src="./assets/logo.png"> <!-- 路由的方法 --> <!-- <router-view/> --> <!-- 组件的方法 ti原创 2018-11-27 11:36:33 · 569 阅读 · 0 评论 -
vue路由懒加载
//首页 { path: '/index', name: 'index', component: resolve => require(['@/components/index/index'], resolve), meta: { keepAlive: true ...原创 2018-11-23 17:29:47 · 171 阅读 · 0 评论 -
vue页面跳转携带参数
路由设置:import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import home from '@/components/home/home'Vue.use(Router)export default new Router({...原创 2018-09-13 17:31:30 · 2692 阅读 · 0 评论 -
vue实现全选反选
vue实现全选反选按钮<template> <div class="orderinfo"> <div id="example-3"> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="ja...原创 2019-04-30 14:53:38 · 610 阅读 · 0 评论 -
vue----mintui之上拉加载下拉刷新
1.注意点 注意父级元素一定要设置高度(如果顶部底部有固定元素减去顶部底部元素的高度) 否者下拉刷新会存在问题2.父级元素在css中加上该属性(-webkit-overflow-scrolling: touch;) 避免在IOS上存在问题截图如下:代码如下:<template> <div> <div class...原创 2019-05-11 09:31:31 · 403 阅读 · 0 评论 -
vue封装一个日历组件
图示封装的组件的代码如下<template> <div class="calendar"> <!-- 选择日历的弹出层 --> <div class="model_mask" v-show="showtimemask" @click="showmask1()"> </div> <...原创 2019-07-19 11:20:51 · 1439 阅读 · 0 评论 -
Vue自定义日历插件(可以选择日期区间段)
由于网上的插件没有符合项目的需求决定自己实现图示如下:默认选择今天的日期时间段1.默认状态(默认选择当前日期的时间段(蓝底背景色代表选中时间段),2.当前日期之前的时间不可以选择(禁用了点击事件))3.当日历上的操作的年份月份小于当前时间的年份月份时禁止点击上一月的按钮选中状态1.可以跨年分跨月份选择2.点击取消按钮时回复到默认的选择时间代码如下...原创 2019-07-11 14:24:33 · 7892 阅读 · 7 评论 -
vue实现选择一个时间段 比之前早的时间不能点击
选择一个时间段的思路如图部分代码如下<template> <div class="biji"> <div class="span" v-for="(item,index) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28...原创 2019-07-09 16:52:23 · 1662 阅读 · 0 评论 -
vue - $root,$parent,$children,$ref的用法
$root,$parent都能够实现访问父组件的属性的方法,两者的区别在于,如果存在多级子组件,通过$parent访问得到的是它最近一级的父组件,通过root访问得到的是根组件。$parent$parent在子组件中调用父组件的方法跟data里设置的数据父组件data() { return { parent: 1, }; }, meth...原创 2019-07-12 18:22:01 · 1085 阅读 · 0 评论 -
Vue 事件总线(eventbus)的使用方式
通过返回一个vue实例把事件绑定在vue实例上1.第一种写法1.先在main.js里生成一个vue实例//组件A中,触发事件 this.$root.myEvent.$emit("trans", value); //myEvent是main.js里设置的空的vue实例名//组件B中,监听事件that.$root.myEvent.$on("trans", ...原创 2019-07-12 17:46:01 · 650 阅读 · 0 评论 -
vue笔记之计算属性与监听属性
computed计算属性计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :get用法<div class="computed_watch"> <P>我的姓名:{{message}}</P> <P>我的姓名:{{reversedMessage}}</P></div>...原创 2019-07-09 11:56:16 · 275 阅读 · 0 评论 -
Vue自定义省市区三级联动(带全部)
1.如图(省市区加上全部联动)第一步:找到了一个普通的省市区先进行遍历更改2.把更改后的json文件放入vue项目中引入到你想要的页面3.剩余代码如下<template> <div class="percentloop"> <!-- 地区选择 --> <section class="secti...原创 2019-07-08 21:23:09 · 5306 阅读 · 0 评论 -
vue-i18n实现国际化语言
第一步安装vue-i18nnpm install vue-i18n --save第二步:新建一个语言包文件lang 里面分别是中文包跟英文包第三步 配置main.jsimport VueI18n from 'vue-i18n'/* 平台国际语言静态字典 */import LangEn from './common/lang/LangE...原创 2019-06-26 13:56:44 · 408 阅读 · 0 评论 -
vue 实现表单数据的增删改功能
图示如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2019-06-22 16:04:52 · 4958 阅读 · 0 评论 -
h5上传图片api(以vue开发为例)
效果图如下:(上传前上传后) <div class="up-box"> <div class="upimg"> <img :src="image" alt=""> <img src="../../../../assets/upimg.png&quo原创 2018-08-22 10:22:35 · 1589 阅读 · 0 评论