vue
scorpio_h
这个作者很懒,什么都没留下…
展开
-
处理VUE移动端输入法遮挡input输入框的问题
1、tmplate部分<input v-model="id" @blur="blurIn">2、methods方法blurIn() { window.scrollTo(0, Math.max(this.scrollHieght - 1, 0))}3、computed部分computed: { scrollHeight() { return ( document.documentElement.scrollTop.原创 2020-10-09 16:45:42 · 2566 阅读 · 1 评论 -
vue单页面应用打开新窗口显示跳转页面的方法
一般单页面应用,例如vue都是通过vue-router来做跳转,不会像多页应用一样另起新页面显示,但是也不排除一些业务上的需要。一般情况下单页面应用的路由跳转我们都是通过简单的一句话搞定:this.$router.push({name: 'abc'})以上是常规的通过路由的页面跳转方法。我们现在的需求是另外开启一个新页面来显示跳转到的页面,原本的窗口保持页面不变。const { h...原创 2018-05-22 09:47:00 · 32289 阅读 · 4 评论 -
vue 兄弟组件之间传数据之通过父组件来传递
组件A向组件B传递信息,通过父组件的方式:A 把信息发给父组件: this.$parent.msg = this.aMsg父组件接收信息并传递给B:export default { data () { return { msg: '' } }}B组件接收父组件传递过来的数据:{{bMsg}}export default {原创 2017-05-09 16:58:31 · 718 阅读 · 0 评论 -
vue 兄弟组件之间传数据之$emit 和 $on 组件通信
Vue2-单一事件管理组件通信 //准备一个空的实例对象 var Event = new Vue(); //组件A var A = { template: ` 我是A组件的数据->{{a}} `转载 2017-05-09 10:46:54 · 1424 阅读 · 0 评论 -
vue 聊天页面实现滚动条实时滚动至最底部
1、有聊天记录显示再页面会引起dom数变化,此时使用 nextTick()2、获取新插入进来的dom var container = this.$el.querySelector("#chatContainer>li:last-child");3、滚动到该位置container.scrollIntoView();原创 2017-06-21 14:53:25 · 3958 阅读 · 0 评论 -
mockjs在vue内使用心得
1、 加载模块npm install mockjs2、新建一个mock文件,设置好拦截信息import Mock from 'mockjs';export default Mock.mock('msg', { 'name' : '@name', 'age|1-100': 100, 'color' : '@color'});@name 是随机生成原创 2017-07-11 09:25:51 · 4601 阅读 · 0 评论 -
父组件调用子组件的方法以及子组件调用父组件的方法
1、父组件调用子组件的方法父组件中:(关键字$refs、ref)this.$refs.childFunc.childAlert(); 子组件中:childAlert () { alert('被父组件调用到了!')}2、子组件调用父组件的方法父组件中:fatherfunction(val) { alert(val)}子组件中:(关键字$原创 2017-07-13 10:01:14 · 1342 阅读 · 0 评论 -
几款适合vue移动端的第三方小组件
1、UI组件 各种弹窗或者滑动功能首推:Mint UI,简洁好用,其次可以选YDUI,均为vue单独适配 Mint UI地址:http://mint-ui.github.io/#!/zh-cn YDUI地址:http://www.ydui.org/2、图像裁剪 功能强大的cropper肯定不用说了,也有为vue单独适配的版本vue-croppe原创 2017-08-10 11:29:11 · 9281 阅读 · 0 评论 -
vue单页面兄弟组件信息传递
1、建立中间“桥梁” channel.jsimport Vue from 'vue'let vm = new Vue()export default vm2、链接两个需要传递的组件,给双方都导入“桥梁”import channel from '@/assets/common/channel'3、发送端使用$emit方式channel.$emit('testFun'原创 2017-08-14 17:09:31 · 596 阅读 · 1 评论 -
vue+elementUI版时间范围选择器(具备昨天、本周、上周、本月、上月等快捷选择按钮)
<template> <div> <el-date-picker v-model="range" type="datetimerange" :placeholder="placeholder || '请选择时间范围'" @change="searchTime" > </el-da...原创 2018-01-27 17:07:22 · 19020 阅读 · 1 评论 -
基于axios的ajax请求封装
import axios from 'axios'// 默认请求配置let defaultConfig = { method: 'GET', baseURL: process.env.BASE_API + process.env.API_BASE_URL, timeout: 3000, withCredentials: true, // 配置请求头 // header...原创 2018-02-27 16:40:40 · 1274 阅读 · 0 评论 -
vue内i18n 的用法
i18n是一个制作国际化项目的好用的组件1、安装组件npm install vue-i18n --save2、再main.js里进行配置import VueI18n from 'vue-i18n'const i18n = new VueI18n({ messages: { 'zh-CN': require('./common/lang/zh'), 'en-US': requir...原创 2018-03-01 14:23:20 · 1907 阅读 · 0 评论 -
vue异步引入百度地图API
看了下官网上的方法,是采用原生的写法,不适用于vue异步引入的好处是baiduAK可以方便管理import { baiduAk } from '@/settings'export function map() { /* eslint-disable */ return new Promise(function(resolve, reject) { if (typeof...原创 2019-06-18 11:47:23 · 844 阅读 · 2 评论 -
vue2.0 全局组件和局部组件
全局组件主要是component放外面,全局使用。局部组件主要是放Vue实例对象里,只能这个Vue元素内使用。组件通过extend创建。注意:exntend组件内的data是方法、方法、方法全局创建组件全局调用:<!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2017-02-26 14:02:17 · 820 阅读 · 0 评论 -
vue2.0 生命周期图以及栗子
先上个图。。后面有栗子,可直接复制运行演示。栗子: 生命周期demo {{msg}} window.onload=function(){ new Vue({ el:"#b原创 2017-03-01 22:47:37 · 462 阅读 · 0 评论 -
vue 2.0 键盘按键栗子
Document Vue.config.keyCodes.a=65; window.onload=function(){ new Vue({ el:"#box", data:{ }原创 2017-03-01 23:30:44 · 535 阅读 · 0 评论 -
vue 2.0 单一事件中心管理组件通信
1、声明var Event=new Vue();2、传递数据Event.$emit(事件名称, 数据)3、接收数据,注意this指向Event.$on(事件名称,function(data){//data}.bind(this));栗子: Document原创 2017-03-02 23:50:51 · 443 阅读 · 0 评论 -
vue 2.0 transition学习笔记
运动东西(元素,属性、路由....)class定义:.fade-enter{} //初始状态.fade-enter-active{} //变化成什么样 -> 当元素出来(显示).fade-leave{}.fade-leave-active{} //变成成什么样 -> 当元素离开(消失)如何animate.css配合用?原创 2017-03-04 00:04:52 · 4116 阅读 · 0 评论 -
vue2.0 v-bind的用法
Vue.component('todo-item', { props: ['todo'], template: '{{ todo.text }}'})var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { text: '蔬菜' }, { text: '奶酪' }, { t原创 2017-03-18 12:48:49 · 3193 阅读 · 0 评论 -
vue2.0 自定义指令
Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为Vue.directive('my-directive', { bind: function(){ //做绑定的准备工作 //比如添加事件监听器,或是其他只需要执行一次的复杂操作 }, inserted: function(){ //... }, updat原创 2017-02-25 22:14:56 · 898 阅读 · 0 评论 -
vue2.0 过滤器用法
vue2.0取消了大部分过滤器,现在基本靠手写规则了。。例如,以前的 limitBy 2 ,只显示数字的前两个数据,现在必须通过computer手写方法。如下: Document {{value}} {{key}}原创 2017-02-25 17:26:23 · 1450 阅读 · 0 评论 -
vue2.0 路由 学习笔记
vue2.0 路由:http://router.vuejs.org/zh-cn/index.html基本使用:1. 布局主页2. 路由具体写法,重定向{path:'*', redirect:'/home'} Document .router-link-active{ font-原创 2017-03-08 22:52:31 · 3087 阅读 · 0 评论 -
MAC OS的vue2.0环境搭建
1、打开终端运行以下命令,在mac系统下安装brew:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"2、mac OS 安装nodejsbrew install nodejs3、获取nodejs模块安装目录访问权限su...原创 2017-02-28 15:18:51 · 1183 阅读 · 0 评论