博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue 2.3、2.4 知识点小结
阅读量:6438 次
发布时间:2019-06-23

本文共 2079 字,大约阅读时间需要 6 分钟。

2.3

  • style 多重值;

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

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

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

    其实是个语法糖

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

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

    在 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 } }

    效果如下图:

     

     

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

     

     

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

  • Functional Component Improvements;

    在2.3 + 版本,函数式组件可以省略 props 选项,所有组件上的属性会被自动解析 成props,更多内容,请参考  。

2.4

  • v-on 支持绑定一个事件/监听器键值对的对象,此时不支持任何修饰器;
  • 新增 comments 选项,当设为 true 时,将会保留且渲染模板中的 HTML 注释;
    该选项暂时无法在构建工具中使用 。
  • 新增 interitAttrs 选项;

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

    举个例子:

    // parent.vue  
    // childComment.vue  

    最后会被渲染为:

    Hello world!

    设置 interitAttrs 为 false,之后,不会应用到跟元素上。

    // childCom.vue  

    渲染:

    Hello world!
  • 新增 $attrs, $listeners 选项;

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

    // demo.vue  
    // childCom1.vue  
    // childCom2.vue  
    // childCom3.vue  // ...

    最后被渲染为

     

     

    具体请看  。

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

转载地址:http://hlzwo.baihongyu.com/

你可能感兴趣的文章
(C#)Windows Shell 外壳编程系列8 - 同后缀名不同图标?
查看>>
教你彻底学会c语言基础——文件操作
查看>>
如何使用免费控件将Word表格中的数据导入到Excel中
查看>>
seafile服务器配置
查看>>
HyperLedger Fabric 1.2 区块链应用场景(3.1)
查看>>
也谈谈初创公司的技术团队建设
查看>>
阿里云 APM 解决方案地图
查看>>
中国HBase技术社区第一届MeetUp-HBase2.0研讨圆桌会
查看>>
学渣的模块化之路——50行代码带你手写一个common.js规范
查看>>
python——变量
查看>>
subline上装node.js插件
查看>>
python字符串操作实方法大合集
查看>>
Linux学习(十一):不可忽略的Linux支持的文件系统
查看>>
[转]VC++中操作XML(MFC、SDK)
查看>>
WiFi连接风险造成个人信息外泄 网络安全需加强
查看>>
2017(中国)商博会系列介绍之智能生活展
查看>>
eclipse link方式安装 sts(Spring Tool Suite)
查看>>
数据结构思维 第三章 `ArrayList`
查看>>
CentOS6、7编译安装FFmpeg
查看>>
Android项目实战(二十九):酒店预定日期选择
查看>>