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 相关文章推荐
js宝典学习笔记(上)
Jan 10 Javascript
javascript 函数调用规则
Aug 26 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
解决vue热替换失效的根本原因
Sep 19 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
php 301转向实现代码
2008/09/18 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
如何离线执行php任务
2017/02/21 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
详解React中setState回调函数
2018/06/14 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
linux下进程间通信的方式
2013/01/23 面试题
钳工实习自我鉴定
2013/09/19 职场文书
传播学毕业生求职信
2013/10/11 职场文书
在求职信中如何凸显个人优势
2013/10/30 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
励志演讲稿范文
2014/04/29 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
Python中可变和不可变对象的深入讲解
2021/08/02 Python