- 博客(29)
- 收藏
- 关注
RSS订阅原创 Tree组件实现文件目录——高级实现
一.封装文件目录组件二.操作目录三.多个属性v-model替代方案四.增加钩子函数一.封装文件目录组件1.准备阶段，在components中新建folder-tree文件夹，在其中新建folder-tree.vue和index.js<template> <div> <Tree :data='folderTree' :render='renderFunc'></Tree> </div></template>
2020-05-27 22:51:23
860
原创 Tree组件实现文件目录——基础实现
一.准备阶段1.在views文件中新建文件夹folder-tree和folder-tree.vue文件2.配置路由信息{ path: '/', alias: '/homee', name: 'Home', component: Layout, children: [ { path: 'folder_tree', component: () => import('@/views/folder-tree/folder
2020-05-25 01:17:44
1310
原创 Vue可编辑表格的实现——多表格编辑
基于: Vue可编辑表格的实现——单元格编辑表格.1.创建新的组件如下图，并在table.vue示例页引入只编辑一个单元格，可以通过确定唯一的id值实现，在edit-table-mul中2.创建一个新的字段insideDatadata () { return { insideData: [], insideColumns: [], // 使用表格的行号和key值即可以确定一个单元格 edittingId: '', edittin
2020-05-22 03:41:35
2925
原创 Vue可编辑表格的实现——单元格编辑表格
一.准备阶段1.在views中创建table实例页并配置路由<template> <div> </div></template><script>import { getTableData } from '@/api/data'export default { data () { return { tableData: [], columns: [ { key: 'name',
2020-05-22 00:52:54
11244
原创 Vue可收缩多级菜单的实现
本文以 Vue使用ivew组件实现响应式布局.为基础继续进行1.递归组件实战封装菜单组件1.在components文件夹中新建side-menu文件夹在该文件夹中新建side-menu.vue、re-submenu.vue、re-dropdown.vue、index.js文件2.配置index.js// 另外两个组件我们在side-menu中用，所以不用导出import SideMe...
2020-04-27 01:44:39
1722
原创 Vue使用ivew组件实现响应式布局
1.vue-cli3.0中使用iview链接: Vue-cli3.0中使用iview.1.在控制台启动vue ui2.在vue ui中搜索并安装iview或者直接在控制台输入cnpm install iview3.安装好后重启项目4.在main.js中引入import iview from 'iview'import 'iview/dist/styles/iview.css'...
2020-04-26 00:40:50
2148
原创 Vue-cli3.0中使用iview
Vue-cli3.0中使用iview1.全局引入在项目入口文件./main.js中需要配置如下：import Vue from 'vue'import iview from 'iview'import 'iview/dist/styles/iview.css'Vue.use(iview)2.按需引入首先你需要安装一个babel插件: npm install babel-plu...
2020-04-25 17:27:51
3991
原创 Vue组件(二)从SplitPane组件谈Vue中如何‘操作’DOM
准备阶段1.在components文件夹下创建split-pane文件夹2.在路由配置（router文件夹的rooter.js中配置）{ path: '/split-pane', name: 'split_pane', component: () => import('@/views/split-pane.vue') }3.在视图文件夹内创建split-...
2020-04-21 01:32:10
3222
原创 Vue组件(一)从CountUp.js 组件谈Vue中如何封装组件封装
本文主要从数字渐变组件谈第三方JS库的使用1.组件封装基础1.1准备阶段在views文件夹下新建count-to页面在路由中进行配置{ path: '/count-to', name: 'count-to', component: () => import('@/views/count-to.vue') },组件封装需要放在components文件夹...
2020-04-20 12:18:09
1091
原创 Mock模拟ajax响应
准备阶段在src文件夹下的store文件夹下创建建mock文件夹，创建index文件并在main.js中引入，同时做非生产条件环境判断if (process.env.NODE_ENV !== 'production') require('./mock')...
2020-04-18 23:06:19
545
原创 vuex和双向绑定
v-model知识: link.通过v-model无法对set中的值进行赋值修改，需要在组件中提交mutation进行修改eg1在state.js中定义一个状态值const state = { stateValue: '123'}export default state在mutation.js中配置，并在组件页面中引入const mutations = {SET_STAT...
2020-04-03 14:03:32
1972
原创 vuex插件使用
本文主要介绍如何使用vuex持久化存储插件 ，由于每次浏览器重启后存储在内存中的store中的状态都会被清除，所以当我们需要长期保存数据时可以使用这个插件1.配置文件插件目录在store文件夹下创建plugin文件夹并新建saveInLocal.js文件2.插件使用在我们创建实例的地方（index.js）引入import Vue from 'vue'import Vuex from '...
2020-04-02 16:51:05
564
原创 Vue状态管理vuex之modules
modules将 store 分割成模块，每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块(模块中包含模块)eg1在模块中使用actionsconst actions = { // 参数为对象的形式，分别为 // commit 用来提交mutation // state 用来指代当前实例（上文定义的state） // rootS...
2020-04-02 12:23:27
439
原创 Vue状态管理vuex之action
Action 类似于 mutation，通常用于修改接口请求的数据，不同在于： Action可以异步，但不能直接操作State，操作state的方法全部依靠commit mutation完成 Action提交的是 mutation，而不是直接变更状态。 Action可以包含任意异步操作。eg1修改根级别的appName(假设通过接口请求)开始前确定在sto...
2020-04-02 12:23:12
552
原创 Vue状态管理vuex之mutation
vuex流程在绿色线框中，首先从API中拿数据，就会牵扯到异步操作，所以我们把异步操作定义在action中，在组件中触发一个action，action里面有一个ajax请求，去请求后端的一个接口，拿到数据以后我们只需要改变state中的状态就可以了，改变状态的唯一方式是commit提交一个mutation，提交以后state状态改变了，状态改变后视图就会改变因为Vuex是响应式的。...
2020-03-31 13:14:58
331
原创 Vue状态管理vuex（一）state&getter
找到src文件下的router文件夹，可以看到我们之前配置好的store文件夹以及其包含的子文件index.js文件内是我们的根状态管理，可以将一些更独立的模块独立出来（比如跟用户信息相关的user.js）,在index.js中我们首先引入vue和vuex,并使用vue的use方法引入vuex，在通过vuex.store创建实例import Vue from 'vue'import Vue...
2020-03-28 22:55:54
355
原创 Vue状态管理bus的使用
在开发过程中我们经常会遇到两个兄弟组件之间的需要通信的情况，虽然我们可以使用Vue2.X提供的Vuex状态管理模式，但对于简单的应用，我们可以使用BUS作为中央事件总线，来实现兄弟件之间的传值，从而更加的便捷。1.在src文件夹下新建一个bus文件夹并创建index.js文件作为配置文件2.配置完成后将其引入到main.js中，并在vue原型对象上添加bus页面一：<templ...
2020-03-28 11:11:27
309
原创 Vue路由的切换动效
如果需要路由有过渡动画，需要在< router-view>标签的外部添加< transition>标签，如果有多个< router-view>标签则需在外部添加< transition-group>,同时标签还需要一个name属性并为每一个组件设置一个key值。css过渡类名：组件过渡过程中，会有CSS类名进行切换，类名与transition的...
2020-03-27 21:27:52
593
1
原创 Vue路由元信息
在路由列表里的每一个路由对象可以对其配置一个meta字段，里面可以存放我们要定义的信息（比如页面的权限）eg根据当前页面显示不同的title在路由列表中设置meta字段在前置守卫中设置方法，并在跟业务相关的工具方法放在util.js中（在此我们定义setTitle方法），并通过解构赋值引入...
2020-03-27 21:27:29
109
原创 Vue导航守卫相关知识
路由守卫可以帮我们在路由跳转的同时进行一些逻辑处理（判断用户是否登录，判断用户权限等）全局守卫每次路由跳转都会被触发eg模拟简单的登录条件在视图组件中创建login页面，再到配置文件中设置路由当 HAS_LOGINED = true 为false 用户无法实现页面跳转路由独享的守卫...
2020-03-27 21:26:16
105
原创 HTML5 History模式，vue路由去除#
参考来源：jigsawvue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。项目后期需要去除#，则可以采用history模式，这种模式利用 history.pushState API 来完成 URL 跳转且无须重新加载页面。不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台...
2020-03-26 16:53:11
246
原创 Vue路由组件传参
路由组件传参HTML5 History模式导航守卫路由元信息过度效果路由组件传参$route对象$route是路由传参中用来记录vue组件参数的对象eg://router.js{ path:'/main/:id',component:Main }<router-link to='/main/123'></router-link>//Mai...
2020-03-26 16:52:28
154
原创 Vue路由相关（一）
一.router-link和router-view组件1.1router-link组件相当于封装了一个a标签二.路由配置2.1动态路由2.2嵌套路由2.3命名路由2.4命名视图三.js操作路由四.重定向和别名...
2020-03-12 02:41:15
193
原创 针对Vue初始项目的整理和配置
一.针对Vue初始项目的整理和配置查看vue-cli为我们生成的项目目录1.找到最外层的配置文件，里面的配置用来控制是否每次保存时是否启用eslint检查代码，根据自身情况选择 devServer可以将没有匹配到静态文件的请求都代理到这个URL从而满足跨域的请求2.package.json文件定义了如项目名称、项目版本、项目依赖等项目描述3.public文件夹内存放公共文件，in...
2020-01-10 09:55:20
246
原创 使用Vue-cli创建Vue项目
vue(这里写自定义目录标题)欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的...
2020-01-10 08:35:00
113
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人