Vue学习日记27

[email protected]
解析:@click.native原生点击事件:给Vue组件绑定事件时候,必须加上native,不然不会生效。
说明:native就是把组件变回原生DOM的一种方式,相当于给组件绑定原生事件。

2.阻止单击事件冒泡
解析:

<a v-on:click.stop="doThis"></a>

3.提交事件不再重载页面
解析:

<form v-on:submit.prevent="onSubmit"></form>

4.修饰符可以串联
解析:

<a v-on:click.stop.prevent="doThat">

5.只有修饰符
解析:

<form v-on:submit.prevent></form>

说明:用v-on:click.prevent.self会阻止所有的点击,而v-on:click.self.prevent只会阻止对元素自身的点击。

6.line-height属性
解析:
[1]normal:默认。设置合理的行间距。
[2]number:设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
[3]length:设置固定的行间距。
[4]%:基于当前字体尺寸的百分比行间距。
[5]inherit:规定应该从父元素继承line-height属性的值。

7.v-if和v-show区别
解析:
[1]v-if通过条件判断来渲染条件块,当为假值时,当前条件块的所有DOM元素不进行渲染;v-show同样也是条件判断,但如果v-show的值为假值时,当前条件块虽不会在页面显示,但已经渲染完毕,只是属性设置成了display:none。
[2]v-if是通过条件判断来添加和删除DOM元素;v-show是通过display:block和display:none来控制元素的显示隐藏。

8.this.$router.go('-1')
解析:go方法用来用作前进后退导航,有时业务需要有一个返回上一页面,那么就可以用go来实现。当为-1时后退到上一个路由。

9.Vue中watch的immediate和handler
解析:immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。

10.Vue中watch的deep
解析:当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。

11.v-bind缩写
解析:

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

12.v-on缩写
解析:

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

13.Vuex中辅助函数
解析:
[1]mapState与mapGetters要放在计算属性computed中。
[2]mapMutations与mapActions要放在methods中。

14.transform属性
解析:transform属性向元素应用2D或3D转换。该属性允许对元素进行旋转、缩放、移动或倾斜。2D Transform方法:
[1]matrix(n,n,n,n,n,n):定义2D转换,使用六个值的矩阵。
[2]translate(x,y):定义2D转换,沿着X和Y轴移动元素。
[3]translateX(n):定义2D转换,沿着X轴移动元素。
[4]translateY(n):定义2D转换,沿着Y轴移动元素。
[5]scale(x,y):定义2D缩放转换,改变元素的宽度和高度。
[6]scaleX(n):定义2D缩放转换,改变元素的宽度。
[7]scaleY(n):定义2D缩放转换,改变元素的高度。
[8]rotate(angle):定义2D旋转,在参数中规定角度。
[9]skew(x-angle,y-angle):定义2D倾斜转换,沿着X和Y轴。
[10]skewX(angle):定义2D倾斜转换,沿着X轴。
[11]skewY(angle):定义2D倾斜转换,沿着Y轴。

15.Vue中.$mount('#app')手动挂载
解析:在Vue构造函数时,需要配置一个el属性,如果没有没有el属性时,可以使用.$mount('#app')进行挂载。

16.HTML DOM body属性
解析:
[1]document.body属性返回<body>元素
[2]document.documentElement属性返回<html>元素

17.FastClick
解析:移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。

18.图片懒加载
解析:Vue module for lazyloading images in your applications. Some of goals of this project worth noting include:
[1]Be lightweight, powerful and easy to use
[2]Work on any image type
[3]Add loading class while image is loading
[4]Supports both of Vue 1.0 and Vue 2.0

19..eslintrc.js
解析:eslint是用来管理和检测js代码风格的工具,可以和编辑器搭配使用,当有不符合配置文件内容的代码出现就会报错或者警告。

20..babelrc
解析:这个文件是用来设置转码的规则和插件的。

21.postcss
解析:postcss是一个用JS插件转换成CSS的工具。

22.mock.js
解析:
[1]能生成随机数据,拦截ajax,前后端分离,让前端攻城师独立于后端进行开发。
[2]开发无侵入,不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。
[3]数据类型丰富,支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
[4]增加单元测试的真实性,通过随机数据,模拟各种场景。
[5]用法简单,符合直觉的接口。
[6]方便扩展,支持支持扩展更多数据类型,支持自定义函数和正则。

23.CSS单位转换插件
解析:npm install postcss-px-to-viewport --save-dev

24.Retina[一种新型高分辨率的显示标准]
解析:所谓Retina是一种显示标准,是把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。

25.iPhone6分辨率
解析:1334*750像素。

参考文献:
[1]ftlabs/fastclick:https://github.com/ftlabs/fastclick
[2]hilongjw/vue-lazyload:https://github.com/hilongjw/vue-lazyload

发布了364 篇原创文章 · 获赞 422 · 访问量 36万+

猜你喜欢

转载自blog.csdn.net/shengshengwang/article/details/104322182