当前位置: 首页 > news >正文

Vue 2.3、2.4 知识点小结

原文连接 blog , 本文不涉及 SSR.

2.3 参考 https://github.com/vuejs/vue/...
2.4 参考 https://github.com/vuejs/vue/...
实例 demo 地址:https://github.com/jkchao/vue...


2.3

  • style 多重值;

      <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

    这会渲染数组中最后一个被浏览器支持的值。

  • 新增.passive 修饰符 (demo1) ; .passive 修饰符表示事件永远不会调用 preventDefault() ,主要为解决滚动和触摸事件的卡顿而出现,关于 passive 更多信息请移步 MDN 。

  • 重新引入 .sync 修饰符 (demo2);提供对于 prop 的双向绑定。

      <child :bar.sync="foo"></child>

    其实是个语法糖

      <child :bar="foo" @update:bar="e => foo = e">

    此时需要在子组件中显示触发事件:

      this.$emit('update:bar', newValue)
  • Async Component Improvements (demo3);

    在 2.3 之前,可以使用异步组件:

    // some.vue
    export default {
      // ...
      components: {
        'asyncCom': () => import('./asyncCøm')
      }
    }

    2.3 新增高级异步组件

    官网上比较清楚:

为了便于演示,使用延迟加载异步组件:


 import loadingCom from '../components/loadingCom.vue'
 import errCom from '../components/errCom.vue'
 const asyncCom = () => ({
   component: new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve(import('../components/asyncCom.vue'))
     }, 2000)
   }),
   loading: loadingCom,
   error: errCom,
   delay: 200,
   timeout: 3000
 })
 
 export default {
   // ...
   components: { asyncCom }
 }

效果如下图:

或者,你也可以点击后加载 (demo4):

当然,也可以用于 vue-router ( 2.40+ ) demo5。

  • Functional Component Improvements;

在2.3 + 版本,函数式组件可以省略 props 选项,所有组件上的属性会被自动解析 成props,更多内容,请参考 https://cn.vuejs.org/v2/guide...函数化组件 。

2.4

  • v-on 支持绑定一个事件/监听器键值对的对象,此时不支持任何修饰器;

  <button v-on="{ mousedown: some, mouseup: other }"></button>
  • 新增 comments 选项,当设为 true 时,将会保留且渲染模板中的 HTML 注释;
    该选项暂时无法在构建工具中使用 issues。

  • 新增 interitAttrs 选项;

    在版本 2.4 之前,默认情况下父作用域的不被作为props特性绑定的属性,将会作为普通的 HTML 属性,应用在跟元素上。

    举个例子:

    // parent.vue
    <template>
      <child-commpent :foo="f" :boo="b"></child-comment>
    </template>
    
    <script>
    const childComment = () => import('./childCom.vue')
    export default {
      data () {
        return {
          f: 'Hello world!'
          b: 'Hello Vue!'
        }  
      }
    }
    </script>
    // childComment.vue
    <template>
      <div>{{ foo }}<div>
    </template>
    
    <script>
    export default {
      props: ['foo']
    }
    </script>

    最后会被渲染为:

    <div boo="Hello Vue!">Hello world!</div>

    设置 interitAttrsfalse,之后,不会应用到跟元素上。

    // childCom.vue
    <template>
      <div>{{ foo }}</div>
    </template>
    
    <script>
    export default {
      props: ['foo'],
      inheritAttrs: false
    }
    </script>
    

    渲染:

    
    <div>Hello world!</div>
    
  • 新增 $attrs, $listeners 选项;

    多级组件嵌套需要传递数据时,通常使用的方法是通过 vuex 。如果仅仅是传递数据,而不做中间处理,使用 vuex 处理,未免有点杀鸡用牛刀,Vue 2.4 版本提供了另一种方法,使用 v-bind="$attrs" , 将父组件中不被认为 props特性绑定的属性传入子组件中,通常配合 interitAttrs 选项一起使用,具体请看 demo 。

    // demo.vue
    <template>
      <div>
        <child-com :foo="foo" :boo="boo" :coo="coo" :doo="doo"></child-com>
      </div>
    </tempalte>
    <script>
    const childCom = () => import('./childCom1.vue')
    export default {
      data () {
        return {
          foo: 'Hello World!',
          boo: 'Hello Javascript!',
          coo: 'Hello Vue',
          doo: 'Last'
        }
      },
      components: { childCom }
    }
    </script>
    
    // childCom1.vue
    <template>
      <div>
        <p>foo: {{ foo }}</p>
        <p>attrs: {{ $attrs }}</p>
        <child-com2 v-bind="$attrs"></child-com2>
      </div>
    </template>
    <script>
    const childCom2 = () => import('./childCom2.vue')
    export default {
      props: ['foo'],
      inheritAttrs: false,
      created () {
        console.log(this.$attrs) // { boo: 'Hello Javascript!', coo: 'Hello Vue', doo: 'Last' }
      }
    }
    </script>
    // childCom2.vue
    <template>
      <div>
       <p>boo: {{ boo }}</p>
       <p>attrs: {{ $attrs }}</p>
       <child-com3 v-bind="$attrs"></child-com3>
      </div>
    </template>
    
    <script>
    const childCom3 = () => import('./childCom3.vue')
    export default {
      props: ['boo']
      inheritAttrs: false,
      created () {
        console.log(this.$attrs) // { coo: 'Hello Vue', doo: 'Last' }
      }
    }
    </script>
    // childCom3.vue
    // ...

    最后被渲染为

    具体请看 demo6 。

    $listeners 的用法和 $attrs 类似,demo6 。


