移动端及vue相关问题

Posted 艳阳天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端及vue相关问题相关的知识,希望对你有一定的参考价值。

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

以上是关于移动端及vue相关问题的主要内容,如果未能解决你的问题,请参考以下文章

vue移动端webview视频轻应用

vue3项目返回第三方页面onBeforeUnmount和onBeforeRouteLeave失效问题

VueJs相关学习网址

Vue项目实战-vue2(移动端)

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

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