zoukankan      html  css  js  c++  java
  • 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> 元素上使用,而可以用在插槽内的任何元素或组件上。

  • 相关阅读:
    mysql 8 nodejs连不上
    render与vue组件和注册
    0424 前端笔记
    0423
    任务
    使用async await 封装 axios
    [Java] Spring 3.0 01/02/03/04/05 -自设源代码
    [Java] Spring3.0 360百科介绍
    [Java] Spring3.0
    [Java] Spring3.0 面向抽象(接口)编程
  • 原文地址:https://www.cnblogs.com/goOtter/p/9510375.html
Copyright © 2011-2022 走看看