Vue2.2.0+新特性整理及注意事项


Posted in Javascript onAugust 22, 2018

大家对vue的基本概念了解吗?不太清楚的朋友可以先熟悉下。

vue基础教程

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

本文给大家整理了vue2.2.0+新特征并详细的给大家罗列了各个版本的注意要点。这是本文重点要讲的知识,大家可以参考学习。

先附上官网: https://cn.vuejs.org/v2/guide/

2.2.0+版本

v-for

2.2.0+ 的版本里,当在组件中使用  v-for 时, key 现在是必须的。

鼠标修饰符

.left
.right
.middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

model

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的  v-model 会把  value 用作 prop 且把  input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用  value prop 来达到不同的目的。使用  model 选项可以回避这些情况产生的冲突。

Vue.component('my-checkbox', {
 model: {
 prop: 'checked',
 event: 'change'
 },
 props: {
 // this allows using the `value` prop for a different purpose
 value: String,
 // use `checked` as the prop which take the place of `value`
 checked: {
 type: Number,
 default: 0
 }
 },
 data:function(){
 return{
 _value:this.value
 }
 },
 template:`
 <input 
  type="checkbox" 
  v-bind:checked="checked"
  v-on:change="$emit('change',$event.target.checked)" 
 ></input>`
 
 // ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>

上述代码相当于:

<my-checkbox
 :checked="foo"
 @change="val => { foo = val }"
 value="some value">
</my-checkbox>

注:checked属性要声明在props中

provide/inject

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

https://cn.vuejs.org/v2/api/#provide-inject

2.3.0版本

绑定内联样式

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染

display: flex

事件修饰符

Vue 还对应 addEventListener  中的  passive  选项 提供了  .passive 修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。

注:新标准中addEventListener中的第三个参数不再是true(事件捕获)fasle(事件冒泡),而是一个对象:

document.addEventListener('click',callback,
{
 capture:false,//是否捕获事件
 passive:false,//是否允许默认行为,移动端触屏放大缩小非常有用
 once:false//执行一次就remove掉该事件
})

注:不要把 .passive 和  .prevent 一起使用,因为  .prevent 将会被忽略

v-bind

修饰符 .sync (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的  v-on 侦听器

https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

2.4.0版本

v-on

从 2.4.0 开始, v-on 同样支持不带参数绑定一个事件/监听器键值对的对象,如$listeners。注意当使用对象语法时,是不支持任何修饰器的。

注:v-bind在没有参数时,可以绑定到一个包含键值对的对象。其中class和style不能表示对象和数组。

2.5.0版本

按键修饰符

你也可直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case(短横线命名) 来作为修饰符:

<input @keyup.page-down="onPageDown">

有一些按键 ( .esc 以及所有的方向键) 在 IE9 中有不同的  key 值, 如果你想支持 IE9,它们的内置别名应该是首选。在上面的例子中,处理函数仅在  $event.key === 'PageDown' 时被调用。

.exact修饰符(系统修饰按键)

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

slot-scope

用于将元素或组件表示为作用域插槽。特性的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中,你还可以在表达式中使用 ES2015 解构。它在 2.5.0+ 中替代了 scope 。

在 2.5.0+, slot-scope 不再限制在  <template> 元素上使用,而可以用在插槽内的任何元素或组件上。

总结

以上所述是小编给大家介绍的Vue2.2.0+新特性整理及注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 常见学习网站与参考书
Nov 09 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
Vue之mixin全局的用法详解
Aug 22 #Javascript
React中使用UEditor百度富文本的方法
Aug 22 #Javascript
VUE 全局变量的几种实现方式
Aug 22 #Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 #Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 #Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 #Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 #Javascript
You might like
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
Python中logging模块的用法实例
2014/09/29 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
详解python logging日志传输
2020/07/01 Python
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
师范生实习的个人自我鉴定
2013/10/20 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书