Vue
iKendall
kk.
展开
-
VueCLI3如何更改安装时的包管理器
目前常用的包管理器有yarn 和 npm,在我们利用vue cli3创建vue项目时会让我们选择包管理器,有的小伙伴在创建好项目后又后悔了,想要改变项目的包管理器,那么该怎么办呢?判断自己的项目用的npm还是yarn在执行完 vue create xx 后如果显示如下 npm run serve 则表示你使用的是npm创建的项目。如果显示如下 yarn serve 则表示此项目为yar...原创 2019-04-30 20:10:28 · 1824 阅读 · 4 评论 -
v-model的修饰符和使用
转自博客园https://www.cnblogs.com/huzhuo/p/7467623.htmlv-model的修饰符 v-model.lazy 只有在input输入框发生一个blur时才触发v-model.trim将用户输入的前后的空格去掉v-model.number 将用户输入的字符串转换成number在input textarea select中使用以下代码都没有写出js...转载 2019-05-22 19:29:29 · 331 阅读 · 0 评论 -
Vue项目加载不出页面,router-view渲染不出页面
最近在回顾vue-router的时候踩到一个坑,router-view不能渲染下面是router的代码仔细看会发现……第4行和第14行……应该写成component而我写成了comment,就是一个单词的原因 导致加载不出来……逛论坛发现,还有很重要的一点,那就是该写成routes的地方一定一定不要写成其他(这里不举例了,自行想象,避免误导)改正后...原创 2019-06-06 21:41:15 · 15836 阅读 · 6 评论 -
解决Vue项目中进入某个页面没反应但url能改变的问题
情景:我们有时候写路由跳转的时候,可能会遇到点击首页导航栏跳转到某页面,再次点击现在页面导航栏的首页项,却发现页面回不去了,但地址栏url却变化了,刷新页面的话才能正常显示。首推方法!很简单——检查页面及组件页中的 data 里面有没有写 return一定要写对哈!!!在 vue 组件中,data 必须写为函数,且需要用 return 来返回参数。但是当 data 为空时,即使不写 r...原创 2019-07-23 17:38:08 · 3116 阅读 · 3 评论 -
You are using the runtime-only build of Vue where the template compiler is not available. Either pre
作者:LeonWuV来源:CSDN原文:https://blog.csdn.net/wxl1555/article/details/83187647在升级脚手架到vue-cli3.0版本的时候(我是在打开用vue-cli3.0搭建的vue项目时报错)出现了这个报错:[Vue warn]: You are using the runtime-only build of Vue where ...转载 2019-07-23 23:44:15 · 331 阅读 · 0 评论 -
vue中使用v-for渲染的页面无法通过v-if或v-show动态隐藏
当你的数剧层次太多,vue就没办法自动刷新这时候可以手动强制刷新this.$forceUpdate();转载 2019-07-29 12:26:31 · 1817 阅读 · 0 评论 -
vue用axios向后台请求数据
1.安装使用npm全局安装axiosnpm install axios 使用 cnpm 安装 axios(建议)cnpm install axios ps:当然,用其他包管理工具也不是不可以,比如yarn,若用yarn的话如果没记错现在用 yarn add axios2.在main.js里import axios并将其挂载到Vue实例上(应该是main.js)import ax...原创 2019-07-19 19:44:12 · 493 阅读 · 0 评论 -
v-for循环输出图片及信息展示
有时我们写页面时可能会遇到要求图片展示的,类似下图这种如果是用vue写前端的话那就很方便了,vue中的v-for指令(列表渲染)这里先附上v-for官方文档以下面这个小demo为例:HTML代码:<template> <div id="app"> <div class="card" v-for="message in messages" :...原创 2019-07-20 13:55:40 · 8504 阅读 · 2 评论 -
vue中使用bootstrap4踩坑之旅
bootstrapvue官网bootstrap4中文官网以下文章记录本人的踩坑过程,最后已亲测有效,但不保证是最简便的方法,最好的建议是去bootstrapvue官网看文档直接尝试。一、引入jquery1.安装jQuerynpm install jquery --save或yarn add jquery --save2.在webpack.base.config.js 添加内...原创 2019-07-20 22:54:18 · 4497 阅读 · 0 评论 -
Bootstrap4中Grid栅格系统CSS中 col-sm- col-md- col-lg- 的意义
注意:如今大部分手机是<576px的,我查阅很多博客看他们好多写的是.col-xs-,我按照那种方法试不行,我用的是bootstrapvue4.3根本没有什么.col-xs- 这一说于是亲自用浏览器F12手机模式调试,亲测.col-对于手机才可行!这点bootstrap更新了,一定要注意别踩坑!说明:col- 列;-*表示占列,即占自动每个row分12列栅格系统比;栅格...原创 2019-07-21 16:14:26 · 3185 阅读 · 0 评论 -
Vue刷新当前路由的一种方式
转自 https://www.jianshu.com/p/73923ed22f7e在vue中碰到了需要刷新当前页面的需求,虽然可以使用this.$router.go(0); 和location.reload()像f5一样刷新,但是不太好,有这里推荐新的方法。用provide /inject组合实现原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成...转载 2019-07-27 08:48:16 · 309 阅读 · 0 评论 -
Vue CLI 3搭建项目详解
vue cli 3 介绍上次用vue的时候,vue cli的版本还是2,对应指令还是 vue init < 模板名称 > < 项目名称 >vue-cli提供的模板有:webpack 一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。webpack-simple...转载 2019-04-30 19:46:34 · 291 阅读 · 0 评论 -
Vue中splice的运用
转自https://blog.csdn.net/qq_42043377/article/details/83003159感谢博主分享,真是让人秒懂哇~其实说白了 vue中的splice和javaScript中的是一样的splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值(该方法会改变原始数组)index:数组开始下标len: 替换/删...转载 2019-05-04 20:29:23 · 2828 阅读 · 0 评论 -
vue-cli 3.0的调整
转自简书大佬虚无面孔,感谢!原文地址在此 安装命令调整//原先npm install -g vue-clivue init <template-name> <project-name>//改为npm install -g @vue/cli# oryarn global add @vue/clivue creat...转载 2019-03-08 07:54:52 · 649 阅读 · 0 评论 -
MVVM的关系图解
#MVVM拆分解释为:*Model:负责数据存储*View:负责页面展示*View Model:负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图处理#MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离,使各自的职责更加清晰,后期代码维护更加简单#用图解的形式分析Ajax请求回来数据后直接操作Dom来达到视图的更新的缺点,以及使用MVVM是如何来解决这个缺点...原创 2018-11-20 20:29:14 · 1037 阅读 · 0 评论 -
vue+element select筛选框表单重置resetFields()失效
本文转载自点此直达,感谢作者今天下午在学习vue过程中遇到了一个小问题,那就是select表单重置利用resetField()竟然失效,百思不得其解,便去网上查找解决方法,没想到原来是自己在el-form标签忘记加上 ref,看来自己的知识掌握的还是不牢固啊……看到有篇博客写的不错,把resetFields()失效的几种原因详细列出,特此告明作者转载算是作为自己的笔记吧,同时也分享给大家。...转载 2019-02-14 17:41:43 · 9389 阅读 · 4 评论 -
Vue项目中设置背景图片方法
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式:background:url("../../assets/head.jpg");这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题:1、在data中定义如下:export d...转载 2020-03-02 15:24:50 · 25310 阅读 · 5 评论 -
如何让你的.vue在sublime text 3 中变成彩色?
注:本文转自知乎——青鲤,原文链接1.下载文件 链接 GitHub - vue-syntax-highlight2.sublime菜单栏->首选项->浏览插件,打开Packages文件夹3.新建Vue文件夹,把步骤1下载的文件放里面4.sublime中使用快捷键Ctrl+Shift+P,输入vue5.重启(就是关了再开)sublime,你的vue就是彩色的了...转载 2019-01-29 17:27:40 · 464 阅读 · 0 评论 -
vue和element框架搭配实现当前菜单的高亮状态
在做vue项目时,我们可能会遇到点击侧边栏导航菜单切换到新页面后当前导航栏并没有高亮的情况假设我们点击“各单位概况”后字体没有高亮,那么该如何设置呢?这里我仅提供自己实践的一种解决方法,欢迎大家提出意见或者补充方法。假设路由及其他配置已正确html关键代码设置 :default-active="activeIndex"js关键代码设置:computed:{ active...原创 2019-02-21 19:27:57 · 1234 阅读 · 0 评论 -
vue引入阿里巴巴矢量图标
阿里巴巴矢量图标库相较于其他库的icon图标要丰富不少,目前有418w+ icon,可以说是前端工作人员的首选,博主也在这里安利一下。网址:点击直达有时候我们写vue的时候经常要引入icon图标,下面我就简单介绍一下vue 如何引入阿里图标。注册一个账号是必不可少的O(∩_∩)O哈哈~,这里就不介绍了。去阿里图标矢量图标库将想要的图标添加入库。再去库中将图标添加到项目。...原创 2019-02-12 18:08:07 · 809 阅读 · 0 评论 -
vue全局组件和局部组件的写法
今天在学习vue的时候遇到了一个让我纠结的地方,那就是vue组件的全局注册到底该怎么用,我查阅资料发现众说纷纭……晚上看到了这篇文章,经过实践后发现确实可行,博主采用的比较幽默的方式让我能够对vue组件的全局注册有了更深的理解,好啦,闲话不多说,附上原文链接点此直达在网上经常看到有朋友在问自己能不能写vue组件 如果可以怎么应用到自己的项目之中呢!我觉得吧这个事儿就和用煮大米饭是一个道理的...转载 2019-02-13 19:34:30 · 1489 阅读 · 0 评论 -
关于vue引入ECharts组件的问题
什么是ECharts?Echarts商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。有折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图...原创 2019-02-26 21:07:31 · 776 阅读 · 0 评论 -
VueRouter之router-view小记
router-view可以实现局部加载,很方便,但是也有坑。router-view使用的前提是,局部加载的组件和加载它的组件要有父子关系,也就是说,需要在加载router-view的组件配置children路由如:{ path: '/attend', name: '参与活动', component: resolve => re...转载 2019-03-07 21:19:12 · 666 阅读 · 0 评论 -
Vue通过router-link或者button跳转到一个新的页面
a、商品列表页面如下(点击'跳转到购物车页面'就会跳到一个新的页面,而不是在同一个页面加载一个组件)<template> <div> 这是商品列表页面 <router-link to='/goods/title'>显示商品标题</router-link> <router-link to='/goods/image'...转载 2019-03-07 21:21:50 · 6978 阅读 · 0 评论 -
vue利用vue ui命令创建项目
vue的官方脚手架是vue-cli,但它已经很久没有大版本更新了,最近发布的vue-cli 3.x ,新增的功能是非常强大的。一、安装npm install -g @vue/clips:建议使用cnpm,mac的朋友们记得加上sudo二、启动服务注意,vue-cli 3.x已经收归到vue项目下了,所以,直接输入 vue -h 可以看到:此时我们运行命令 vue ui , 就会启动...转载 2019-03-07 21:29:53 · 26768 阅读 · 8 评论 -
webpack4踩坑记(卒)
一时冲动升级了webpack4,这是个令人悲伤的故事。。。于是,我开启了边踩坑边填坑的不归路。。。以下皆为vue中的webpack一:报错:No.1:webpack-dev-server --inline --progress --config build/webpack.dev.conf.jsNo.2:Cannot find module 'webpack/bin/config-...原创 2019-07-23 14:39:19 · 676 阅读 · 0 评论