vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>Element UI简单Cascader级联选择器使用</p>
<el-cascader :options='options' v-model="selectedOptions" @change="handleChange">
</el-cascader>
<div class="select_box">
<p>mockjs的数据Element UI的select组件做的二级联动效果</p>
<el-select v-model="shopRegoin" placeholder="请选择" @change="selectShopRegoin">
<el-option v-for="item in shopList" :key="item.type" :label="item.shop" :value="item.type">
</el-option>
</el-select>
<el-select v-model="shopName" placeholder="请选择">
<el-option v-for="item in shopNameList" :key="item.type" :label="item.shop" :value="item.type">
</el-option>
</el-select>
</div>
<!-- 去下一个页面 -->
<div class="btn_box select_box">
<el-button type="primary" @click="goNextPage">去下一个页面看看</el-button>
</div>
</div>
</template>
<script>
import { cityList } from '../netconnet/api'
export default {
name: 'HelloWorld',
data() {
return {
msg: 'hello,vuejs',
selectedOptions: [],
options: [], //级联数据
shopRegoin: '',
shopName: '',
shopList: [], //门店区域
shopNameList: [], //门店名字
}
},
created() {
this.getList()
this.getMockData()
this.postMockData()
},
methods: {
//es6写法
async getList() {
try {
let res = await cityList(null)
console.log(res)
this.$eleMessage('数据成功返回', 'success', 500)
} catch (e) {
console.log(e)
}
//原始写法
// cityList(null).then(res=>{
// console.log(res,'res')
// }).catch(err=>{
// console.log(err,'err')
// })
},
//change事件
selectShopRegoin(val) {
console.log(val, 'val')
let vIndex = this.shopList.findIndex(e => {
return e.type == val
})
this.shopNameList = this.shopList[vIndex].shopNameList; //二级联动的数组;
this.shopName = this.shopNameList[0].type;
console.log(this.shopNameList, 'this.shopNameList')
},
//模拟mock get请求
getMockData() {
this.$http.get('/getshop/list').then(res => {
this.shopList = res.data.data.shopList;
console.log(res, 'getMock数据')
this.$eleMessage('get的mock数据成功返回', 'success', 1500)
})
},
//模拟mock post请求
postMockData() {
let data = {
type: 'see',
key: '123456789'
}
this.$http.post('/postshop/list', data).then(res => {
// 级联选择
this.options = res.data.data.shopList.map(e => {
return {
value: e.type,
label: e.shop,
children: e.shopNameList.map(i => {
return {
value: i.type,
label: i.shop
}
})
}
})
console.log(res.data, 'postMock数据')
this.$eleMessage('post的mock数据成功返回', 'success', 3000)
})
},
handleChange(val) {
console.log(val, '值');
},
//vue 跳转
goNextPage() {
//1.push方式可以产生历史记录
this.$router.push({
name: 'test',
query: {
age: 20,
sex: '男',
goodName: encodeURI(encodeURI('中文参数转码套两层encodeURI,同理解码decodeURI也套两层'))
}
})
//2.用replace的方式不会产生历史记录
// this.$router.replace({
// name:'test',
// query:{
// age:20,
// sex:'男',
// goodName:encodeURI(encodeURI('中文参数转码套两层encodeURI'))
// }
// })
}
}
} </script>
<style scoped>
.select_box {
margin-top: 30px;
} </style>
2.mockjs使用方法 npm/cnpm install mockjs -S 具体参照官网(我这里给出的是快捷使用快捷配置方法)新建一个文件夹mock新建一个mockjs文件如下:
// 使用 Mock
import Mock from 'mockjs'; // 配置 Mock 路径
require.config({
paths: {
mock: 'http://mockjs.com/dist/mock'
}
})
// mock一组数据
const shopData = {
"code": 0,
"data": {
"mockObj":{
"tip":'hello,我教你手把手玩mockjs',
"date":'2018-11-30'
},
"shopList": [{
"type": 1,
"shopNameList": [{
"type": 1,
"shopNameList": [],
"shop": "母婴店1"
},
{
"type": 2,
"shopNameList": [],
"shop": "母婴店2"
},
{
"type": 3,
"shopNameList": [],
"shop": "母婴店3"
},
{
"type": 4,
"shopNameList": [],
"shop": "母婴店4"
},
{
"type": 5,
"shopNameList": [],
"shop": "母婴店5"
},
{
"type": 6,
"shopNameList": [],
"shop": "母婴店6"
},
{
"type": 7,
"shopNameList": [],
"shop": "母婴店7"
},
{
"type": 8,
"shopNameList": [],
"shop": "母婴店8"
},
{
"type": 9,
"shopNameList": [],
"shop": "母婴店9"
},
],
"shop": "南山分店"
},
{
"type": 2,
"shopNameList": [{
"type": 10,
"shopNameList": [],
"shop": "烧烤店1"
},
{
"type": 11,
"shopNameList": [],
"shop": "烧烤店2"
},
{
"type": 12,
"shopNameList": [],
"shop": "烧烤店3"
},
{
"type": 13,
"shopNameList": [],
"shop": "烧烤店4"
}
],
"shop": "宝安分店"
},
{
"type": 3,
"shopNameList": [{
"type": 14,
"shopNameList": [],
"shop": "酒店1"
},
{
"type": 15,
"shopNameList": [],
"shop": "酒店2"
}
],
"shop": "罗湖分店"
},
{
"type": 4,
"shopNameList": [{
"type": 16,
"shopNameList": [],
"shop": "按摩店1"
},{
"type": 17,
"shopNameList": [],
"shop": "按摩店2"
}],
"shop": "福田分店"
}
]
},
"msg": "请求成功"
} // Mock.mock( url, post/get , 返回的数据);此处可以模拟post和get 请求
Mock.mock('/postshop/list', 'post', shopData); Mock.mock('/getshop/list', 'get', shopData);
3.mainjs如下:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
Vue.prototype.$http = axios;
require('./mock/mock.js')
Vue.use(ElementUI); //element Message全局配置组件调用 this.$eleMessage('内容','消息类型','持续时间')
Vue.prototype.$eleMessage = function (msg,tip,time) {
this.$message({
message: msg,
type: tip,
duration:time
})
} Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
//store,
render: h => h(App)
})
4.接受路由编码后的参数并解码:
<template>
<div class="test_box">
<p>hell,你好</p>
<p>encodeURI编码后转码的路由参数内容----<span style="color: red">({{routerParmas}})</span></p>
</div>
</template>
<script>
export default {
data() {
return {
routerParmas:decodeURI(decodeURI(this.$route.query.goodName)),
}
},
created(){ },
methods:{ }
} </script>
5.路由懒加载三种方式:
import Vue from 'vue'
import Router from 'vue-router'
//方式一:最简单直接的使用组件
//import HelloWorld from '@/components/HelloWorld'
//import Test from '@/components/test' //方式二:webpack自带的模块按需加载 r就是resolve
//const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'HelloWorld'); Vue.use(Router) const router = new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: resolve => require(['@/components/HelloWorld'], resolve)//方式三:懒加载方式
},{
path: '/test',
name: 'test',
component: resolve => require(['@/components/test'], resolve)
}
]
}) export default router;
vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式的更多相关文章
- vue+element ui项目总结点(二)table合计栏目,按照起始年份--截止年份 插入数据并向后追加数据以最后一条年份+1
1.oninput 事件在用户输入时触发; <template> <div class="test_box"> <p>hell,你好</p ...
- vue+element ui项目总结点(六)table编辑当前行、删除当前行、新增、合计操作
具体属性方法参考官方网站:http://element-cn.eleme.io/#/zh-CN/component/installation <template> <div clas ...
- vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等
vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
- vue+element ui项目总结点(三)富文本编辑器 vue-wangeditor
1.参考 https://www.npmjs.com/package/vue-wangeditor 使用该富文本编辑器 <template> <div class="egi ...
- vue+element ui项目总结点(五)Carousel 走马灯组件、Collapse 折叠面板、Tree 树形控件
<template> <div class="ele_test_box"> <!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档--& ...
- vue-cli3项目首页加载速度优化(cdn加速,路由懒加载,gzip压缩)
今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...
- vue项目性能优化(路由懒加载、gzip加速、cdn加速)
前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...
- vue-router路由懒加载(解决vue项目首次加载慢)
懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单 ...
- vue-cli 项目实现路由懒加载
在vue 单页应用中,如果路由不实现懒加载,那么打包出来的文件将会非常大,加载也会非常慢.vue-router 官网也有相应的介绍,但是具体怎么去实现还是讲的比较模糊的,下面将一步步讲解配置路由懒加载 ...
随机推荐
- Oracle dbf文件删除后,启动服务ORA-01157问题
有一个数据库硬盘空间满了,查看发现一个dbf超大,并且不在规定的路径下,知道是一个非重要数据文件,于是删除. 后来重启数据库时, SQL> startupORACLE instance star ...
- FileInputStream和FileReader
这两个类都可以读入数据到缓冲区,FileInputStream在传递到buffer的时候要用byte定义buffer,不然报错.比如: byte [] buffer = new byte[100]; ...
- AJAX如何传递json对象给后端
如果页面上一直报错,根本没有触发异步请求的话,首先就要检查接口或者路径是否写对或者写全,在去考虑是否跨境的问题. 如果想要给后端传递一个json对象,需要在路径上一句添加content:applica ...
- 洛谷 P1337 平衡点 & bzoj 3680 吊打 XXX —— 模拟退火
题目:https://www.luogu.org/problemnew/show/P1337 https://www.lydsy.com/JudgeOnline/problem.php?id=3680 ...
- bzoj2748音量调节——背包
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2748 怎么会有这样的省选题... 代码如下: #include<iostream> ...
- Code-NFine:jqgrid 数据绑定
ylbtech-Code-NFine:jqgrid 数据绑定 1. jqgrid 基本列展示返回顶部 1. 1.1..cshtml $(function () { gridList(); }) fun ...
- Entity Framework 实体间的外键关系
EF 默认是开户级联删除的,这此规则将会删除非空外键和多对多的关系,如果 在数据库上下文中的实体模型类 存在着 级联引用和多重删除路径,那么EF就抛出 级联引用和多重删除路径的异常. Introduc ...
- BFS+PRIM
转载请注明出处:優YoU http://user.qzone.qq.com/289065406/blog/1299324104 在一个y行 x列的迷宫中,有可行走的通路空格' ',不可行走的墙'#', ...
- POJ3616【基础DP】
//因为同一点结束的时间段会有多个,这里没考虑: //无限wa: const int N=1e6+7; int b[N]; LL a[N]; LL dp[N]; struct asd{ int s; ...
- 3DMAX 8 角色建模2 身体
身体 20 25 60 分段 3 2 3 位置直接设置到-12.5 0 0,删除内部面,实例镜像出另一半x偏移25 1 身体大体形状 ,,,, 2 背阔肌 , 3腹肌 4 臀部 ,, 5 肩部 调整点 ...