vue
关注
分享
扫一扫
AIU哎呀
喜交友，互相学习分享。耿直程序猿，不善言辞，见谅，哇咔咔
展开
-
使用nuxt.js构建一个vue项目
使用nuxt.js构建一个vue项目简述过程：使用nuxt2.0官方脚手架，先全局安装npx，输入npm i -g npx切换至创建项目的路径，输入npx create-nuxt-app ’项目名称‘回车后，会出现一些配置项，可集成koa，elementUI等模块，按需选择Y或者N即可。补充：有时可能需要输入npm i --update-binary，以杜绝编译时node版本的一些隐患npm i --update-binary若需使用css预处理器（如：sass/原创 2020-06-12 14:33:11 · 693 阅读 · 0 评论 -
vue项目【 input输入框长度限制】
vue input输入框长度限制<input type="number" maxlength="11" placeholder="请输入手机号">经测试，发现在type为number或者text时，设置maxlength参数并不会生效。解决如下：<input type="number" oninput="if(value.length > 11)value = v...原创 2020-01-07 18:42:51 · 5785 阅读 · 1 评论 -
vue + element 项目中，表格多选状态如何禁选
vue + element 项目中，表格多选状态如何禁选一、 应用情景因需求，要对elementUI中table表格的多选框进行 可勾选 和 不可勾选 的处理二、 具体步骤1. 给 type 属性为 selection 的<el-table-column />加一个事件 :selectable='selectInit’ <el-table-column ...原创 2019-12-07 16:56:36 · 1227 阅读 · 0 评论 -
vue项目中，上传图片做像素大小宽高的限制
vue项目中，上传图片做像素大小宽高的限制<el-upload class="avatar-uploader" action="http://upload.qiniup.com" :data="qn" :show-file-list="false" :on-success="handleAvatarSuccess" ...原创 2019-12-05 18:29:21 · 3724 阅读 · 1 评论 -
vue 项目中H5页面，实现大转盘活动
vue 项目中H5页面，实现大转盘活动<template> <div class="about"> <div id="app"> <span>Prize number: {{ prizeNumber }}</span> <button type="button...原创 2019-11-25 14:30:48 · 1610 阅读 · 5 评论 -
vue动态绑定背景图片
vue动态绑定背景图片html代码：<html> <template> <div class="itemBox"> <div class="item" v-for="(ele,i) in goalList" :key="i" :style="{'backgroundImage': 'url(' + ele.bg + ')'}"> ...原创 2019-04-18 16:04:25 · 11142 阅读 · 0 评论 -
vue+elementUI项目中，el-dialog弹出框被遮罩层覆盖
vue+elementUI项目中，el-dialog弹出框被遮罩层覆盖一、问题表现el-dialog弹出框被遮罩层覆盖但是，浏览器调试时，明明遮罩层比弹出框z-index层级小【低一层】。二、解决方法在el-dialog标签里添加 :modal-append-to-body='false’:modal-append-to-body='false'成功被解决。三、解决原理：...原创 2019-06-19 17:28:08 · 8953 阅读 · 2 评论 -
vue项目中，js （javascript）生成二维码
vue项目中，js （javascript）生成二维码1. 概述1.1 引入二维码生成模块 npm install qrcodejs2 --save注意：此处安装qrcodejs2，安装依赖后可在main方法中进行全局引用设置，也可单独某个页面中进行引用设置。1.2 引入使用import QRCode from 'qrcodejs2';备注：在main中设置全局可使用 Vu...原创 2019-09-22 20:20:59 · 466 阅读 · 0 评论 -
如何监听 Element 组件 el-input 标签的 回车enter事件
如何监听Element组件标签的回车事件一、现象表单提交时需要处理输入框的回车事件，一般的原生input标签可以用@keyup.enter=“onSubmit”（tips:onSubmit为定义的方法）二、解决1、@keyup.enter=“onSubmit” 改写为 @keyup.enter.native=“onSubmit” ，也就是说多加一个native标志2、如：<el...原创 2019-09-29 14:05:36 · 952 阅读 · 0 评论 -
vue项目实现记住密码到cookie功能
vue项目实现记住密码到cookie功能一、实现功能：1.记住密码勾选，点登陆时，将账号和密码保存到cookie，下次登陆自动显示到表单内2.不勾选，点登陆时候则清空之前保存到cookie的值，下次登陆需要手动输入二、思路：大体思路就是通过存/取/删cookie实现的；每次进入登录页，先去读取cookie，如果浏览器的cookie中有账号信息，就自动填充到登录框中，存cookie是在登...原创 2019-09-30 18:18:17 · 512 阅读 · 0 评论 -
基于elementUI中级联选择器，完成省市区二级+三级联动效果
基于elementUI中级联选择器，完成省市区二级+三级联动效果注： 最下方有城市数据下载地址，为本人git账号地址，放心使用<p>选择区域：</p><el-cascader :options="options" v-model="selectedOptions" @change="handleChange" :separator="' '">...原创 2019-03-26 17:11:49 · 6782 阅读 · 1 评论 -
在 vue 中动态绑定 v-model
在 vue 中动态绑定 v-model一、经典数据双向绑定如下动图：二、当v-for循环中需要动态绑定v-model以图示例：注意： 避免在运行时向Vue实例或其根 $data 添加反应性属性在data选项中预先声明它。 注意v-model是vue中的一个指令，而不是标签属性，不要用v-bind:去动态绑定它【“ v-bind: ”缩写为“ : ”】...原创 2019-03-26 15:51:15 · 8391 阅读 · 2 评论 -
vue项目中，单独的组件引用对应的css样式
vue项目中，单独的组件引用对应的css样式根据项目具体的文件路径配置，引入在当前页面路径下的css示例中，login.css文件放在src文件夹下的assets文件夹下css文件夹内。注：此文章记录不是在main.js里引入，main.js引入是公共css与js注意引入的css文件中相对路径是相对于css文件的位置，不然会报错...原创 2019-02-14 16:35:53 · 3821 阅读 · 0 评论 -
vue 项目中 动态加载图片src的解决方法
vue项目中 动态加载图片src的解决方法一、问题描述：v-bind动态绑定的src属性【:src】加载static中的图片可以,但是的加载的src中的图片就不行了；普通费动态绑定的src属性是可以加载src资源文件夹下的图片的二、原因【vue-cli的assets和static的两个文件的区别】：assets： 在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径...翻译 2019-02-15 15:29:39 · 3678 阅读 · 0 评论 -
vue项目报错：Uncaught SyntaxError: Unexpected token <
vue项目报错：Uncaught SyntaxError: Unexpected token <一、问题：在vue项目中引入第三方依赖的 JS 文件【这里用test.js代替】时，遇到了一个问题：控制台（console）提示：Uncaught SyntaxError: Unexpected token <在 index.html 文件中,发现引入的的 JS 文件是放在 /src...翻译 2019-02-14 13:22:11 · 5746 阅读 · 0 评论 -
vue-cli 打包减少体积
vue-cli 打包减少体积1、 设置配置文件设置config文件夹index.js中productionSourceMap的值为false，也就是设置webpack配置中devtool为false。sourcemap： 编译后代码对源码的映射2、图片转base64图片转base64可以减少请求加快加载速度每加载一张图片都会发送一次请求，而base64码不会发送请求，但是如果图片太大，...原创 2019-03-05 20:29:29 · 1227 阅读 · 0 评论 -
Vue移动端项目中，页面限制用户缩放【防止页面被缩小和放大】
Vue移动端项目中，页面限制用户缩放【防止页面被缩小和放大】用vue脚手架【vue-cli】生成的项目中，在index.html页面的head标签中，有一条mate标签是：<meta name="viewport" content="width=device-width,initial-scale=1.0">如图：maximum-scale、minimum-scale及us...原创 2019-03-04 19:17:49 · 8538 阅读 · 2 评论 -
关于vue-cli桥接工具，安装完vue-cli3仍需使用vue-cli2.x版本
关于vue-cli桥接工具，安装完vue-cli3仍需使用vue-cli2.x版本以下操作，可以实现同时使用两个版本的脚手架搭建项目，根据需求搭建高or低版本项目安装完Vue cli3 之后，还需要使用vue-cli2.x 版本Vue CLI 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你...原创 2019-03-12 12:09:17 · 2249 阅读 · 0 评论 -
vue-cli 3.0 创建项目
vue-cli 3.0 创建项目一、vue-cli3.0初始化安装@vue/cli注意：vue-cli3.0需要node8.9或更高版本（推荐8.11.0+） npm install -g @vue/cli// 或者 yarn global add @vue/cli安装后，可检查其版本：使用vue --version【注意：符号为双 “ - ”】或者vue -V【注意：此处是大写...原创 2019-03-12 17:03:06 · 9058 阅读 · 0 评论 -
vue-cli 3.x 的 views 和 components有什么区别？
vue-cli 3.x 的 views 和 components有什么区别？components是小组件containers是容器级组件views是页面级组件也就是说，views是页面级组件，components是小组件，小组件可被引用在views中，一般views组件不被复用【containers是容器级组件（根据项目大小决定是否使用）】从组件大小级别区分 components - （...原创 2019-03-13 14:01:21 · 16591 阅读 · 1 评论