移动端及vue相关问题

艳阳天 艳阳天     2022-09-07     669

关键词:

1-pc端与移动端

 PC下,html在默认情况下以可视区域宽度为基准。移动设备没有适配时,html宽度为980.

 

2-1像素还原

获取像素比: window.devicePixelRatio

计算缩放比:1 / window.devicePixelRatio

 

3-单位

px:固定值,绝对单位;%:相对单位;em:相对单位,相对于自身或者父级元素字体大小计算;rem:相对单位,只受html的字体大小的影响。

 

4-移动端的默认样式

// 处理手指按下透明遮罩层

a {

    -webkit-tap-highlight-color: transparent;

}

// 处理表单元素默认样式

input {

    -webkit-appearance: none;

}

5-vue特点

  响应式的数据绑定,数据一旦改变,视图自动更新,不需要其他额外操作;可组合的视图组件,把大功能模块分成小粒度的组件进行合理拆分及组合。

 

6-Vue生命周期

  vue实例从创建到销毁的过程,即为生命周期。开始创建->初始化数据->编译模板->挂载dom

->渲染->卸载等过程,每个过程中都可以调用各种钩子函数。

 

7-v-for指令中的key值作用

 更新已渲染过的元素列表时,默认使用就地复用策略。若删除第一条数据,vue不会重新生成新元素,而是复用第一个元素,则添加在第一个元素上的样式将不会被清除,甚至会影响页面展示效果。未了给vue一个提示,以便其能够跟踪每个节点的身份,需要为每项提供一个唯一key属性。

 

8-单项数据流

  vue采用的是单向数据流方式,数据只能从父组件流向子组件,子组件不能修改父组件传入的数据,否则vue会给予警告。

 

9-组件间的通信

  组件是独立作用域的实例,组件可复用,展示不同数据的时候,需要给组件传入数据。

  组件内部的状态改变不会影响其他组件,父组件要关心子组件状态,使用自定义事件监听。

  父组件->子组件 使用prop传递参数

  子组件->父组件 使用自定义事件监听状态变化

 

10-slot分发内容

   为了让组件可以组合,使用一种方式来混合父组件的内容与子组件自己的模板,这个过程称为内容分发。vue.js实现了一个内容分发app,使用特殊的元素作为原始内容的插槽。

   使用slot可以定制个性化组件结构。

 

11-实现子组件双向数据绑定

  让组件的v-model生效,实现双向数据绑定,则必须满足两个条件:接受一个value属性;在有新的value时触发input事件。

 

12-异步组件

   在大型应用中,可能需要将应用拆分成多个小模块,按需从服务器下载。vuejs允许将组件定义为一个工厂函数,动态地解析组件的定义。在组件需要渲染时触发工厂函数,并把结果缓存起来,用于后面的再次渲染。

 

13-vue-cli脚手架中webpack的配置分析

 

vue-cli 脚手架帮助我们写好基础代码,它具备生成目录结构、本地开发调试、代码部署、热加载、单元测试等功能。

vue-cli 是使用 webpack 做的构建工具。解读生成项目目录的配置文件源码,分析了 webpack 的基本配置,以及生成在内存文件和热加载使用的中间件。

 

 

 

 

转自:

http://mp.weixin.qq.com/s__biz=MzA3MDU0NDE5MA==&mid=2247483856&idx=1&sn=4a8baf8e21b9a343474e1bd3e649dab4&chksm=9f3a7f81a84df69765a5ec9b76d46bdfeb38d786679c7b407b12e79b2b4da7e9635d29ae4ac3&mpshare=1&scene=1&srcid=0425eW7p0Tx6c29i8WXblUbH#rd

vue3项目返回第三方页面onbeforeunmount和onbeforerouteleave失效问题

...组件之间跳转没问题。经测试,popstate事件监听pc端及移动端都失效;js的beforeUnload事件在pc端谷歌浏览器上返回第三方页面有效,vue项目内组件跳转无效,ios手机上这些事件监听及钩子函数全部无效。解决方法ÿ... 查看详情

vue项目实战-vue2(移动端)(代码片段)

Vue项目实战(移动端)#相关资料(一)创建项目(二)禁用Eslint(三)devtool(四)添加less支持(五)vue路由配置(背诵)(六)父子组件通信(背诵)(七)axios拦截器(背诵)(八)Sticky粘性布局(九)图片懒加载(十)全局注册组件(十一)slot插槽(十二)使用ui库需... 查看详情

vue-cli+postcss实现移动端自适应

基于vue-cli3创建一个移动端项目vueaddvue-h5cdvue-h5npmrunserve安装postcss相关插件由于vue-cli已经内置了postcss,只需要安装相关插件,就可以实现vw/vh自适应布局。npmi--savepostcss-aspect-ratio-minipostcss-px-to-viewportpostcss-write-svgpostcss-cssnext 查看详情

