![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
kuke_kuke
想要成为一名优秀的、卓越的攻城狮
展开
-
重新理解vuex
store.js中基本代码:import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);const cart = {};export default new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {}, modules: {...原创 2020-01-03 16:59:01 · 172 阅读 · 0 评论 -
vue中实现表单校验
前提条件:vue-cli创建一个项目,安装async-validator(npm i async-validator -S)在components中新建FormTest.vue组件,并在App.vue中引入。一个form表单需要form、formItem、input,初步代码如下:formTest:<template> <div> for...原创 2020-01-02 21:00:11 · 3348 阅读 · 1 评论 -
数据双向绑定原理
所谓双向数据绑定,无非就是数据层和视图层中的数据同步,在写入数据时视图层实时的跟着更新,具体描述:实现mvvm的双向绑定,是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,出发相应的监听回调。就必须要实现以下几点:实现一个数据监听器Observer,能够对数据对象的所有属性进...转载 2020-01-02 11:09:03 · 759 阅读 · 0 评论 -
关于vue中slot的理解
将父组件的内容放到子组件指定的位置叫做内容分发// 在父组件里使用子组件<son-tmp> <div>我是文字,我需要放到son-tmp组件里面指定的位置</div></son-tmp>1.单个插槽父组件:father.vue<template> <div id="app"> <son-原创 2019-01-07 10:57:29 · 3505 阅读 · 4 评论 -
vue项目加载优化之懒加载,以及Loading chunk {n} failed解决方法
一、懒加载懒加载:随时用随时加载,避免单页面应用一次性加载所造成的时间过长。import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/', redirect: '/login' ...原创 2019-01-07 10:08:18 · 11912 阅读 · 0 评论 -
基于Elementui的日期选择器时间范围限制
一般在实际开发场景中我们需要对时间选择做一些限制,如不能选择今天之前的时间、不能选择今天以后的日期、限制日期不能大于开始日期等等。日期组件<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0"> </el-date-picker...转载 2019-01-07 09:25:53 · 2605 阅读 · 2 评论 -
vue项目中的elementui的表格中画甘特图
最近的项目要求甘特图在elementui中实现,在此做出总结。性能限制,不能传入太多的数据。需要条件:时间:计划开始时间、计划结束时间、开始时间、结束时间最大时间和最小时间。思维:渲染表格头、渲染天数、填充色块。实现简单的表格&lt;el-table :data = "tableData" border&gt; &lt;el-table-column label="...原创 2018-11-19 20:11:39 · 12137 阅读 · 6 评论 -
用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装:实现动态传入内容,实现取消,确认等回调函数。首先写一个基本的弹窗样式,如上图所示。在需要用到弹窗的地方中引入组件:import dialogBar from './dialog.vue'components:{ 'dialog-bar': dialogBar,},<dialog-bar></...原创 2018-04-10 17:52:48 · 106786 阅读 · 10 评论 -
vue中引用高德地图API
调用高德地图的API,首先注册高德开发平台的账号,称为高德地图开发者,创建应用后申请key(步骤如下): 进入高德开发平台——进入右上角控制台——进入做上角应用管理——创建key 安装高德地图组件: vue-amap 引入组件:import AMap from 'vue-amap'Vue.use(AMap)初始化vue-amap,放入对应的key值,在插件中加入所需要的搜索和定...原创 2018-02-28 08:42:05 · 2130 阅读 · 0 评论 -
vuex store的运用
vuex用来管理vue的所有组件状态。 首先下载vuex,”vuex”:”^3.0.1”,运用”vuex-persistedstate”来对数据进行缓存。下载”vuex-persistedstate” 在文件中引入:(新建一个store文件夹,在文件夹下的index.js文件进行如下编写)import Vue from 'vue'import Vuex from 'vuex'impor...原创 2018-02-27 19:47:35 · 26668 阅读 · 4 评论 -
vue组件之间的传值
组件传参: 组件实例的作用域是孤立的。这意味着不能在子组件的模块中直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递。 如在父组件中向子组件传值:<headerBar message = “hello” />在子组件中需要使用props获取到父组件的传值:props: [‘message’]子组件向父组件传递数据,如当input发生变化时,向子组...原创 2018-02-27 19:14:33 · 980 阅读 · 0 评论 -
移动端因软键盘的原因,固定在页面底部的按钮被弹起解决方案
问题描述:移动端,当需要输入内容时,软键盘弹出往往会导致固定在底部的按钮、导航栏等被弹起,如图: 解决思路: 当键盘弹起时隐藏掉按钮,键盘隐藏时按钮显示 监测键盘是否弹起(浏览器页面是否发生变化) 代码: 1、定义一个底部按钮 <div class="returnbtn" v-show="isOriginHei" :class="{act...原创 2018-01-17 15:58:26 · 8437 阅读 · 3 评论 -
实时监控文本框输入字数
需求:实时监控文本输入框的字数,并加以限制 1、实时监控当前输入字数,直接使用onkeyup事件方法,给输入框加maxlength属性限制长度。如: div> textarea id="txt" maxlength="10">textarea> p>span id="txtNum">0span>/10p> div> var tx原创 2018-01-17 17:34:56 · 2927 阅读 · 0 评论 -
vue移动端使用video标签
vue移动端使用video标签原创 2018-01-04 11:15:33 · 18151 阅读 · 0 评论