- 博客(42)
- 收藏
- 关注
RSS订阅
原创 001_Vue3和Element Plus项目初始化，引入依赖
001_初始化项目(h3)预设-(vue3)（.vuerc 文件的位置：C:\Users\Administrator） "kingding": { "useConfigFiles": true, "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-router": { "historyMode": false }, "@vue/cli-plugin-vuex": {}
2021-03-09 23:12:32
898
原创 0203父子组件的通信
父传子父传子的时候通过属性传递子要声明props:[‘属性名’] 来接收收到就是自己的了，随便你用在template中 直接用在js中 this.属性名 用子传父子组件里通过$emit(‘自定义事件名’,变量1，变量2)触发父组件@自定义事件名=‘事件名’监听子组件方法里 this.$emit(‘sendfather’,val1,val2)触发自定义事件父组件里 <child @sendfather=‘mymethods’><!DOCTY..
2021-03-13 01:35:32
151
原创 011_表单组件封装
vue_hngxy_experiment_003\src\components\Administrator\CommonForm.vuevue_hngxy_experiment_003\src\views\Administrator\Student\Student.vuevue_hngxy_experiment_003\src\assets\scss\common.scss.manage{ height: 90%; padding-bottom: 20px; overflo.
2021-03-12 08:09:20
125
原创 010_引入表单表格
vue_hngxy_experiment_003\vue_elementplus_dl\src\components\Administrator\CommonForm.vue<template> <div> CommonForm </div></template><script>export default {}</script><style lang="scss" scoped><..
2021-03-11 04:17:00
222
原创 008_axios
001_介绍Axios什么是AxiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF案例执行 GET 请求// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345
2021-03-11 02:24:39
202
原创 008_axios
001_介绍Axios什么是AxiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF案例执行 GET 请求// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345
2021-03-11 02:22:45
135
原创 007_侧边栏收缩和选中标签变亮
001_XXX(h3)vue_elementplus_dl\src\components\Administrator\CommonHeader.vuevue_elementplus_dl\src\store\tab.jsvue_elementplus_dl\src\components\Administrator\CommonAside.vuevue_elementplus_dl\src\components\Administrator\CommonTab.vue
2021-03-11 01:34:47
124
原创 006_模块化及连通页面组件
001_模块化(h3)项目目录vue_elementplus_dl\src\views\Administrator\Home\Home.vue<template> <div> Home </div></template><script>export default {}</script><style lang="scss" scoped></style>vu
2021-03-11 01:07:23
126
原创 005_左侧导航切换tag标签
001_XXXX(h3)vue_elementplus_dl\src\views\Main.vuevue_elementplus_dl\src\store\tab.jsvue_elementplus_dl\src\components\CommonTab.vue浏览器界面
2021-03-10 06:26:17
207
原创 004_顶部导航栏与左侧导航联动的面包屑实现
001_XXXX(h3)vue_elementplus_dl\src\components\CommonAside.vuevue_elementplus_dl\src\components\CommonHeader.vuevue_elementplus_dl\src\store\index.jsvue_elementplus_dl\src\store\tab.js浏览器界面
2021-03-10 05:08:45
776
原创 003_左侧公共导航菜单
001_XXXX(h3)vue_elementplus_dl\src\components\CommonAside.vue浏览器界面001_XXXX(h3)vue_elementplus_dl\src\components\CommonAside.vue浏览器界面
2021-03-10 03:18:50
98
原创 002_首页布局
001_XXXX(h3)vue_elementplus_dl\src\main.jsvue_elementplus_dl\src\App.vuevue_elementplus_dl\src\views\Main.vuevue_elementplus_dl\src\components\CommonAside.vue<template> <div> CommonAside </div></template>&
2021-03-09 23:48:13
106
原创 006_CSS中重要概念之布局相关(下)
001_三栏布局(h3)源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三栏布局</title> <style> .wrapper {
2021-03-09 00:58:44
91
原创 006_CSS中重要概念之布局相关(上)
001_前置知识(h3)元素的分类块级元素自己占满一行，就算宽度变小，也是独立成行可修改宽高属性行内元素写在块级元素里面可跟其他行内元素并行显示不能修改宽高正常元素怎么布局默认，一个块级元素的内容宽度就是其父元素的100%，他的高度和其内容高度一致行内元素它的宽度和高度都是根据内容决定的(无法设置行内元素的宽高)可设置display属性，定义元素的类型block 此元素将显示为块级元素，此元素前后会带有换行符。inline 默认。此元素会被显示为内联元素
2021-03-08 22:17:35
92
原创 005_层叠和继承
001_XXXX(h3)CSS全称：层叠样式表(Cascading Style Sheets)层叠是⼀一个基本特征一个css属性被多次声明的时候，会根据优先级或者声明顺序来计算采⽤用哪个样式优先级是怎么计算id > class > tag标签选择器器 1类选择器器 10id选择器器 100通配符选择器器和表示关系的选择器器，对优先级没有影响例外规则!important注意的不利利于代码的维护建议不要在自己的局部代码(公用代码)里使用impo
2021-03-08 18:51:17
67
原创 004_CSS中的常用属性
001_XXXX(h3)常用属性盒⼦子的位置和⼤小尺⼨布局宽度 width: ⻓长度 | 百分⽐比 | auto高度 height边界 margin padding 上右下左 || 上下 左右布局浮动 float定位 position盒⼦内容超出部分： overflow： hidden || scroll || auto外观，风格background: 背景颜⾊色 || 背景图像 || 背景重复 || 背景要不不要固定 || 背景位置backgrou
2021-03-08 18:38:05
75
原创 003_盒子模型
001_盒子模型(h3)什么是盒子模型在CSS⾥面，所有的HTML元素你都可以看成是⼀个盒子由以下部分组成盒子和盒子之间的间隙(margin)盒子的边框(border)盒子的内部间隙(padding)盒子的内容(content)源代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view
2021-03-08 16:49:50
100
原创 002_CSS选择器
001_CSS核心之常见的选择器及使用场景(h3)必须掌握的选择器元素（标签）选择器类选择器id选择器(JavaScript)开发过程中常用的选择器通配符选择器 *派⽣生选择器 根据文档dom结构来选择html元素后代选择器⼦元素选择器相邻选择器源代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta
2021-03-08 16:28:17
144
原创 001_CSS的基本规则和CSS的几种写法
001_CSS的基本规则(h3)层叠样式表选择器器告诉浏览器要设置样式的html元素声明块用于设置样式002_CSS的几种写法(h3)内部样式表写在style标签⾥面的内联样式表写在元素的style属性⾥面的外部样式表link标签将css资源引⼊入为什什么选择外部样式表解决⻚页⾯面当中样式重复的问题代码分离，利利于代码维护和阅读浏览器会缓存起来，提⾼页面响应，速度变快了<!DOCTYPE html><h
2021-03-08 16:03:42
96
原创 001_Vue核心插件_vuex
001_Vue核心插件_vuex(h3)\src\main.jsimport Vue from 'vue'import App from './App.vue'import store from './store/index'Vue.config.productionTip = falsenew Vue({ store, render: h => h(App)}).$mount('#app')\src\App.vue<template> <
2021-03-05 03:37:39
176
1
原创 0401购物车案例
001_0401购物车案例(h3)源代码<!DOCTYPE html><html> <head> <title>购物车</title> <style type="text/css"> span { cursor: pointer; } </style> </head> <body> <div id="app"> <div>
2021-03-04 21:13:42
159
1
原创 0306路由守卫
001_0306路由守卫(h3)const router = new VueRouter({ ... }//前置的钩子函数 最后要执行next（）才会跳转router.beforeEach((to, from, next) => {// ...})//后置的钩子函数 已经跳转了不需要nextrouter.afterEach((to, from) => {// ...})路由守卫主要用于检验是否登录了，没登录就跳转到登录页面不让他在其他页面停留，但是现在这种处理主要的都
2021-03-04 01:57:40
65
1
原创 0305嵌套路由
001_0305嵌套路由(h3)router-view的细分router-view第一层中，包含一个router-view每一个坑挖好了，要对应单独的组件路由配置routes: [{path:’/nav’,name:‘nav’,component:Nav,//路由嵌套增加此属性children:[//在这里配置嵌套的子路由]}]源代码<!DOCTYPE html><html><head> <title&
2021-03-04 01:51:38
67
1
原创 0304路由的传参和取参
001_0304路由的传参和取参(h3)查询参配置（传参） :to="{name:‘login’,query:{id:loginid}}"获取（取参） this.$route.query.id路由参数配置（传参） :to="{name:‘register’,params:{id:registerid} }"配置路由的规则 { name:‘detail’,path:’/detail/:id’}获取 this.$route.params.id总结:to传参的属性里
2021-03-04 00:55:35
145
1
原创 0303路由的跳转
001_0303路由的跳转(h3)路由的跳转方式有：通过标签：<router-link to='/login'></router-link>通过js控制跳转this.$router.push({path:'/login'})区别：this.$router.push() 跳转到指定的url，会向history插入新记录this.$router.replace() 同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上
2021-03-04 00:46:37
107
1
原创 0302路由的安装和使用
001_0302路由的安装和使用(h3)路由是以插件的形式引入到我们的vue项目中来的vue-router是vue的核心插件下载 npm i vue-router -S安装插件Vue.use(VueRouter);创建路由对象 var router = new VueRouter();配置路由规则 router.addRoutes([路由对象]);路由对象{path:'锚点值',component:要(填坑)显示的组件}将配置好的路由对象交给Vue在options中传递-
2021-03-04 00:40:53
89
3
原创 0202插槽和获取子实例父实例
001_0202插槽和获取子实例父实例(h3)slot插槽slot就是子组件里给DOM留下的坑位<子组件>DOM</子组件>slot是动态的DOMref获取子组件实例识别：在子组件或元素上使用属性ref=“xxxx”获取：this.$refs.xxxx 获取元素$el 是拿其DOMparent获取父组件实例（可在子组件直接使用this.parent获取父组件实例（可在子组件直接使用this.parent获取父组件实例（可在子组件直接使
2021-03-03 22:05:24
203
1
原创 0201组件化开发
001_XXXX(h3)创建组件的两种方式var Header = { template:‘模板’ , data是一个函数,methods:功能,components:子组件们 }//局部声明Vue.component(‘组件名’,组件对象);//全局注册 等于注册加声明了组件类型通用组件（例如表单、弹窗、布局类等)业务组件（抽奖、机器分类）页面组件（单页面开发程序的每个页面的都是一个组件、只完成功能、不复用）组件开发三步曲：声明、注册、使用源代码<html
2021-03-03 21:49:52
71
1
原创 0106计算属性和侦听属性
001_XXXX(h3)watch监听单个，computed监听多个思考业务场景：类似淘宝，当我输入某个人名字时，我想触发某个效果利用vue做一个简单的计算器当watch监听的是复杂数据类型的时候需要做深度监听computed 监视对象,写在了函数内部, 凡是函数内部有this.相关属性,改变都会触发当前函数源代码<html><head> <title></title></head><
2021-03-03 21:45:22
164
1
原创 0105过滤器
001_XXXX(h3)过滤器就是可以对我们的数据进行添油加醋然后再显示过滤器有全局过滤器和组件内的过滤器全局过滤器Vue.filter(‘过滤器名’,过滤方式fn );组件内的过滤器 filters:{ ‘过滤器名’,过滤方式fn }{{ msg | 过滤器名}}最终都是在过滤方式fn里面return产出最终你需要的数据源代码<html><head> <title>过滤器</title></head>
2021-03-03 21:23:18
66
1
原创 0104.单双向数据绑定及事件绑定
001_XXXX(h3)vue单向数据流绑定属性值 v-bind: (属性) 简写 :(属性)例子：<input v-bind:value="name" v-bind:class="name">单向数据绑定 内存改变影响页面改变v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染vue双向数据流 v-model 只作用于有value属性的元素例子：<input v-model="name" v-bind:class
2021-03-03 21:13:34
93
1
原创 0103指令
001_XXXX(h3)什么是指令在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。譬如在HTML页面中这样使用<div v-xxx=''></div>在vue中v-xxx就是vue的指令指令就是以数据去驱动DOM行为的,简化DOM操作常用的指令有哪些，及怎么使用这些指令v-text 不可解析html标签v-html 可解析html标签v-if 做元素的插入（append）和移除（remove）操作v-
2021-03-03 21:02:53
174
1
原创 0102引包、留坑、实例化
001_0102引包、留坑、实例化(h3)引包确认已经下载了node,然后执行命令 npm install vue页面引入刚下载的包<script type="text/javascript" src="vue.js"></script>留坑 即留一个vue模板代替的地方或者是vue代码对其生效的地方实例化 即启动Vue启动： new Vue({el:目的地,template:模板内容});实例化传入的是一个对象optionsoptions目的
2021-03-03 20:56:39
89
1
原创 010_侧边栏收缩和选中标签变亮
001_XXXX(h3)\src\components\CommonHeader.vue<template> <header> <div class="l-content"> <el-button plain size="mini" icon="el-icon-menu" @click="collapseMenu"></el-button> <el-breadcrumb separator="/"&
2021-03-03 00:24:57
194
原创 009_连通页面组件
001_连通页面组件(h3)\src\views\Student\Home\Home.vue<template> <div> home </div></template><script>export default {}</script><style lang="scss" scoped></style>\src\views\Student\Appointment\
2021-03-02 23:55:35
104
原创 008左侧导航切换tag标签（vue+element）
001_XXXX(h3)\src\views\Student\Main.vue<template> <el-container style="height: 100%"> <el-aside><common-aside></common-aside></el-aside> <el-container> <el-header><common-header><
2021-03-02 22:04:52
782
2
原创 007_顶部导航栏与左侧导航联动的面包屑实现（vue+element）
001_顶部导航栏与左侧导航联动的面包屑实现(h3)\src\components\CommonAside.vue<template> <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <!-- 无子级菜单--> <el-men
2021-03-02 21:08:59
2592
原创 006_左侧公共导航菜单（vue+element）
001_左侧公共导航菜单(h3)\src\components\CommonAside.vue<template> <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <!-- 有子级菜单--> <el-submenu index
2021-03-02 18:39:58
300
原创 005_首页布局（vue+element）
001_项目目录(h3)\src\main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'// 全局配置import './assets/scss/reset.scss'import 'element-ui/lib/theme-chalk/index.css'// 第三方包import ElementUI from
2021-03-02 17:30:19
236
原创 003_vscode自定义格式化规则(ESLint Prettier)2021年
003_vscode自定义格式化规则(ESLint Prettier)vscode下载ESlint , Prettier , Vetur 插件调整Prettier拓展设置选择项目任意js或vue文件,用Prettier格式化程序格式化，最好将其设置为默认格式化程序格式化后保存终端会出现一些警告，这是因为ESlint 格式化规范和Prettier格式化规则冲突了。继续自定义ESlint 规范在.eslintrc.js 中覆盖prettier规则即可，覆盖是为了防止冲突ru
2021-02-27 15:25:16
3597
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人