vue移动端工程在苹果ios系统上用浏览器打开不显示图片

参考技术A最近做个一个vue移动端的demo,发现了一个问题,做好的项目打包到服务器,在ios端查看发现图片无法显示,但是在安卓和pc是没有问题的。然后查了相关的资料总结一下解决方案。如果觉得有些麻烦,就给img全部使用... 查看详情

目前网站建设的发展趋势

...的发展趋势会是什么样的呢?趋势一:单一版本的PC端及移动网站移动互联网现在发展已经是非常迅速,更多的企业开始投入到移动互联网中开展相关的业务。而未来极有可能PC端网站和移动网站会统一形成一个版本的桌面。趋... 查看详情

《h5+移动应用实战开发》已出版(代码片段)

  《H5+移动应用实战开发》终于出版了,最近在忙着Vue和Webpack相关的前端书籍写稿。本书面向的读者为:从后端转前端,或零基础开始学习移动端开发的人。前后端完全分离的开发方式越来越成为一种趋势,下一本书,将是... 查看详情

sessionstoragelocalstorage技术相关以及商家sidsbid记录相关vue相关问题

  一个项目的需求如下:作为第一个第三方平台,我们可以提供给不同的商家技术支持,即在一个url后面根据不同的商家来提供不同的查询字符串(包含sid和sbid),所以为了得到这个商家的信息,我们需要使用解析这个查询... 查看详情

vue移动端项目在ios上图片不显示问题

参考技术Avue移动端项目图片,在电脑和安卓预览都没问题,但是在ios系统上出现了图片显示不出来的问题。恕我直言(原谅我水平不足),并没有找到原理上的问题,只找到了表面的原因,即在样式表style中写了img来设置图片样式 查看详情

解决vue的所有相关问题集合(代码片段)

解决vue的所有相关问题集合第一步:配置pathnpmconfiggetprefix复制得到的路径信息,去到桌面>右键计算机>属性>高级系统设置>环境变量在系统变量中新建变量NPM,变量值为之前复制的路径信息,一般是C:\\User... 查看详情

vue2.x路由更新问题相关处理方式

在router-link中<spanstyle="color:blue">有时候需要获得到相关数据时,如父路由的数据到子路由进行显示操作相关的行为时,就需要进行相关路由钩子函数的操作,。而在vu2.js中,就不存在使用data钩子来处理相关的请求数据了,可... 查看详情

vue中遇到的坑---变化检测问题(数组相关)

  最近在项目中遇到了一个问题,不知道为什么,所以最后通过动手做demo实践、查文档的方式解决了,这里做一个总结。  例1<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>vue</title><scriptsrc="ht... 查看详情

前端学习---移动端vue开发踩坑记

前言:大概两个月前投身于一个项目中去,项目是一个移动端的项目,所选用的框架是时下比较流行的vue。这篇文章也是针对这个项目和以前自己学习时的一些总结,包括一些通用的移动端开发要注意的事项、vue开发遇到的一些... 查看详情

为啥vue适合移动端开发呢?

参考技术Avue适合移动端主要是因为可以创建单页应用,避免网页刷新带来的白屏问题。除了vue之外,angular和react也适用于移动端。 查看详情

vue中动态组件的使用及相关问题

<componentv-bind:is="currentTabComponent"></component> 动态组件主要是运用is属性达到切换组件的效果。 如何使动态组件保持状态---keep-alive(有时候,我们希望能保持被动态加载组件的状态,已避免反复重复渲染导致的性能... 查看详情

svn服务端及客户端安装

 Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器.现在Subversion已经迁移到apache网站上了,下载地址: http://subversion.apache.org/packages.html 这是二进制文件包的下载... 查看详情

移动平台路径相关

转载自:http://blog.csdn.net/u014735301/article/details/43481727移动平台的资源路径问题想要读取一个文件,自然首先要找到这个文件,下面小匹夫首先会总结一下unity3d中存在的各个地址,之后再总结一下各个地址在各个移动平台中的对应... 查看详情

cpu的大小端及如果判断

不同体系结构的CPU,数据在内存中存放的排列顺序是不一样的。存储器中对数据的存储是以字节(Byte)为基本单位的,因此,字(Word)和半字(Half-Word)在存储器中就有两种次序,分别称为:大端模式(BigEndian)和小端模式(L... 查看详情

无法读取未定义的属性“移动”-Vue/Vuetify/Storybook

】无法读取未定义的属性“移动”-Vue/Vuetify/Storybook【英文标题】:Cannotreadproperty\'mobile\'ofundefined-Vue/Vuetify/Storybook【发布时间】:2021-04-0515:43:38【问题描述】:我在使用vue和vuetify渲染我的故事书故事中的“画布”屏幕时遇到问题... 查看详情