![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue从零到一
丶久友
主要记录学习过程中的一些笔记,永远都是学了就忘,好记性不如烂笔头!
展开
-
vue层级传参、爷孙传参、孙爷传参、跨层传参
爷----父----子 传参爷传子【传参】// grandpa.vue爷爷级<template> <parent msg="msg from grandpa" number="112"></parent></template>// parent.vue父亲级<template> //直接转发给子,不做处理 <child v-bind="$attrs"></child></templ原创 2021-08-29 12:03:12 · 972 阅读 · 0 评论 -
element Ui 单张图片上传组件封装和调用示例 包含表单验证,提交,重置功能 状态包含图片上传成功、上传中请等待、图片删除、图片重置功能
简介:element Ui 单张图片上传组件封装和调用示例包含上传时表单验证,提交,重置功能状态包含图片上传成功、图片上传中请等待、图片删除、图片重置功能上传中隐藏+号,删除后显示+号,重置后显示+号,上传失败显示+号示例图片:组件代码:<!-- * @Descripttion: * @version: * @Author: sueRimn * @Date: 2020-05-26 14:19:55 * @LastEditors: sueRimn * @LastEditT原创 2020-06-19 11:02:00 · 560 阅读 · 0 评论 -
利用async/await/Promise控制异步函数和同步函数先执行异步函数的一个小案例
之前一直不是太懂async/await/Promise之间的关系,以及怎么使用,碰到同步执行和异步执行一起的函数就给同步的函数加个setTimeout让他变成异步,可是,有时候请求后端数据延迟,还是会先执行了setTimeout包裹的函数最近在学vue+element+admin这个后台管理项目,看到里面用到了这些东西,学习了一些看看console.log(),和async/await/Promise写在函数的什么位置// spu展开行查看型号 async toogleExpand(row)原创 2020-06-05 20:49:50 · 762 阅读 · 0 评论 -
vue-element-admin 个人理解登录流程
登录流程1.页面发起登录请求页面发起登录请求,会调用vuex中的 login() 方法(@/store/modules/user.js)全局拦截路由请求 [有白名单] 和响应判断状态码code是否正确若果正确,继续判断vuex中store是否存在用户信息如果有,next()如果没有,就会调用vuex中(@/store/modules/user.js)中的getInfo()方法来获取用户信息vuex中的getInfo()方法中又调用了(@/api/user.js)中的getInfo()方法并传原创 2020-05-08 23:44:31 · 2938 阅读 · 5 评论 -
vue自定义属性directives制作Loading/extend制作loading
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-03-15 22:32:56 · 144 阅读 · 0 评论 -
二、vuecli创建项目时runTimeCompiler与runTimeOnly的区别,及一步步演变
1.先看两种模式创建出来min.js文件的区别2.怎么将runTimeCompiler一步步转成runTimeOnly# 普通写法// runTimeCompiler创建的版本import Vue from 'vue'import App from './App'Vue.config.productionTip = false/* eslint-disable no-...原创 2020-03-12 14:28:51 · 1461 阅读 · 0 评论 -
一、安装了Vue CLI3怎么创建vue cli2项目
安装Vue脚手架版本3以上安装:npm install -g @vue/cli@(版本号)版本3以下安装:npm install -g vue-cli@(版本号)安装了vuecli3还想vuecli2的模板:npm install -g @vue/cli-initVue Cli2 初始化项目vue init webpack my-project...原创 2020-03-12 13:49:47 · 1822 阅读 · 0 评论 -
八、webpack中vue的引入
#1.安装vue:npm install vue --save然后在min.js文件中加以引入html文件中写个div标签id等于appmin.js// 使用vue进行开发import Vue from 'vue'const App = { template: ` <div> <h2>{{message}}</h2>...原创 2020-03-11 17:20:33 · 123 阅读 · 0 评论 -
模块化CommonJs与Es6模块化
CommonJs的使用Es6模块化原创 2020-03-09 21:18:12 · 111 阅读 · 0 评论 -
vue里获取ul下全部li元素组成伪数组,转成数组forEach遍历获取每个li的高度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><div id="app"> <p v-for="count in 10"...原创 2019-05-09 01:52:12 · 5043 阅读 · 0 评论 -
Vue中编译的作用域、作用域插槽(父组件取插槽内data中定义的数据)
一、理解变量作用域代码:<my-cpn v-show="isShow"></my-cpn>什么是编译的作用域<body> <div id="app"> {{message}} <cpn v-show="isShow"></cpn> </div> &l...原创 2020-03-07 21:54:08 · 1717 阅读 · 0 评论 -
Vue组件内定义子组件
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<...原创 2020-03-07 14:25:06 · 1547 阅读 · 1 评论 -
Vue中插槽的使用
一、基本使用1.插槽的基本使用<slot><slot>2.插槽的默认值<slot><buton>我是 默认值<button><slot>3.如果有多个值同时放入组件中进行替换时,一起作为替换元素二、具名插槽理解:就是需要多个slot标签,需要把每个slot、定义一个name值定义时<slot name="a...原创 2020-03-07 14:10:12 · 71 阅读 · 0 评论 -
vue父子组件的访问方式
父组件访问子组件使用$children或者$refs子组件访问父组件使用$parent访问根组件使用$root原创 2020-03-06 20:14:04 · 301 阅读 · 0 评论