1.实现的效果 输入关键字后,根据输入的关键字实时显示搜索的结果,按回车键时也进行搜索 2.原理: 通过时间戳+定时器+一个全局变量实现.代码量很少比较易懂. 用户输入时触发keyup事件,并调用事件函数.事件函数被调用后会生成对应的event.timeStamp,这个值在事件函数体内一直不会变. 将event.timeStamp赋给全局中定义的this.lastTimeStamp.这个this.astTimeStamp是一个全局的变量,这样这个值在每次事件触发时都会被改变. 如果在1s内,th…

前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript 在 2018年 势头迅猛,可谓遍地开花. Vue3.0 将使用 TS 重写,重写后的 Vue3.0 将更好的支持 TS.2019 年 TypeScript 将会更加普及,能够熟练掌握 TS,并使用 TS 开发过项目,将更加成为前端开发者的优势. 所以笔者就当然也要学这个必备技能,就以 边学边实践…

自己遇到的坑: InputNumber 计数器的change事件定义时如果不传入参数value,会产生this.num不同步的问题 <template> <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> </…

1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1.如果安装过旧版的VUE CLI需要先卸载掉 //三选一即可 npm uninstall vue-cli -g npm uninstall vue-cli -g yarn global remove vue-cli 2.VUE CLI3需要node.js8.9版本及以上 官方链接>> 2.vue…

此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在赘述,关于 npm 下载速度慢的问题的解决办法: 如果安装了cnpm,要先清除:cmd运行 npm uninstall cnpm -g  清除淘宝镜像cnpm cmd运行 npm config set registry https://registry.npm.taobao.org 然后运行 npm…

vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于nodejs,所以要先安装nodejs.从nodejs官网下载二进制包,然后把nodejs的bin目录加到系统PATH,这样就由全局的npm命令可以调用了. npm install -g @vue/cli #安装vue-cli npm install -g cnpm --registry=https:…

1.安装mockjs依赖 (c)npm install mockjs --save-dev 2.安装axios(Ajax) (c)npm install --save axios 3.项目目录 4.设计到的相关文件 fetch.js(封装axios) import Qs from 'qs'; import axios from 'axios'; // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, /…

demo:时间转换 1.目录 <1>在src文件夹下新建文件夹prototypefns--------在此文件夹创建util.js, <2>在prototypefns下新建文件夹jsTime--------在此文件夹下新建datatime.js datatime.js /** * 将时间转换成时间戳 * @param DateTime 为时间格式下的时间 2018/06/14 13:00:00或2018-06-14 13:00:00 * @returns {number} * @c…

使用场景:有适配pc端改为适配pc端和移动端,使用2套css 代码实现App.vue created: function () { if(document.documentElement.clientWidth > 640){ require('./style/index.scss'); this.plaform = 'pc'; }else{ require('./style/mobile.scss'); this.plaform = 'mobile'; } 注意: 为2套css分别指定不同的父…

父子组件通信 父 通过props属性给 子传递数据 子 操作 父  this.$parent.XXX 子通过$emit传递参数 或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可以实现兄弟组件之间的通信 vue-bus安装 (c)npm install vue-bus 引入 import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus); 应用: 发送: this.$bus.$emit('closeM…