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;

原文地址:https://www.cnblogs.com/lhl66/p/10027989.html

时间: 11-27

vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、一级mockjs用法、路由懒加载三种方式的相关文章

vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画

当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载. 我们要做的就是把路由对应的组件定义成异步组件 const Foo = resolve => { // require.ensure 是 Webpack 的特殊语法,用来设置 code-split

iOS开发UI篇—懒加载

iOS开发UI篇—懒加载 1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了,如果没有那么再去进行实例化 2.使用懒加载的好处: (1)不必将创建对象的代码全部写在viewDidLoad方法中,代码的可读性更强 (2)每个控件的getter方法中分别负责各自的实例化处理,代码彼此之间的独立性强,松耦合 3.代码示例 1 // 2 // YYViewController.m 3

tomcat发布web项目的三种方式

tomcat发布web项目的三种方式 方式一: 配置tomcat 安装目录下的conf/server.xml <Host name="loaclhost">标签里面添加 <Context path="/aa" docBase="C:\AA\BB" /> 即/aa这个虚拟路径映射到了C:\AA\BB目录下,修改完servler.xml需要重启tomcat服务器 方式二: 在conf目录下创建Catalina目录,在此目录下新

IOS 开发笔记-基础 UI(6)照片浏览器(控件的懒加载)

使用UIImageView.UILabel.UIButton实现一个综合小案例 功能分析 (1)点击箭头切换序号.图片.描述 (2)如果是首张图片,左边箭头不能点击 (3)如果是尾张图片,右边箭头不能点击 步骤分析 (1)搭建UI界面 (2)监听按钮点击 切换序号.图片.描述 1. 界面分析 1> 需要读取或修改的属性的控件 // 序号标签 // 图片 // 图片描述 // 左边按钮 // 右边按钮 2> 需要监听响应事件的对象,需要添加监听方法 // 左边按钮 // 右边按钮 uiimage

Weblogic部署项目三种方式

在weblogic中部署项目通常有三种方式:第一,在控制台中安装部署:第二,将部署包放在domain域中autodeploy目录下部署:第三,使用域中配置文件config.xml 进行项目的部署. 控制台部署 1  启动weblogic服务,登录到weblogic控制台页面,输入用户名和密码,登录到控制台里面 2  点击左侧的部署 3  在右侧点击安装按钮,准备进行项目安装 4  看到路径输入框,可以在下面选择要部署的项目的位置 5  也可以直接输入要部署的包的位置,敲回车 6  点击下一步即可

Mybatis的select查询的三种方式

1.首先建立一个测试的dao 1 public interface IStudentDao { 2 3 // 根据姓名查询 4 List<Student> selectStudentsByName(String name); 5 } 2.对这个dao进行实现 1 public class StudentDaoImpl implements IStudentDao { 2 3 private SqlSession sqlSession; 4 5 // 根据姓名查询 6 public List&l

iOS—UI —懒加载

懒加载——也称为 延迟加载, 即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意: 如果懒加载的话,则一定要注意先判断是否已经有了,如果没有那么再进行实例化. 懒加载的好处: 1.不必将创建对象的代码全部卸载ViewDidload方法中,代码的可读性更强 2.每个空间的getter方法中分别负责各自的实例化处理,代码彼此之间的独立性强,低耦合性.

iOS开发UI中懒加载的使用方法

1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其getter方法.说的通俗一点,就是在开发中,当程序中需要利用的资源时.在程序启动的时候不加载资源,只有在运行当需要一些资源时,再去加载这些资源. 我们知道iOS设备的内存有限,如果在程序在启动后就一次性加载将来会用到的所有资源,那么就有可能会耗尽iOS设备的内存.这些资源例如大量数据,图片,音频等等,所以我们在使用懒加载的时候一定要注意先判断是否已经有了,如果没有那么再去进行实例化 2.使

vue mint ui 手册文档对于墙的恐惧

npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用. <!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入

Win10 IoT C#开发 1.5 - 创建基于XAML的UI程序 及 应用的三种部署方法

Windows 10 IoT Core 是微软针对物联网市场的一个重要产品,与以往的Windows版本不同,是为物联网设备专门设计的,硬件也不仅仅限于x86架构,同时可以在ARM架构上运行. 上一章我们讲了Raspberry安装Win10 IoT系统及搭建Visual Studio 2015开发环境的方法(http://www.cnblogs.com/cloudtech/p/5562120.html) , 这次我们来看如何将开发好Win10 IoT程序部署到Raspberry的环境上. 分别使用