vue
文章平均质量分 56
vue
lss0555
关注领域:JavaEE,Android,JavaScript
展开
-
vue-cli模式和环境变量
一、模式模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:development 模式用于 vue-cli-service servetest 模式用于 vue-cli-service test:unitproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2e1、–mode你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变原创 2021-07-14 11:30:55 · 1780 阅读 · 0 评论 -
vue之el-table某一列设置样式
方法一在el-table设置属性cell-style方法<el-table:cell-style="setRowStyle"> .........</el-table>在method中设置setRowStyle(row, column, rowIndex, columnIndex) { if(row.istable === "1"){ return 'color: red' }else{ return 'color: blu原创 2021-04-26 15:20:47 · 4994 阅读 · 0 评论 -
vue结合插件mock.js使用
一、前言mock.js可以通过随机数据来模拟各种场景,不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据;支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等;支持支持扩展更多数据类型,支持自定义函数和正则,非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。二、基础语法http://mockjs.com/examples.html三、结合vue使用1.安装使用npm安装npm install mockjs --save使用yarn安装yarn add原创 2020-11-16 11:43:23 · 493 阅读 · 0 评论 -
vue之vue-content-loader内容加载器使用
一、前言在打开一个页面时候,如果遇到界面内容多或者接口请求慢导致加载速度慢时,这时候会导致页面出现较长时间的空白页面,影响用户的体验感,vue-content-loader正是解决该场景问题的一个组件。二、特性1、完全可定制:你可以改变颜色,速度和大小2、创建自己的加载:使用在线工具轻松创建你的自定义加载3、你现在就可以使用它:已经有很多预设了4、性能Tree-shakable and highly optimized bundle纯SVG, 因此它不需要任何 javascript, ca原创 2020-09-27 11:03:19 · 2801 阅读 · 0 评论 -
vue之svg-icon组件使用
一、添加相关依赖包当前使用的vue版本为2.6.11,加入库svg-sprite-loaderpackage.json新增如下:"devDependencies": { "svg-sprite-loader": "^4.1.6", ... },二、新增SvgIcon组件1.在components文件下新建SvgIcon组件SvgIcon下的index.vue组件内容如下:<template> <svg :class="svgClass"原创 2020-09-25 15:27:37 · 564 阅读 · 0 评论 -
vue项目中引入less支持
一、less是什么Less是一种CSS的扩展和动态样式表语言,CSS预处理器,可以在客户端或服务器端运行,帮助我们自定义,管理和重用网页的样式表。Less是一种开源语言,也是跨浏览器兼容的语言。二、vue中引入less1.加入less相关库npm install less-loader@4.1.0 --save -Dnpm install less@3.0.4 --save -Dpackage.json加入的库如下: "devDependencies": { "less": "^3.原创 2020-09-22 10:35:22 · 2074 阅读 · 0 评论 -
vue cli4之Eslint初使用
一.介绍ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。在许多方面,它和 JSLint、JSHint 相似,除了少数的例外:ESLint 使用 Espree 解析 JavaScript。ESLint 使用 AST 去分析代码中的模式ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。二.使用1.安装"devDependencies": { "@vue/eslint原创 2020-09-03 11:49:42 · 696 阅读 · 0 评论 -
vue router路由解析
一、前言Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。二、安装1.安装包npm install vue-router2.项目引用在cli4脚手架目录router下index.js中引用import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)三、使用1.路由命名通过一个名称来标识一个路由显得更方便一些,特别是在链接原创 2020-08-31 10:03:04 · 895 阅读 · 0 评论 -
vue多语言插件vue-i18n
安装vue-i18nnpm install vue-i18n -S使用1.在main.js中引入vue-i18nimport VueI18n from 'vue-i18n'Vue.use(VueI18n)2.vue-i18n初始化const i18n = new VueI18n({ locale: 'cn', // 默认语言 messages})3.vue-i18n挂载到vue实例new Vue({ el: '#app', router, i18n, // i转载 2020-08-28 11:21:57 · 297 阅读 · 0 评论 -
Vue.js之Socket.IO 使用
一.前言在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转)、订单语言提醒等,这些都是建立在两端实时通信的基础上的。对前端而言,来实现浏览器和服务器实时通信,最好的选择就是Socket.IO库,能够快速的实现两端实时通信功能。1、什么是 Socket.IO?Socket.IO是一个WebSocket库,可以在浏览器和服务器之间实现实时,双向和基于事件的通信。它包括:Node.js服务器库、浏览器的Javascript客户端库。它会自动转载 2020-08-28 09:01:52 · 228 阅读 · 0 评论 -
Vue之组件间的数据通信
一、父组件与子组件传值1.pros通过 Prop 父组件向子组件传递数据。props是单向绑定的,即只能父组件向子组件传递,不能反向,是 Vue 的设计理念之单向数据流。2.$emit官方说法是触发当前实例上的事件。附加参数都会传给监听器回调。$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。3.$ref通过$ref 实现通信,ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $re原创 2020-08-26 17:14:16 · 217 阅读 · 0 评论 -
async与await 用法
一.asyncasync 是 ES7 才有的与异步操作有关的关键字,和 Promise , Generator 有很大关联的。1.async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。 async function helloAsync() { return "hello world"; } var asyn = helloAsync(); console.log(asyn); helloAsync原创 2020-08-26 09:40:38 · 333 阅读 · 0 评论 -
ES6之Promise用法解析
一.Promise是什么promise是一个对象,对象和函数的区别就是对象可以保存状态,函数不可以(闭包除外)并未剥夺函数return的能力,因此无需层层传递callback,进行回调获取数据主要用于异步计算可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果可以在对象之间传递和操作promise,帮助我们处理队列代码风格,容易理解,便于维护,多个异步等待合并便于解决二.实例用法1.简单用法new Promise(function(resolve, reject) {原创 2020-08-25 17:25:16 · 229 阅读 · 0 评论 -
vue-cli 版本 4.5.4 脚手架搭建项目
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码原创 2020-08-19 10:13:47 · 2406 阅读 · 1 评论