![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
Tansy_big_rabbit
前端工程师一滴
展开
-
缺陷一览(1)--VUE
1. vue-cli2.0与3.0的区别2. vue的作用域插槽3. vue组件的全局注册4. vue-keepalive5. mixins6. 子组件修改父组件的属性7. $optioins命令8. 自定义指令9. import、export的使用原创 2020-08-21 09:13:35 · 141 阅读 · 0 评论 -
VUE(16) -- el-upload组件使用
el-upload 是elementUI的上传文件组件。https://element.eleme.cn/2.0/#/zh-CN/component/upload1. 实现自动上传官网上的例子基本都是自动上传,这里不做赘述。2. 实现非自动上传但是能获取到文件File(常用)非自动上传需要的参数:auto-upload="true"action=""虽然是设置的自动上传,但是action为空,最终也不会上传。为什么不直接用auto-upload为false然后配合http-r原创 2020-06-23 15:10:04 · 316 阅读 · 0 评论 -
VUE(15)--computed和watch的使用方法以及区别
computedcomputed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理。computed中的属性和data中定义的属性使用方法一样。<div>firstName:{{firstName}}</div><div>lastName:{{last...原创 2020-04-03 11:17:38 · 123 阅读 · 0 评论 -
VUE(13)--vue项目前后端分离session的获取
111原创 2020-04-01 10:00:59 · 6939 阅读 · 0 评论 -
VUE(12)--开发环境和生产环境的配置
111原创 2020-04-01 09:35:59 · 303 阅读 · 0 评论 -
VUE(11)--VUEX在项目的使用
1. 安装vuex npm install vuex --save2. 创建store.js文件,代码如下import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);const store = new Vuex({ //vuex的状态管理 state:{ loginState:false ...原创 2020-03-11 10:19:25 · 97 阅读 · 0 评论 -
VUE(10)--添加背景图片以及背景图片自适应
背景图片地址不能直接写在标签里面,要用data绑定 背景图的地址要加require 背景图要设置height属性 <div :style="bgImg"> </div><script>let that;export default { data () { return { bgImg:{ bac...原创 2020-03-02 15:23:30 · 6347 阅读 · 0 评论 -
VUE(9)--组件slot属性和组件动态绑定
1. 子组件的slot属性子组件中设置slot其实就是为父组件动态添加dom元素做准备,不可能所有组件都是一尘不变。子组件定义slot标签并且添加属性name<template><div>这是一个组件 <slot name="001"></slot> <slot name="002"></slot> &...原创 2020-02-20 19:56:28 · 2434 阅读 · 0 评论 -
VUE(6)--引入elementUI到项目中
1. npm下载方式引入下载命令:npm install element-ui --savemain.js中引入:import ElementUI from 'element-ui' //引入脚本文件import 'element-ui/lib/theme-chalk/index.css' //引入样式Vue.use(ElementUI); //使用组件2. cdn形式引入(...原创 2020-02-19 18:03:25 · 310 阅读 · 0 评论 -
VUE(7)--vue项目打包以及出现的问题
1. 项目打包命令:npm run build打包成功之后如图,此时项目中生成dist文件夹,里面有一个index.html文件,但是我们直接运行,页面是一片空白。这句话是什么意思,就是说不能直接运行index.html,要在本地运行才可访问2. 进入dist目录,输入anywhere -p 8080至此,本地已经运行完毕,但是访问路径还是一片空白,打开控制台发现静态资源并...原创 2020-02-19 17:36:26 · 832 阅读 · 0 评论 -
VUE(5)--导航守卫
1.全局守卫 router.beforeEach()//main.js中配置router.beforeEach(function(to,from,next){//to->要跳转的页面路径//form->发起跳转的页面路径//next是个函数// 1、next(): 进行下一个页面(放行)// 2、next(false): 中断当前导航,重置到from路由对应的地址/...原创 2020-02-17 17:03:27 · 114 阅读 · 0 评论 -
VUE(4)--路由配置以及使用方法
1.下载路由:npm install vue-router --save建议在项目中新建一个routes.js文件,这样单独管理路由配置,尽量不要都写在main.js中2.routes.jsimport home from './components/home' export const routes = [{ path: '/home', name: 'home', com...原创 2020-02-07 18:23:13 · 1477 阅读 · 0 评论 -
VUE(2)--项目中引入jquery
1. 下载jquery命令:npm install jquery --save2. 查看package.json3. 修改webpack.base.conf.js的配置var webpack = require("webpack");plugins: [ new webpack.ProvidePlugin({ $:"jquery", ...原创 2020-02-07 16:21:05 · 424 阅读 · 0 评论 -
VUE(1)--脚手架搭建vue项目
使用vue-cli搭建vue项目1.安装node地址:https://nodejs.org/zh-cn/download/安装成功之后验证:node-v和npm-v2.下载vue-cli有两个版本的vue-cli可供选择:2.9.6版本和3.X版本3. 使用2.9.6版本的vue-cli搭建vue项目下载:npm install --global vue-cli 或者 ...原创 2020-02-07 14:48:39 · 111 阅读 · 0 评论 -
VUE工作笔记3--引入echarts
下载:npm install echarts --savenpm install -g cnpm --registry=https://registry.npm.taobao.org按需引入echarts模块:在src下创建echarts文件夹,创建echarts.js: // 引入 ECharts 主模块 var echarts = require('echarts/lib/...原创 2019-10-14 18:16:59 · 180 阅读 · 0 评论 -
elementUI操作笔记2--elTable
https://element.eleme.cn/2.0/#/zh-CN/component/table<el-table :data="eventLogData" stripe height="290" >//设置高度固定表头 <el-table-column prop="eventTime" ...原创 2019-10-10 13:47:49 · 152 阅读 · 0 评论 -
VUE(3)--配置跨域
1. 首先要分清楚开发环境和生产环境对应的文件分别是:dev.env.js prod.env.js2. index.js中添加跨域配置'/api' 这里是要告诉node,我访问的接口只要是以'/api'开头的就都是要使用代理,比如我访问的接口地址为https:www.baidu.com/user/login,那么使用node代理跨域,我们接口就要写成:/api/user/logi...原创 2019-10-10 13:26:16 · 618 阅读 · 0 评论 -
VUE(8)--创建项目&父子组件
1. 创建公共组件(父子组件)创建子组件 child.vue<template><el-dialog title="params.name" :visible.sync="params.show" :before-close="closeUpdateDialog" ></el-dialog></template><scrip...原创 2019-10-03 21:17:44 · 248 阅读 · 0 评论 -
elementUI操作笔记1--侧边菜单、tree、上传upload
1. 侧边菜单<el-menu :default-active="$route.path" class="el-menu-vertical-demo"@open="handleOpen" @close="handleClose" :collapse="isCollapse" router> <el-menu-item index="/home/sea...原创 2019-08-28 16:57:19 · 455 阅读 · 0 评论