![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
MoLvSHan
这个作者很懒,什么都没留下…
展开
-
vue组件 - 金额输入框(带千分符)
此组件是基于element-ui的el-input组件的再封装,主要用来在输入过程中,显示为数字模式,在失去焦点时加上千分符;同时保持父组件传入的值始终保持数字模式,不必要再去人工转化数据格式先上vue文件代码:<template> <el-input v-model="inputValue" v-bind="$attrs" :maxlength="maxlength" @input="handleInput" @focus="handleF原创 2021-02-04 10:52:26 · 3801 阅读 · 3 评论 -
vue-cli项目配置多页面
思路首先要修改项目目录结构,然后修改webpack的entry和html-webpack-plugin插件如上图所示,src/page是我的目录结构,activity和index是需要构建的两个单独的页面,page目录下的每个子目录都需要一个入口文件(main.js),一个html模板(index.html)和一个vue文件(index.vue)entry的修改vue项目的entry配置...原创 2019-01-28 15:02:32 · 1068 阅读 · 0 评论 -
vue——组件之elementTable组件再封装
首先先上代码,下面是一个vue类型的文件,代码如下 <el-table v-loading="table.loading" :show-summary="table.hasShowSummary" :summary-method="table.getSummaries" ref="TlRlTable"原创 2018-04-08 11:43:43 · 16992 阅读 · 20 评论 -
vue踩坑系列——动态组件
vue实现动态组件的两种方法效果图:右侧按钮是动态组件,分为按钮组件和箭头组件一种是使用v-if条件渲染:当seen=0的时候,使用按钮组件,否则使用箭头组件子组件: {{tipsText}} //按钮组件import quiBtn from '../components/quiButton.vue'//箭头组件转载 2017-05-19 11:20:20 · 14912 阅读 · 0 评论 -
vue踩坑系列——前后端分离的接口跨域问题
公司项目一直在用jq,只是近来无事,实在闲的蛋疼,就想用调公司的接口练练vue,结果刚刚上手,就卡住了,同源策略下的跨域问题。经过查资料了解到可以在config/index.js中修改proxyTable配置proxyTable: { '/api': { target: 'http://www.hmjshop.com', ch原创 2017-09-19 15:57:57 · 1058 阅读 · 0 评论 -
vue踩坑系列——slot
下图红箭头所指是一个标题组件,样式一样,但是在第二个标题上右侧黑箭头所指有一个更多按钮,此时就要用到slot插槽标题组件(子组件)代码: {{ title }} export default { name: 'TemplateTitle', props: { title: { default: '1F 热销专区' } }原创 2017-10-11 16:00:23 · 1924 阅读 · 0 评论 -
vue踩坑系列——backgroundImage路径问题
在前端开发中,background-image属性非常常见,有很多时候需要使用内联样式来绑定此属性,但是在vue-cli项目中,如果如下面代码填写路径会找不到图片 import TemplateNav from './TemplateNav' export default { name: 'FooterNav', components: { 'TemplateNav': T原创 2017-10-11 16:14:44 · 28414 阅读 · 2 评论 -
vue踩坑系列——vue-cli的安装
使用vue-cli时的安装步骤1、npm install -g vue-cli(全局安装vue脚手架)2、vue init webpack myProject(初始化项目,myProject是项目文件夹) 过程中会询问一些项目相关信息可以一直输入y跳过,不过在第七条ESlint最好输入no(语法验证,容易报错),之后,会出现上图红框部分,根据红框中的提示完成操作即可原创 2017-10-16 11:53:42 · 942 阅读 · 0 评论 -
vue踩坑系列——计算属性
先贴源代码 export default { name: 'topImg', data() { return { imgsrc: 'http://imgpb.hmjshop.com/img/sy_banner/App/shangcheng/banner222.png', index: 0 } }, methods: { c原创 2017-10-17 11:00:06 · 1363 阅读 · 0 评论 -
vue踩坑系列——swiper
在vue项目中,引入swiper后,会报下面这个错误Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'项目代码是 {{item.text}} import swipercss from '../../../assets/css/swiper-原创 2017-10-16 15:19:40 · 5372 阅读 · 0 评论