- 博客(59)
- 收藏
- 关注
RSS订阅原创 Vue学习笔记 —— router.addRoutes
router.addRoutesrouter.addRoutes(routes: Array)动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。但什么是更多动态规则？符合routes选项的要求的数组又长什么样？下面用代码来解释：基本使用:现在我们有一个非常普通的路由：const routes = [ { path: '/', name: 'Home', component: Home },{ path: '/Other',
2021-01-03 15:40:48
2619
原创 vue学习笔记 —— element-ui 中的 slot-scope=“scope
element-ui 中的 slot-scope="scope实例运用到的组件：这里的实例 运用 element 的表格组件：el-table下拉菜单：el-dropdown用法< template slot-scope="scope" >{{ scope.$index }} {{ scope.row }}</template>实例代码，详细解释在注释中：<el-table :data="tableData" style="width: 100%">
2020-12-29 21:50:09
1962
原创 ES6学习笔记 —— Object.keys()
Object.keys()Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致。Object.keys() 与for…in 循环遍历的区别主要区别是 一个 for-in 循环还会枚举其原型链上的属性。var obj = [1,2,3]var obj1 = { name: 'byu', age: 17, action: { 123: '123', 456: '456'
2020-12-28 14:05:41
711
原创 Vue.js案例 —— 课程管理系统三（Echars组件实现图表展示数据）
一、Echars组件介绍Echarts组件就是JavaScript的图表库。使用折线图、饼图、柱状图来展示页面数据。使用Echarts插件1、安装npm install echarts --save2、使用引入echarts插件import echarts from 'echarts'提供一个具备大小的容器（div）<div id="main" style="width: 600px;height:400px;"></div>初始化echarts
2020-12-26 20:32:04
712
原创 Vue.js案例 —— 课程管理系统二
一、项目页面容器布局、侧边栏路由跳转使用Element-UI的Container布局容器布局，NavMenu渲染侧边栏在main.js中引入重置样式，消除默认样式import './assets/scss/reset.scss'安装element-uinpm i element-ui -S在main.js中引入element-ui import ElementUI from 'element-ui'; //引入element-ui import 'element-ui/lib/th
2020-12-21 00:12:29
699
原创 vue-router导航组件重复点击报错
解决路由push地址问题：报错如下：vue-router.esm.js?4fb5:1995 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/mainpage/product"[Bug Report] 升级vue-router至3.1以后版本，导航组件重复点击报错 NavigationDuplicated复制代码也就是说这是vue-router3.1版
2020-12-21 00:11:14
364
原创 Vue.js案例 —— 课程管理系统一
课程管理系统一、项目部分效果图登陆页面主页面项目的数据是通过Mock模拟后端返回的接口数据二、项目介绍项目技术选型前端技术栈： vue + vuex + vue-router + ES6/5 + sass + Element-UI + Echarts + Axios服务端技术栈： mock.js三、功能实现登陆左侧栏 点击不同的菜单按钮跳转到不同的组件（显示不同的内容）首页可视化展示数据视频的成交量用户总量订单总额首页用来展示数据使用Echarts柱状图，
2020-12-20 22:59:56
1185
1
原创 解决vue-router报NavigationDuplicated: Avoided redundant navigation to current location 的问题
vue-router重复触发了同一个路由导致报错vue-router的报错，报错原因是重复触发了同一个路由。解决方法是在router /index的页面里面加入以下代码：const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}
2020-12-19 16:28:24
917
1
原创 Vue学习笔记 —— Vuex之辅助函数
mapState辅助函数作用：可以辅助获取到多个state的值import Vuex from "vuex";import Vue from "vue";Vue.use(Vuex);const state={ count:0, num:100}const getters={ changeCount(){ return state.count++ }}const actions={ acCountAdd({commit},val){
2020-11-24 14:23:57
176
原创 Vue学习笔记 —— Vuex之Getters
前言Getters只有当数据发生改变时才会重新倍计算（类似于计算属性）。示例需求：1、获取uers年龄（age）大于18岁的数据state: { user: [ {name: 'a', age: 18, id: 1}, {name: 's', age: 17, id: 2}, {name: 'd', age: 19, id: 3} ]},getters: { getUserAgeMore18: state => { return state.user.filter(s
2020-11-24 13:48:52
225
原创 Html5学习笔记 —— Canvas
创建画笔<body> <canvas id="mycanvas" width="300" height="600"></canvas></body><script> var canvas = document.getElementById('mycanvas') var ctx = canvas.getContext('2d')</script>fillRect() 绘制矩形，默认的填充颜色是黑色。c..
2020-11-24 00:23:40
162
原创 Vue学习笔记 —— Vuex之Models（模块化管理模式）
Models（模块化管理模式）Vuex的模块化管理模式即是，将store 分割成若干个模块（module）。其中每个模块拥有自己的 state、mutation、action、getter。配置// store/index.jsmodels:{ a:{ state:{}, mutation{} getters:{}, .... }}调用（models中的state）this.$store.state.a
2020-11-23 17:22:56
2877
3
原创 Vue学习笔记 —— Vuex基础
1. 安装npm i vuex -s在项目的根目录下新增一个store文件夹，在该文件夹内创建index.js。2. 使用1、初始化store下index.js中的内容：import Vue from 'vue'import Vuex from 'vuex'//挂载VuexVue.use(Vuex)//创建VueX对象const store = new Vuex.Store({ state:{ // }, mutations:{ // },
2020-11-23 17:02:08
152
1
原创 Vue学习笔记 —— 完整的导航解析流程
一个完整的导航解析流程导航被触发。在失活的组件（即将离开的页面组件）里调用离开守卫。 beforeRouteLeave调用全局的 beforeEach 守卫。在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。在路由配置里调用（路由独享的守卫） beforeEnter。解析异步路由组件在被激活的组件（即将进入的页面组件）里调用 beforeRouteEnter。调用全局的 beforeResolve 守卫 (2.5+)。导航被确认。调用全局的 afterEach
2020-11-23 16:23:40
165
原创 Vue学习笔记 —— 导航守卫
导航守卫：包括全局导航守卫和局部导航守卫。一、全局守卫router.beforeEach ：全局前置守卫，进入路由之前const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // to和from都是路由实例 // to：即将跳转到的路由 // from：现在的要离开的路由 // next：函数 })router.beforeResolve ：全局解析守卫
2020-11-23 16:20:28
190
原创 Vue学习笔记 —— vue-router之嵌套路由
嵌套路由配置const routes = [ { path: '/', redirect: '/index' //重定向 }, { path: '/index', name: 'Home', component: import('../views/Home.vue'), //路由懒加载 //嵌套路由 children: [ { path: '/index', redirect: 'product' //嵌套路由重定向 }, {
2020-11-22 16:49:32
196
原创 Vue学习笔记 —— vue路由懒加载及组件懒加载
vue路由懒加载及组件懒加载vue路由懒加载为什么要使用路由懒加载？为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。常用的懒加载方式有两种：使用vue异步组件component：resolve=>(['需要加载的路由的地址'，resolve])使用ES6中的importconst HelloWorld = （）=>import('需要加载的模块地址')1、未用懒加载，vue中的路由代码如下：import Vue from 'vue'import
2020-11-22 16:30:55
236
原创 Vue学习笔记 —— vue-router之编程式导航
编程式导航前言：Vue中除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router的实例方法，通过编写代码来实现。三种方式：字符串的方式 this.$router.push('/about')对象的方式 this.$router.push({path:'about'})命名路由方式 this.$router.push({name: 'Home'})补充：如何配置动态路由？//格式/h/:userI
2020-11-22 16:06:45
148
原创 Vue学习笔记 —— vue-router之router-link
router-link标签中属性to,指定跳转的路径。tag: 指定router-link渲染成什么元素，比如说渲染 button、li、span等等。replace: 不会留下history的记录，所以指定replace的情况下，后退或者是返回是不能返回到上一个页面。...
2020-11-22 15:13:08
137
原创 Html5学习笔记 ——— H5新增方法classList/dataSet
classListclassList方法可以获取到这个dom元素的类的对象，但是目前classList属性只有FireFox3.6+和Chrome支持。add(value) —— 添加一个类contains(value) —— 判断有没有某个类remove(value) —— 删除一个类toggle(value) —— 切换一个类replace() —— 替换一个类Css<style type="text/css"> #box { border: 1px re
2020-11-22 14:01:04
273
原创 案例 —— H5模拟电脑中的 “回收站的效果”与实现图片拖拽上传功能
1、模拟电脑中的 “回收站的效果”假设有六张图片，一个垃圾桶图片，拖动某一张图片放在垃圾桶上后，将图片直接从Dom节点中删除。删除需要从DOM子节点中删除元素，需要阻止dragover默认事件利用源对象（可以拖动的）和目标对象数据传递记录源对象的Id思路：1、获取元素，利用for循环为每个原对象添加事件，记录添加了哪个原对象2、在for循环中，为每个元素设置自定义属性，方便后期操作3、开始拖动某个图片时，利用 e.dataTransfer.setData()方法，将当前图片的id存储到d
2020-11-21 19:16:35
655
原创 案例 —— Html5实现列表拖放
需求：通过H5的拖放api，实现对列表的拖放替换效果。HTML<ul class="ul-list"> <li draggable="true" class="item">葫芦娃</li> <li draggable="true" class="item">直到世界的尽头</li> <li draggable="true" class="item">如果当时</li> <li draggable="tru
2020-11-21 17:33:28
496
1
原创 Html5学习笔记 ——— 拖放api与dataTransfer对象
前言拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。拖放API拖拽：Drag;释放：Drop;1、 开启/关闭拖放将将要拖放的对象元素的draggable属性设置为true，任何元素均可实现拖放，默认允许拖放。img与a元素必须指定href。draggable即是一个设置拖放的开关，为true，代表可以拖放，为false，代表不可拖放。<p draggable="true">这是p标签</p>2、拖动
2020-11-21 17:21:21
463
原创 Vue学习笔记 —— vue-router
路由的概念路由的本质是一种个对应关系，比如说在URL中输入要访问的url地址之后，浏览器要去请求这个地址对应的资源。为什么要使用路由？vue单文件应用，所以一般a标签跳转不再使用。这个时候我们需要借助vue-router插件来实现Vue组件之间的跳转。vue-router安装cnpm install vue-router --savenpm install vue-router --save1、重定向重定向通过 routes 配置来完成，重定向的目标可以是路径，已命名的路由，或者是一个方法
2020-10-21 16:15:09
330
原创 Vue学习笔记 —— 路径引入
前言在html文件中，通过script标签来引入js，而在vue文件中通过import方式导入文件。并且import不止是可以导入js文件。例：import HelloWorld from './components/HelloWorld.vue''HelloWorld'：指的是为导入文件气的一个名称，不是指导入文件的名称，相当于变量名'./components/HelloWorld.vue'：指的是文件的相对路径引入路径的方式以父子目录的方式定义相对路径：./ 指当前目录..
2020-10-21 13:50:15
710
原创 Vue学习笔记 —— axios
什么是axios？axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。主要用来实现ajax与后端服务器的数据交互。axios具有有以下特征：从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF安装$ npm install axios$ cnpm install axios //ta
2020-10-07 16:14:06
137
原创 Vue学习笔记 —— 生命周期
什么是生命周期？每个Vue实例在被创建之前都会经过一系列的初始化过程,这个过程就是vue的生命周期。同时Vue在一整个生命周期中，提供了很多钩子函数。利用这些钩子函数，我们可以在生命周期的不同时刻进行操作。钩子函数如下：beforeCreate ------------ 创建前状态created ------------ 创建完毕状态beforeMount ------------ 挂载前状态mounted ------------ 挂载
2020-10-07 15:52:38
200
原创 Vue学习笔记 —— 插槽
什么是插槽？插槽就是子组件提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。如下代码：//子组件<template> <div> <p>什么是插槽？</p> <slot></slot> </div></template><script>export default{ name: 'child
2020-10-04 15:53:46
199
原创 javascript —— js数组遍历方法总结
js数组遍历方法总结for循环使用临时变量，将长度缓存起来，当数组较大时优化效果才会比较明显。for(let i = 0, len=arr.length; j < len; j++) { //}foreach循环遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE。//item数组中的当前项, index当前项的索引, array原始数组；//数组中有几项，那么传递进去的匿名回调函数就需要执行几次；arr.forEach((item,index,array)
2020-10-04 12:51:25
204
原创 Vue学习笔记 —— 计算属性
一、什么是计算属性？模板内的表达式非常便利，但是更适用于简单运算的。放入太多的逻辑会让模板过重且难以维护。例如：<div> {{ message.split('').reverse().join('') }}</div>上面的表达式中包含了3个操作，看起来也不清晰，所以这种情况下，应该使用Vue的计算属性。二、计算属性的用法一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。上面的例子用计算属性可以写成：<div id=
2020-10-04 11:45:41
615
原创 Vue学习笔记 —— 组件间的通信
前言Vue.js中的组件实例的作用域是相互独立的，不同组件之间的数据是无法相互引用的。组件可以分为以下几种关系：如上图所示：A和B；C和B；B和D都是父子关系，C和D是兄弟关系，A和C是隔代或者隔多代的关系。因此针对不同的使用场景，我们需要选择不同的通信方式。Vue中常用的组件通信方式有一下几种：props / $emit$emit / $on$parent / $children与 refVuex$attrs / $listeners方法一：props / $emit父组件A
2020-10-02 10:11:17
155
原创 Vue学习笔记 —— TodoList效果vue组件化实现
TodoList效果vue组件化实现需求：文本框输入计划事件，回车之后，事件会出现在“未完成”区域中，文本框清空。点击事件前对应的复选框，事件会移至“已完成/未完成”区域中，反之取消复选框勾选，事件会返回至“未完成”区域中。点击删除按钮，对应事件将会被删除。刷新页面，数据不会清空（本地存储）。点击“清除本地存储”按钮，刷新页面，数据将会清空CSS样式：<style> .box{ display: flex; flex-directi
2020-09-29 19:45:36
364
原创 Vue学习笔记 —— node.js与vue脚手架安装
nodejs简介：Node.js 是一个开源与跨平台的 JavaScript 运行时环境。JavaScript程序可以运行在浏览器中JavaScript程序可以运行在Node.js环境中Node.js在浏览器外运行的。安装Vue脚手架需要先安装Node.js (安装好了的不要随意卸载Nodejs)安装Node.js:win+r输入cmd 或者在我的电脑打开cmd下载Node.js：（找到与自己电脑对应的）中文文档地址：双击打开下载好的node.js，点击next，勾选两个复选框即可。
2020-09-21 18:40:27
587
原创 Vue学习笔记 —— 注册组件
什么是组件化开发？如果将一个页面所有的逻辑代码全部放在一起，当我们想要改变一些内容或者样式，处理起来会非常复杂，而且也不利于后续管理以及拓展。我们可以将一个页面拆分成一个个小的功能模块，每个功能块完全属于自己这部分的独立功能，那么后面整个页面和维护就变得比较容易。使用组件的好处：减少代码量，提高开发效率代码可以重复使用更容易被管理和维护便于协同开发组件是由HTML+Css+Js组成组件嵌套使用组件它是可以在，任意组件中使用的，但是局部组件之间不可以直接相互使用，如果需要相互使用就
2020-09-16 21:31:11
184
原创 Vue学习笔记 —— Vue.directive自定义指令
Vue.directive —— 自定义指令Vue中除了默认设置的核心指令( v-model 和 v-show )，Vue 也允许注册自定义指令，可以对纯 DOM 元素进行底层操作，这时候就会用到自定义指令。创建全局自定义指令使用Vue.directive()创建全局自定义指令。其中my-color为指令名称。定义指令名称的时候，不需要加v-前缀，调用的时候，必须在名称前加上v-。Vue.directive('my-color', function(el, binding, vnode){
2020-09-16 19:17:06
232
原创 Vue学习笔记 ——全局AIP（下）（Vue.nextTick、Vue.extend、Vue.filter）
Vue.nextTick()将回调函数延迟在下次dom更新数据后调用，当数据更新了，在dom中渲染后，自动调用该函数。写法：Vue.nextTick([callback,context]) 参数：{Function} [callback]{Object} [context]什么时候需要用Vue.nextTick()？在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。在created()钩子函数执行的时候DOM还没有进行
2020-09-01 16:01:40
196
原创 Vue学习笔记 ——全局AIP（上）（Vue.set、Vue.delete）
Vue.setVue.set用于设置对象的属性根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。解决方案：使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：//object是要修改的对象//key是要修改的属性//value是要修改的属性值Vue.set(object, key, value)Vue.set(vm.obj, 'e', 0)或者使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名
2020-09-01 14:36:19
235
原创 Vue学习笔记 —— 走马灯（基于Vue.js）
HTML结构：<div id="app"> <button type="button" @click="handle1">浪起来</button> <button type="button" @click="handle2">低调</button> <button type="button" @click="handle3">字体变大</button> <button type="b
2020-08-30 19:16:00
352
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人