- 博客(24)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 Vue 分装element-ui table
element-ui 表格的表头代码是运用组件实现的 如果表格数据很多（很多列）则代码会显得特别冗余，这里模仿iview-ui 运用数据驱动表格，对element-ui进行封装封装之后element-ui table 显得非常简单，还可以拓展element-ui table中的其它功能1、创建link文件夹，里边创建一个linkData.jslinkData.js数据管理中心 存储所有的相关数据//引入方法import linkEnum from './methodsData'//引
2021-01-28 14:10:50
540
原创 Less vue+node 初认知
less官网安装npm install -g less基本使用1、选择器的嵌套<template> <div> <div class="lessbox"> <h1>less语言初步入门</h1> <span>Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展</span> </.
2021-01-28 10:05:41
113
原创 ***Vue-router 导航守卫***
Vue-router 导航守卫vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中，导航守卫主要分三种，全局的, 单个路由独享的, 或者组件级的全局前置守卫这个守卫我们主要用来判断登陆验证，如果当前的用户没有进行登陆，我们可以跳转到登陆页等等router.beforeEach((to, from, next) => { })to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的
2021-01-25 17:29:01
89
原创 Vue-router 路由重定向
如果手输入路由的过程中，没有匹配到对应的页面，此时应该抛出一个404无页面的状态新建一个 error.vue 作为404的内容页面配置一个路由 index.js中{ path:'/404', name:'404', component:()=> import('@/views/error')},{// *指的是匹配所有没有匹配到的页面 path:'*',// 重定向，重定向到404的路由 redirect: '/404'}*代表的是任
2021-01-25 17:01:37
1134
原创 ***Vue-router 跳转模式hash和history***
vue-router的跳转主要有两种方式hash和historyhash即地址栏URL中的#号，比如http://mashibing/#/home这种路由就是hash路由，hash虽然后出现在url中，但是不会被包括在HTTP请求中，对后端没有影响history利用了HTML5的History Interface 中新增的pushState()和replaceState()，借鉴出的vuehistory模式，如果你需要配置history模式，必须要和后端进行统一，否则会出现404如果配置hash
2021-01-24 19:42:52
650
原创 Vue-router 编程式导航
编程式导航是通过js进行导航驱动，之前声明式是通过点击元素进行跳转基本使用<template><div> <div class="box"> <div class="left" @click="toHome"> 首页 </div> <div class="right" @click="toSport"> 体育
2021-01-24 19:40:25
128
原创 ***Vue-router 路由别名配置***
根目录新建文件 vue.config.jsconst path = require("path")function resolve(dir) { return path.join(__dirname, dir)}module.exports = { chainWebpack: (config) => { // 第一参数@$代表别名，第二个参数代表替代的开始路径 config.resolve.alias.set("@s", resolve('.
2021-01-24 19:23:41
385
原创 Vue-router 路由懒加载
路由懒加载也叫延迟加载现在路由使用情况import Home from '../views/Home.vue'import Sport from '../views/Sport.vue'let router = new VueRouter({ routes: [{ // 路由地址 path: '/home', // 对应的路由显示的组件 component: Home },
2021-01-24 19:19:36
126
原创 Vue-router 路由参数
1、path 和 query下面的代码router-link的to参数，是一个地址<router-link to='home'>点击跳转到home</router-link>可以通过to参数传入一个对象<router-link :to="{path:'/home',query:{a:1,b:2,c:3}}">点击跳转到home</router-link>query接收的是一个对象，内部的是配置的参数2、name和pa...
2021-01-24 19:16:35
457
原创 Vue-router 路由嵌套
例：页面中一级导航 首页+ 新闻 +体育二级导航 ：首页 > 关于我们+ 联系我们体育> 足球 + 篮球 + 排球三级导航：联系我们> 北京 + 上海在路由参数中怎加一个children属性，值是一个数组，数组内部是一个个路由 JSON数据。children内部是二级路由的参数，和一级的配置是一样的，所以，如果需要三级路由，还可以继续设置children，无限嵌套。index.jsimport Vue from 'vue'import VueRout..
2021-01-24 19:01:40
957
原创 Vue 路由重复点击报错问题
如果重复点击路由跳转的时候会遇到报错的情况在vue-router的配置怎加以下代码 便可以解决router > index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const originalPush = VueRouter.prototype.push VueRouter.pr..
2021-01-24 11:33:17
346
3
原创 Vue-router $router和$route
$router 是 VueRouter的实例，对象包括了vue-router 使用的实例方法，还有实例属性，说白了 $router有设置的含义，比如设置当前的跳转、当前的返回......go,back,forward方法goBack1(){ this.$router.go()}goForward(){ this.$router.forward()},goBack(){ this.$router.back()}$router.go()指的是跳转history
2021-01-24 11:28:25
227
1
原创 Vue-Router 路由基本使用
Vue-Router 官网官方介绍Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为npm 安装 npm install --sav...
2021-01-23 11:45:43
305
2
原创 Vue 封装grid布局
Grid布局博客地址Vue-iView-ui Grid布局代码有些 冗余，现在封装一套自己的grid布局 以 from表单为例第一种方法创建Grid 文件夹，创建Grid和GridItem 组件Gird.vue<template> <Form :label-width="80" class="grid" :style="style"> <slot></slot> </Form><...
2021-01-21 22:07:46
2666
原创 Vue-iView-ui Grid 栅格
基本使用iView-ui Grid栅格 官网官方介绍：我们采用了24栅格系统，将区域进行24等分，这样可以轻松应对大部分布局问题。使用栅格系统进行网页布局，可以使页面排版美观、舒适。我们定义了两个概念，行row和列col，具体使用方法如下：使用row在水平方向创建一行 将一组col插入在row中 在每个col中，键入自己的内容 通过设置col的span参数，指定跨越的范围，其范围是1到24 每个row中的col总和应该为24如果写栅格的时候报下图错在package.js
2021-01-20 10:14:41
792
原创 Vue-i18n 国际化
基本使用安装 npm install --save vue-i18n创建lang 文件夹index.js中引入i18n并使用import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n({ // 设置当前语言 locale: 'zh', messages: { 'zh': { name: '..
2021-01-19 22:45:21
1839
原创 iview-ui 表格拓展
1、render 拓展iview-ui 官网安装npm install view-design --savemain.js中引入import Vue from 'vue'import App from './App.vue'//引入iviewUiimport iviewUi from 'view-design'import 'view-design/dist/styles/iview.css'Vue.use(iviewUi)Vue.config.productionT
2021-01-19 16:30:20
388
原创 element-ui 表格拓展
对表格数据的过滤：比如性别返回的是 0 和 1 ，所以需要对0和1 分别进行处理 渲染想要的结果table-colun提供了一个 slot 插槽功能，内容可以 拓展自定义内容<template slot-scope="Sex"> <div> {{getSex(Sex.row.sex)}} </div></template>例：APP.vue <template&...
2021-01-19 11:00:18
462
原创 Vue-element-ui-表单校验
Vue-element-ui基本使用element-ui 中文文档安装npm install --save -dev element-uimain.js中引入 并引入 cssimport Vue from 'vue'import App from './App.vue'//引入element-uiimport elementUi from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(el
2021-01-18 15:47:38
857
原创 ***Vue-局部参数***
在new Vuex({})的时候，vuex的参数对象，除了可以罗列modules之外，还可以设置state，mutations，getters，actions，和之前设置的单一对象相同。store.jsimport Vuex from 'vuex'import Vue from 'vue'import news from './news.js'import sports from './sports.js'import user from './user.js'Vue.use(Vuex)
2021-01-17 17:30:04
170
原创 Vue-modules
单一模块：例import axios from 'axios'export default{ state:{ a:50 }, mutations:{ add(state,{a}){ state.a += a } }, getters:{ }, actions:{ addServe({commit}){ // conso
2021-01-17 10:46:33
648
原创 Vue-actions 跨域
Vuex actionsactions类似mutations，不同点在于：actions提交的是mutations，而不是直接改变状态。actions可以包含任意的异步操作actions是处理异步任务的 mutations是处理同步小案例：每点击一次按钮 怎加服务器服务器数字node服务：app.js//引入expressconst express = require('express') //创建app应用let app = new express()//处理get请求a.
2021-01-16 21:49:32
314
原创 Vue-cli 代理跨域 利用axios完成请求服务
利用nonde + vue 实现首先利用express服务处理请求任务安装expressnpm install --save -dev express创建app文件夹 > app.js 文件app.js文件//引入expressconst express = require('express') //创建app应用let app = new express()//处理get请求app.get('/add',function(req,res){ res.s.
2021-01-16 12:10:03
151
原创 vuex getters-ToDoList
Vuex的属性gettersVuex的getters其实就是全局的一个computedVuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算基本使用store.js中定义了一个list数组和newlist数组export default{ state:{ list:["东风","西风","南风","北风"],
2021-01-15 15:04:15
203
打气球小游戏-面向对象.zip
2020-12-18
canvas游戏FlappyBird
2020-12-17
canvas游戏FlappyBi
2020-12-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人