![](https://img-blog.csdnimg.cn/20200224170206109.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue
写写代码AAA
java,golang
展开
-
Elementui中日期选择器的使用
准备这里使用了moment.js关于moment.js的使用,请看Vue项目中使用moment.js日期选择器的使用首先定义一个子组件DatePicker.vue<template> <el-form-item :label="label" label-width="80px"> <el-date-picker v-model="date" :picker-options="pickerOptions" type="da原创 2020-07-09 11:13:35 · 3107 阅读 · 0 评论 -
Vue项目优化
通过nprogress添加进度条效果安装nprogress插件:依赖 》安装依赖 》运行依赖,搜索nprogress,安装配置progress在axios.js中引入NProgress的JS和CSS在axios的request拦截器中,显示进度条NProgress.start()在axios的response拦截器中,隐藏进度条NProgress.done()import Vue from 'vue'// 导入axiosimport axios from 'axios'// 导入原创 2020-05-24 17:05:14 · 338 阅读 · 0 评论 -
Vue项目中使用moment.js
moment.js官网地址http://momentjs.cn安装依赖打开命令行,输入vue ui,打开可视化界面依赖>安装依赖>运行依赖>moment配置插件在项目src目录下,新建dependences目录,新建moment.jsimport Vue from 'vue'import moment from 'moment'// 设置本地时区momen...原创 2020-03-29 14:04:19 · 6909 阅读 · 0 评论 -
Vue项目中使用v-charts
安装依赖打开命令行,输入vue ui,打开可视化界面echarts依赖>安装依赖>运行依赖>echartsv-charts依赖>安装依赖>运行依赖>v-charts配置插件在项目src目录下,新建dependences目录,新建vcharts.jsimport Vue from 'vue'import VCharts from 'v-cha...原创 2020-03-26 09:42:46 · 2212 阅读 · 0 评论 -
Vue插槽
官网地址:https://cn.vuejs.org/v2/guide/components-slots.html基本使用创建一个带插槽的组件SlotDemo.vue<template> <div> <h2>我是SlotDemo组件</h2> <!-- 插槽 --> <slot></sl...原创 2020-03-01 15:59:16 · 254 阅读 · 0 评论 -
vue cli4-环境变量和模式
官方文档环境变量一个环境变量文件只包含环境变量的键值对:NODE_ENV=developmentVUE_APP_BASE_URL=http://127.0.0.1:8080/注意:NODE_ENV - 是 “development”、“production” 、"test"或者自定义的值。具体的值取决于应用运行的模式BASE_URL - 会和 vue.config.js 中的 p...原创 2020-02-28 16:53:28 · 3982 阅读 · 1 评论 -
springboot整合vue
步骤创建springboot项目在resources目录下新建一个vue目录在vue目录下新建vue项目,或者把存在的vue项目copy到这个目录下都可以设置vue打包后输出的目录和vue打包后静态资源目录,在vue目录下(vue项目根目录)新建vue.config.jsmodule.exports = { // 设置打包后输出的目录 outputDir: ...原创 2020-02-27 22:27:02 · 1183 阅读 · 1 评论 -
Vue项目中使用Element-ui
说明:这里我通过一个简单的登录组件,来演示如何在vue项目中使用Element-ui按需导入element-ui组件打开src目录,找到plugins目录下的element.js文件,导入需要的组件import Vue from 'vue'// 按需导入element-ui组件import { Button, Form, FormItem, Input, Row, Col, Messag...原创 2020-02-24 17:16:47 · 1302 阅读 · 0 评论 -
Vue项目中使用fontawesome5
下载fontawesome5,官网地址:fontawesome5把下载的fontawesome-free-5.11.2-web文件夹复制到src目录下assets目录下在src目录下main.js中引入css// 导入图标cssimport './assets/fontawesome-free-5.11.2-web/css/all.min.css'在组件中使用图标 ...原创 2020-02-24 16:56:57 · 1566 阅读 · 0 评论 -
Vue项目-路由demo
创建项目前端项目准备(使用vue脚手架创建)项目准备删除不要的组件删除views文件夹删除compoents组件下的所有文件修改APP.vue<template> <div id="app"> <!-- 路由占位符 --> <router-view></router-view> </div&...原创 2020-02-24 11:11:11 · 414 阅读 · 0 评论 -
使用vue脚手架搭建项目详解
安装vue脚手架这里的版本是vue cli4cnpm i @vue/cli -g启动vue脚手架图形化界面打开命令行,输入以下命令vue ui通过vue脚手架图形化界面创建项目选择项目目录...原创 2020-02-24 09:44:12 · 7289 阅读 · 0 评论 -
webpack3基本使用
基本使用目录结构webpackdemo1 -dist -src -main.js -index.htmlcd到webpackdemo1的目录下,执行以下命令# 全局安装webpack3cnpm i webpack@3 -g# 初始化npm init -y# 安装jquerycnpm i jquery@2 -Smain.jsimport $ from 'jq...原创 2020-01-16 21:50:13 · 162 阅读 · 0 评论 -
Vue-methods,watch和computed
案例把firstName和lastName组合成fullName为keyup事件绑定方法<body> <div id="app"> <!-- 为keyup事件绑定函数 --> <input type="text" v-model="firstName" @keyup="getFullName" /> +...原创 2020-01-13 20:20:57 · 124 阅读 · 0 评论 -
Vue路由
入门<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l...原创 2020-01-12 22:50:54 · 152 阅读 · 0 评论 -
js模块化-commonjs和es6
commonjs项目目录commonjs -dist -src -module1.js -module2.js -module3.js -main.js -index.htmlmodule1.js// 暴露一个对象module.exports = { message: "module1", demo() { console.log(...原创 2020-01-10 13:08:01 · 238 阅读 · 0 评论 -
npm简介
简介NPM全程: Node Package Manager,是Node.js的一个包管理工具,随Node一起安装安装直接安装node.js就可以了node.js官网:https://nodejs.org/en/download/直接下载安装命令npm -v查看npm版本npm install npm -g升级npm版本npm init会引导你创建一个package.j...原创 2020-01-03 18:49:33 · 413 阅读 · 0 评论 -
Vue组件传值
父组件向子组件传值定义子组件,props中设置需要父组件传入的参数名子组件template中使用已经在props中设置的参数名创建子组件时,通过属性绑定,设置需要传入的参数<body> <div id="app"> <!-- 创建组件时,通过属性绑定,设置需要传入的参数 --> <com1 :parentmsg...原创 2020-01-01 22:46:21 · 117 阅读 · 0 评论 -
方法简写: a:function(){}可以简写为a(){}
<body> <div id="app"> <input type="button" value="方式一" @click="demo1" /> <input type="button" value="方式二" @click="demo2" /> </div> <!-- 开发...原创 2020-01-01 18:02:51 · 2187 阅读 · 0 评论 -
Vue过滤器
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值v-bind 表达式 (后者从 2.1.0+ 开始支持)过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示<body> <div id="app"> <p> <!-- 不用传...原创 2019-12-31 11:35:20 · 149 阅读 · 1 评论 -
Vue组件
<body> <div id="app"> <!-- 使用组件,组件名称含有驼峰时,需要使用-代替 --> <my-com1></my-com1> <mycom2></mycom2> <mycom3></mycom3>...原创 2019-12-29 22:18:07 · 104 阅读 · 0 评论 -
Vue中使用axios
<body> <div id="app"> <input type="button" value="获取笑话" @click="getJoke1" /> <p>{{joke}}</p> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 -->...原创 2019-12-28 19:46:57 · 146 阅读 · 0 评论 -
Vue入门
指令简介v-textv-htmlv-onv-bindv-showv-ifv-forv-modelv-text和v-html<body> <div id="app"> {{message}} <br/> <span v-text="message"></span>...原创 2019-12-28 17:02:42 · 172 阅读 · 0 评论