完。

相关文章:

  • Servlet---请求封装器
  • powershell 远程重启/关闭服务器
  • 多线程剖析
  • 《中国智慧城市规划与建设》第二版
  • HBase原理和基本概念
  • 移动端单指拖 双值旋转缩放(改动版)
  • 强大的PyTorch:10分钟让你了解深度学习领域新流行的框架
  • 如何修改远程桌面3389端口
  • 17.07.24 Linux 7 文件系统管理
  • python日记----2017.7.25
  • Js实现点击查看全文(类似今日头条、知乎日报效果)
  • 用quicker-worker.js轻松跑一个大数据遍历
  • HttpClient4.2 Fluent API学习
  • 第二天
  • HCNA
  • [nginx文档翻译系列] 控制nginx
  • 【跃迁之路】【733天】程序员高效学习方法论探索系列(实验阶段490-2019.2.23)...
  • 230. Kth Smallest Element in a BST
  • Docker 笔记(2):Dockerfile
  • httpie使用详解
  • JavaScript异步流程控制的前世今生
  • Js基础知识(四) - js运行原理与机制
  • Linux快速配置 VIM 实现语法高亮 补全 缩进等功能
  • Linux下的乱码问题
  • Markdown 语法简单说明
  • PhantomJS 安装
  • react-core-image-upload 一款轻量级图片上传裁剪插件
  • RxJS 实现摩斯密码(Morse) 【内附脑图】
  • 不发不行!Netty集成文字图片聊天室外加TCP/IP软硬件通信
  • 聚类分析——Kmeans
  • 如何利用MongoDB打造TOP榜小程序
  • 深度学习入门:10门免费线上课程推荐
  • 推荐一款sublime text 3 支持JSX和es201x 代码格式化的插件
  • 异常机制详解
  • 如何在 Intellij IDEA 更高效地将应用部署到容器服务 Kubernetes ...
  • #include
  • $Django python中使用redis, django中使用(封装了),redis开启事务(管道)
  • (MIT博士)林达华老师-概率模型与计算机视觉”
  • (二) Windows 下 Sublime Text 3 安装离线插件 Anaconda
  • (二)fiber的基本认识
  • (非本人原创)我们工作到底是为了什么?​——HP大中华区总裁孙振耀退休感言(r4笔记第60天)...
  • (附源码)spring boot车辆管理系统 毕业设计 031034
  • (强烈推荐)移动端音视频从零到上手(下)
  • (入门自用)--C++--抽象类--多态原理--虚表--1020
  • (四)Tiki-taka算法(TTA)求解无人机三维路径规划研究(MATLAB)
  • (转)visual stdio 书签功能介绍
  • *** 2003
  • ***监测系统的构建(chkrootkit )
  • .NET Core WebAPI中封装Swagger配置
  • .NET Core 版本不支持的问题
  • .Net Core缓存组件(MemoryCache)源码解析
  • .NetCore Flurl.Http 升级到4.0后 https 无法建立SSL连接
  • .net实现头像缩放截取功能 -----转载自accp教程网
  • [20150707]外部表与rowid.txt
  • [CareerCup] 2.1 Remove Duplicates from Unsorted List 移除无序链表中的重复项