您现在的位置是:网站首页> 编程资料编程资料
关于vue文件中index.vue的使用方法_vue.js_
2023-05-24
390人已围观
简介 关于vue文件中index.vue的使用方法_vue.js_
vue文件中index.vue使用
//组件缓存
this.$parent.onPageName(); //默认跳转主页 this.$parent.onPageName({ //调用跳转页面方法,name为要切换的页面 name: 'infoPage' }) this.$parent.onPageName({ //跳转页面并携带数据 name: 'addPage' }, { come: 'editPage', batchUni: this.getData.batchUni }) vue的index.html总结
为啥要有index.html
对vue来说index.html是一个总的入口文件,vue是单页面应用,挂在id为app的div下然后动态渲染路由模板。
单页面应用
单页面应用是和多页面应用相对而言的。多页面应用是在每次页面跳转的时候,后台服务器都重新生成一张html页面,首屏时间快(只需要加载一次html),搜索引擎优化效果好(html内容都在),但是切换慢(每次页面切换都需要发出一次http请求)。
单页面应用首次加载时会请求一次html,随后的页面渲染都依靠js动态的将当前页面的内容清除掉(原理:js可以感知url的变化),然后将下一个页面的内容挂载到当前页面上(前端实现,不是后端,无http发送时延),首屏慢,搜索引擎优化效果差,但是切换快。
index.html实战代码汇总
手机端自适应使用(px*2/100=rem)
!function (e) { var t = e.document , n = t.documentElement , i = "orientationchange" in e ? "orientationchange" : "resize" , a = function e() { var t = n.getBoundingClientRect().width; return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 11.2), 8.55) + "px", e }(); n.setAttribute("data-dpr", e.navigator.appVersion.match(/iphone/gi) ? e.devicePixelRatio : 1), /iP(hone|od|ad)/.test(e.navigator.userAgent) && (t.documentElement.classList.add("ios"), parseInt(e.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8 && t.documentElement.classList.add("hairline")), t.addEventListener && (e.addEventListener(i, a, !1), t.addEventListener("DOMContentLoaded", a, !1)) }(window);以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- 详解Vue3 SFC 和 TSX 方式调用子组件中的函数_vue.js_
- ant-design-vue中的table自定义格式渲染解析_vue.js_
- React 模块联邦多模块项目实战详解_React_
- ant-design-vue中设置Table每页显示的条目数量方式_vue.js_
- Ant Design Vue中的table与pagination的联合使用方式_vue.js_
- ant design vue的table取消自带分页问题_vue.js_
- JavaScript中net::ERR_CONNECTION_REFUSED解决方法大全_javascript技巧_
- Vue electron前端开启局域网接口实现流程详细介绍_vue.js_
- Vue全局监测错误并生成错误日志实现方法介绍_vue.js_
- Vant实现上传多个图片或视频,更改视频预览图_vue.js_
