大家对vue的基本概念了解吗？不太清楚的朋友可以先熟悉下。vue基础教程Vue.js（读音/vjuː
大家对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+新特性整理及注意事项，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
vue 2.2.0 新特征