- 博客(16)
- 收藏
- 关注
RSS订阅原创 vue中的插槽slot以及插槽向外传值
1. vue 2.6.0版本之前的slot插槽： 用slot='' 替代表示对应的插槽。<!--1.插槽组件中： 匿名插槽和具名插槽--><div> <slot></slot> <slot name='content'></slot></div><!--2. 使用插槽组件：--><child> <div></div> <di
2020-06-30 23:41:52
6681
原创 vue的路由管理包括路由取别名，页面懒加载，重定向，动态路由传参，嵌套路由，命名试图，404页面
1. router/index.js：实例化路由。import Vue from 'vue'import VueRouter from 'vue-router'import routes from './router'Vue.use(VueRouter)const router = new VueRouter({ routes})export default router2. router/router.js：路由配置管理。import Home from './vi
2020-06-27 17:22:20
450
1
原创 vue的动态组件component
1. 使用：如用于动态绑定表单组件。<component :is="item.type" v-model='item.value'> <component :is="item.type" v-model='item.value' v-if="(tag,i) in item.children" v-if='item.children' is="tag.type" v-model='item.value' :key="`${_uid}_${index}`"> <.
2020-06-25 12:40:22
1098
原创 vue项目大量数据渲染页面优化---vue-virtual-scroll-list插件
0. git库：https://www.npmjs.com/package/vue-virtual-scroll-list1. 下拉列表数据很多时的优化渲染：引入vue-virtual-scroll-list插件。通过每次只渲染指定条数，比如6条，即使下拉列表中有上千条数据，也能很每次只渲染6条，从而减少渲染，优化页面。 1.1 下载：npm install --savevue-virtual-scroll-list。 1.2 使用：iview的下拉/多选框组件的中大量数据...
2020-06-25 12:14:05
7348
原创 vue页面跳转，以及携带参数，获取参数
js操作路由(即编程式的导航)进行页面跳转： 1. 返回/前进一页：返回：this.$router.go(-1)、this.$router.back()。前进：this.$router.go(1) 2. 跳转到其他页： //params只能用name来引入路由,类似于post，在浏览器地址栏中不显示参数，//而query 要用path引入,似于我们ajax中get传参，在浏览器地址栏中显示参数this.$router.push("/parent")thi...
2020-06-25 11:09:09
3119
原创 vue cli3+ 搭建的vue项目中的vue.config.js相关简单配置
1. vue cli官网：https://cli.vuejs.org/zh/2. vue.config.js：如果没有，就在根目录下创建一个vue.config.js文件。const path = require('path')const resolve = dir => path.join(__dirname,dir)module.exports={ baseUrl:process.env.NODE_ENV ==='procution'?'/static-prd':'/',
2020-06-25 11:01:37
459
原创 vue中使用mock
1. 开发者模式下下载mockjs：npm install mockjs -D。mock拦截axios请求，响应自定义数据。2. 在mock/index.js文件下：import Mock from 'mockjs'Mock.mock(/user\.json/, { 'list|1-10': [{ 'id|+1': 1, 'email': '@EMAIL' }]})export default Mock3. 在axios请求mock数据：axios..
2020-06-25 10:35:08
128
原创 vue cli3+搭建项目的相关配置-----之.editorconfig文件配置
1..editorconfig文件配置官网：https://editorconfig.org/。2..editorconfig配置说明：# 告诉EditorConfig插件，这是根文件，不用继续往上查找root = true# 匹配全部文件[*]# 设置字符集charset = utf-8# 缩进风格，可选"space"、"tab"indent_style = tab # 缩进的空格数indent_size = 4# 结尾换行符，可选"lf"、"cr"、"crlf..
2020-06-23 18:10:05
2256
原创 nuxt中使用axios/@nuxtjs/axios 以及使用mock
1. 搭建nuxt项目：参考https://blog.csdn.net/qq_42231156/article/details/90174203。2. nuxt中使用全局axios：参考：https://blog.csdn.net/weixin_30794491/article/details/99910973。 2.1 如果pageage.json中的dependencies没有"@nuxtjs/axios"就下载安装：npm install --save @nuxtjs/axios ...
2020-06-19 10:04:12
3723
原创 uniapp/微信小程序获取微信授权/地理位置授权/二次授权
<template> <view class="auto-login h100 flex a-center j-center"> <view class="content flex flex-column a-center j-center"> <view class="title">{{status==='userInfo'?'授权登陆':'授权地址位置'}}</view> <button open-type="getU.
2020-06-18 10:41:52
1660
1
转载 VSCode详细使用教程
参考：https://blog.csdn.net/weixin_45601379/article/details/100550421。
2020-06-16 11:04:40
493
原创 nuxt.js使用swiper5+
1. 下载：npm install swiper --save2. 再nuxt.config.js引入swiper.css：module.exports = { css: [ "assets/css/reset.css", 'node_modules/swiper/css/swiper.css' ],}3. 组件中使用：<template> <div class="home"> <div class="swiper-.
2020-06-13 16:13:40
1011
原创 render函数的渲染
1. 官网：https://cn.vuejs.org/v2/guide/render-function.html。2. render使用：render:h=>{ return h(a,b,c) //a为标签字符串或引入的组件名（如'div'/ mySwiper），b为对象，表示该标签的属性，可以不写该参数，c为字符串或者数组子元素（内容或者子标签）。}//1. 使用方法1render:h=>{ return h(mySwiper,{ 'cla
2020-06-10 08:48:01
1036
原创 vue-cli3+技术栈实战完整笔记（二）
1. vue中使用mock模拟ajax（axios）响应。 1.1 mock官网：http://mockjs.com/。 1.2 mock下载：npm install mockjs。 1.3mock引入：在非生成环境中的main.js引入if(process.env.NODE_ENV !='production'){ //require('./mock')} 1.4mock使用：创建mock.js，在main.js中非生成下全局引入。impo...
2020-06-07 22:14:59
185
原创 vue通过h5拖拽实现假拖拽效果
1. h5的拖拽浏览器的支持：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。在 Safari 5.1.2 中不支持拖放。1. 设置标签可以拖拽属性：draggable="true"<div draggable="true" ></div>2. 拖拽顺序：3.在拖拽事件中遇到目标元素ondrop事件没有效果，需要在目标元素上写ondragover事件，阻止ondragover的默认行为..
2020-06-04 20:26:55
667
1
原创 vue实现可以滑动的轮播图
<template> <div class="my-swiper wh" ref="mySwiper"> <ul class="my-swiper-wrap" :style="{width:classobj,transform: translateXVal}" v-if="isShow" @mouseenter="enter" @mouseleave="leave" @mousedown="mousedown($event).
2020-06-03 15:56:34
2859
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人