![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 63
Vue学习
年轻即出发
努力努力在努力!
展开
-
highcharts 3D饼图
highcharts 3D饼图在vue中的应用!原创 2021-11-24 13:30:20 · 25740 阅读 · 1 评论 -
npm启动导入vue的项目
npm启动导入vue的项目1.从github上下载.zip文件,然后解压,或者时代码库中进行git clone代码;2.在cmd进入文件夹;3.安装项目:npm install4.编译:npm run serve浏览器中打开localhost:8080...原创 2020-04-06 22:32:41 · 1611 阅读 · 0 评论 -
vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效
vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效html:<ul id="app"> <li v-for=‘item in items‘ @click="toggle(item)"> <span v-if=‘item.show‘>{{item.content}}</span> </li&g...转载 2020-04-17 11:16:56 · 2120 阅读 · 1 评论 -
Vue中结合ElementUI实现:限制输入框只能输入正整数
Vue中结合ElementUI实现:限制输入框只能输入正整数如果觉得对您有所帮助,麻烦您动动您的小手指给点个赞呗(*^▽^*)input输入框中禁止输入小数和负数(*只允许输入正整数 *)最近在做项目中碰见了这么个问题,需要输入数字,但是只能输入正整数,在网上找的没找到自己想要的,所以就自己想了两个办法,在这里跟大家分享一下。(因为是刚毕业,第一次写博客,所以有点生疏,请各...转载 2020-04-17 11:24:08 · 5598 阅读 · 0 评论 -
Vue子组件调用父组件的方法
Vue子组件调用父组件的方法Vue中子组件调用父组件的方法,这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template&g...转载 2020-04-17 10:59:43 · 404 阅读 · 1 评论 -
VUE判断当前设备是PC还是移动端
VUE判断当前设备是PC还是移动端实际开发工作中会经常遇到一个需求,就是判断当前登录网页的设备是PC还是移动,要求PC端和移动端显示的是不同的网页内容。那么我们就需要对当前登录设备进行判断。使用 navigator.userAgent 字符串检测我是在PC端开发完接到要做移动端的需求,而且移动端只有一个页面,我就统一放在了一个文件夹内。首先在 app.vue 文件内,判断当前设备是...转载 2020-04-15 18:45:06 · 2996 阅读 · 0 评论 -
vue中限制input只能输入数字
vue中限制input只能输入数字方法1:方法2转载 2020-03-10 17:13:15 · 1279 阅读 · 0 评论 -
vue-cli3/4脚手架配置与安装
前言:这个搭建脚手架的话实际是我们创建一个新项目的第一步,当然,现在脚手架4.0都出来了,经过使用后发现跟我们之前的3.0使用方法是答题一样的,其中用vue-cli3.0来搭建我们的项目的话又分为两种,一种是直接用3.0的typescript的方法来创建使用项目,但是实际生活中我们会发现,这种语法应用还是比2.0那种语法来说难度更高一些,所以我们这里来说一说我们使用了vue3.0...原创 2020-02-26 22:00:30 · 1089 阅读 · 0 评论 -
Vue子组件向父组件传值(this.$emit()方法)
子组件使用this.$emit()向父组件传值首先必须在父组件中引用子组件,然后实现传值第一步 在父组件中引入子组件使用import引入组件import indexImportOrder from './components/indexImportOrder'声明//定义组件components:{ indexImportOrder,},使用<in...转载 2020-02-26 21:13:21 · 12885 阅读 · 3 评论 -
Ant design Vue学习
1、allowClear 允许清除选项的内容2、a-form-item必须放进a-col里面,更多的内容放到a-form-item里面<a-form-item label="标的">label的值,是代表前面红框中的字:3、@change选项改变的事件<a-col :md="4" :sm="8"> <a-form-item labe...原创 2020-01-15 15:33:27 · 3546 阅读 · 0 评论 -
vue生命周期
beforeCreate详细:在实例初始化之后,数据观测和event/watcher时间配置之前被调用created详细:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el属性目前不可见。beforeMount详细:在挂载开始之前被调...原创 2019-12-29 14:49:49 · 104 阅读 · 0 评论 -
ant-design-vue Table组件和分页组件的自定义
ant-design-vue Table组件和分页组件的自定义vue.jsantdesign阅读约 3 分钟最近在个新项目里开发CMS端,vue技术栈和antd的UI框架表格table使用链接:antd的table分页pagination使用链接:antd的pagination表格单独使用时,自带简单分页,只包含 上一页, 页面码, 下一页,例如:但是有时候产品和甲方的...转载 2019-12-28 23:43:26 · 10933 阅读 · 9 评论 -
Vue中结合ElementUI实现:限制输入框只能输入正整数
Vue中结合ElementUI实现:限制输入框只能输入正整数如果觉得对您有所帮助,麻烦您动动您的小手指给点个赞呗(*^▽^*)input输入框中禁止输入小数和负数(*只允许输入正整数 *)方法一:利用禁止按键的方法,主要是依靠禁止按下减号以及小数点来完成的首先要监听keyup(键盘按下)事件,因为elementUi上面的input组件监听事件是没有这个事件的,所以可能会报错,所以我们需...转载 2019-12-28 23:27:17 · 1697 阅读 · 0 评论 -
Vue中的@blur/@focus事件
@blur 是当元素失去焦点时所触发的事件@focus是元素获取焦点时所触发的事件<template> <div> <!-- @blur 当元素失去焦点时触发blur事件 --> <div> <input type="text" placeholder="请输入内容" @blur...原创 2019-12-28 23:15:44 · 42226 阅读 · 0 评论 -
Vue表格数据筛选排序
目录代码案例 v-model v-on v-for 计算属性 sort()方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue练习</title> <style type="text...转载 2019-12-28 23:00:20 · 2189 阅读 · 0 评论 -
Vue实现倒计时/遮罩层
1、倒计时<div class="timers" style="text-align:center;font-size:18px;font-weight:bold;"> <p v-if="sendAuthCode" class="c-right" @click="getCode" >关闭</p> <p v-if="!sendAuthCo...原创 2019-12-27 17:45:17 · 846 阅读 · 0 评论 -
解决:'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
使用Vue,安装依赖的时候会遇到这种错误:需要将node_modules删除重新安装,若一直错误,一直重复操作:npm install----->npm run build原创 2019-12-23 10:02:00 · 1817 阅读 · 0 评论 -
热重载 热更新
热重载所谓热重载就是页面每次改动,不需要手动去刷新,可自动刷新。使用webpack的Hot Module Replacement API,Vuex支持开发过程中热重载mutation、module、action、getter。热更新热更新:浏览器的无刷新更新(即webpack里的HMR-hot module replacement模块热替换)【允许在运行时替换,添加,删除各种模...原创 2019-12-20 16:14:30 · 2088 阅读 · 0 评论 -
Vue风格指南
1、组件名为多个单词,根组件APP以及transition和component之类的Vue内置组件除外2、组件的data必须是一个函数:data: function () { return { listTitle: '', todos: [] }}3、prop定义应该详细。细致的prop 定义有两个好处:它们写明了组件的 API,所以很容易看懂组件...原创 2019-12-19 17:57:58 · 115 阅读 · 0 评论 -
'vue-cli-service' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
在运行vue的项目时,报’vue-cli-service’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。原因是没有安装依赖:npm install,如果你下载的淘宝镜像,也可以cnpm install。...原创 2019-12-16 17:09:00 · 18738 阅读 · 0 评论 -
Vue指令之 v-for的使用
1.迭代普通数组在data中定义普通数组data:{ list:[1,2,3,4,5,6];}在html中使用 v-for 指令渲染<p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p>2.迭代对象数组在data中定义对象数组data:{ list:[1,2,...转载 2019-12-16 10:24:23 · 1272 阅读 · 0 评论 -
this.$set的正确使用
this.$set的正确使用这段时间工作上经常操作数组数据,为data中的某一个对象添加一个属性,并且要求实时更新视图数据,这个时候首先想到的是 vue.set() 方法(注:当发现model上的数据发生改变,而页面上的视图数据没有改变,推荐使用该方法。),该方法的使用首先要在页面引入vue,应该这样写:import Vue from 'vue',这样才能在组件全局获取到vue这个实例对象。如...转载 2019-12-13 11:07:19 · 742 阅读 · 0 评论 -
Vue实现购物车全选及价格计算
《vuejs实战》这本书中5.5是一道实战题:利用计算属性、指令等知识开发购物车。练习1:在当前示例基础上扩展商品列表,新增一项是否选中该商品的功能,总价变为只计算选中商品的总价,同时提供一个全选的按钮。练习2:将商品列表list改为一个二维数组来实现商品的分类,比如可分为“电子产品” “生活用品” 和“果蔬”,同类商品聚合在一起。提示,你可能会用到两次v-for。1、购物车&...转载 2019-11-01 15:58:44 · 2878 阅读 · 0 评论 -
Vue源码详细解析
Vue源码详细解析教程包含了Vue中从数据observe到模板解析、transclude、compile、link、指令的bind、update、dom批处理更新、数组diff等等环节,基本涵盖了Vue整个生命周期过程。订阅新文章请watch本项目。文章 主线剧情 Vue源码详细解析(一)--数据的响应化 主要介绍了Vue如何实现数据的相应化,以及面对getter/setter...转载 2018-11-06 18:45:21 · 257 阅读 · 0 评论 -
vue-router 2.0 常用基础知识点之router.push()
router.push(location)http://www.jianshu.com/p/ee7ff3d1d93d除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。router.push(location)想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 histo...转载 2018-11-06 18:42:51 · 136 阅读 · 0 评论 -
Vue2中ref属性的用法
Vue2中ref属性的用法 最近写东西遇到了莫名其妙的问题,用ref属性原以为它会获得一个数组http://www.jianshu.com/p/05c863ec2a23 // html <ul> <li ref="refCon">1</li> <li ref="refCon">2</转载 2018-11-06 18:41:38 · 931 阅读 · 0 评论 -
Vue.js中 watch 的高级用法
假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> ne转载 2018-11-06 18:01:58 · 96 阅读 · 0 评论 -
为什么要用PolyFill(JS中的修补匠)
var users = [{name:”zhangsan”,age:18},{name:”jack”,age:20}]; 这是一个对象数组。如果我们要查询名字为”jack”用户的年龄、常用的办法是什么? 很多同学会想到遍历这个数组。我们来看看新的语法:var getUser = users.find(function(finder){ return finder.name...转载 2018-10-31 16:45:30 · 6108 阅读 · 0 评论 -
vue中的 ref 和 $refs
vue中的 ref 和 $refs如图,ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:在上面的例子中,input的引用信息为input1 ,$refs 是所有注册过的ref的一个集合,console.log(this.$re...转载 2018-11-06 18:48:17 · 125 阅读 · 0 评论 -
最新的vue没有dev-server.js文件,如何进行后台数据模拟?
参照了别人写的记录一下最新的vue里dev-server.js被替换成了webpack-dev-conf.js在模拟后台数据的时候直接在webpack-dev-conf.js文件中修改第一步,在const portfinder = require(‘portfinder’)后添加 //第一步const express = require('express')const a...转载 2018-11-05 20:11:48 · 79 阅读 · 0 评论 -
Axios发送请求时params和data的区别
在使用axios时,注意到配置选项中包含params和data两者,以为他们是相同的,实则不然。 因为params是添加到url的请求字符串中的,用于get请求。 而data是添加到请求体(body)中的, 用于post请求。比如对于下面的get请求:axios({method: "get",url: "http://www.tuling123.com/openapi/a...转载 2018-11-01 10:27:39 · 7334 阅读 · 0 评论 -
vue移动端(踩坑记)
不想写项目了,总结一下今天学的............................... 1 搭建项目生成vue-cli脚手架components:包含所有的页面组件vuex:包含vuex相关文件modules:存放每个页面单独的state和mutationstatic:静态文件存放(图片和图标库等)index.html:渲染的页面main.js:应用入口点...原创 2018-11-14 18:45:50 · 306 阅读 · 0 评论 -
Vue2.0 搭建Vue脚手架(vue-cli)
介绍Vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层,采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。阅读之前需要了解的知识htnl css javascript node.js环境(npm包管理工具) webpack打包工具安装node.js从node官网下载并安装node,安装步骤很简单,只...转载 2018-12-18 10:12:04 · 77 阅读 · 0 评论 -
vue项目关闭eslint校验
vue项目关闭eslint校验简介eslinteslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格。官方文档:https://eslint.org这篇文章总结了eslint的规则:Eslint规则说明有了eslint的校验,可以来规范开发人员的代码,是挺好的。但是有些像缩进、空格、空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了。所以,我还...转载 2019-03-19 15:57:53 · 560 阅读 · 1 评论 -
vue如何实现页面键盘事件(附代码)
本篇文章给大家带来的内容是关于vue如何实现页面键盘事件(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.enter.native="submitForm('loginD...转载 2019-07-21 21:00:28 · 25585 阅读 · 3 评论 -
axios全攻略
axios全攻略2017年12月22日 11:15:33 辰煦湲 阅读数:1740 标签: axios 更多个人分类: vue.jsaxios 简介 浏览器兼容性 引入方式 使用举例 1 执行GET请求 2 执行POST请求 3 执行多个并发请求 axios API 1 axiosconfig 2 axiosurl config 3 请求方法别名 4...转载 2018-10-31 15:23:06 · 136 阅读 · 0 评论