移动端的疫情数据信息介绍
- 组件拆分
- 网络请求 axios
- vue 中使用 echarts 图表
- Vue 中封装的 tabs 组件-自定义封装组件
- Vue 中使用 swiper
- Vue 中使用 vant 库
- 创建项目 vue create vue-yiqing
- 安装:npm i axios vant -S
- 删除无用的组件
- css 初始化
- 移动端适配方案:
- phone.js 引入 main.js / 媒体查询设置 各各屏幕的 css
- vw 布局 100vw=750px
- 配置一个公共的接口文档
-
安装:npm i vant -S
-
自动按需引入组件 (推荐):npm i babel-plugin-import -D
-
对于使用 babel7 的用户,可以在 babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] };
-
创建一个 vant.js 插件使用 vant.js
-
main.js 引入 vant 库 import './plugins/vant'
-
安装 echarts: npm i [email protected] -S
-
使用方式
-
方式 1:组件内部使用单独使用
- 导入:import echarts from 'echarts'
- 直接使用
-
方式 2:挂载到 vue 原型上 所有组件都可以使用
- 导入:import echarts from 'echarts'
- main.js 挂载:Vue.prototype.$echarts = echarts
-
方式 3:开发成 vue 插件 echarts
- 创建 js 文件:const install = function (Vue, options) {}
- 导入 main.js //使用开发的插件 import echarts from './plugins/echarts' Vue.use(echarts)
-
- 创建一个城市界面
- 配置动态路由 接受城市名称:city
-
安装: npm i md5-js -S
-
引入 md5 模块
import md5 from 'md5-js' -
使用加密处理 let sign =md5('加密规则')
-
规则:md5('appid6938city_name 北京 formatjson 秘钥')
-
使用步骤:
-
安装: npm install [email protected] [email protected] --save
-
main.js 导入文件 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/css/swiper.css' Vue.use(VueAwesomeSwiper)
-
组件使用
Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 -
参数配置
<script> export default { name: 'carrousel', data() { return { swiperOptions: { pagination: { el: '.swiper-pagination' }, // Some Swiper option/callback... } } }, computed: { swiper() { return this.$refs.mySwiper.$swiper } }, mounted() { console.log('Current Swiper instance object', this.swiper) this.swiper.slideTo(3, 1000, false) } } </script>
-
接口来源(聚合数据):https://www.juhe.cn/docs/api/id/566
注册流程: 注册后 实名认证 需要等待一两分钟,刷新页面 ,认证成功 请求示例:http://apis.juhe.cn/springTravel/citys?key=keyid 参数 : key ,获取位置 : 右上角个人中心—数据中心—我的 api
接口:key
- key=171e165a7d991c5f6ecd5194c54778ef
- key=6abf107dc48af5c2745ae63e8c125342
- key=25309d1d363848790921460a73866c0c
- key=ea3295121216b176e1a6b8af7fcd3dcf
- key=674d6ec65afc51339176339dc899e16e
- key=f3e50a7c0bce34a492c291db993d0c04
- 父传子: prop 传递数据 子传父:自定义事件
- 父组件实例:$parent
- 子组件实例:$chldren
- 兄弟元素:子组件数据给父组件---另外的子组件
- dom 元素和子组件实例:$refs
- 获取根组件:$root
- 深层传递:provide / inject
- 原型链数据: Vue.prototype.xx =xx
- 本地存储:localStorage.setItem()/getItem()
- eventBus **系统 - 跨组件之间传递数据
- $attrs 和 $listeners
- Vuex
-
定义 eventBus.js
-
创建 eventbus import Vue from 'vue' var Bus=new Vue();
export default Bus
-
main.js 引入文件: import Bus from './utils/eventBus.js' Vue.prototype.$bus=Bus
-
使用语法: 传递数据: this.$bus.$emit("sun", "哈哈哈");
接受数据: this.$bus.$on("sun",val=>{ val }); 解绑事件: this.$bus.$off("sun");
缺点:不支持响应式 维护的“灾难”