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

本文共 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://rdbfo.baihongyu.com/

你可能感兴趣的文章
下面有关java类加载器牛客网_下面有关java classloader说法错误的是?
查看>>
JAVA db client_java – 找不到类[org.apache.derby.jdbc.ClientDriver].尝试连接到db时
查看>>
java 小于5的随机数_Java 生成随机数的 5 种方式,你知道几种?
查看>>
java中需要注意的东西_一些在JAVA中要注意的东西(3)
查看>>
python中类方法可以访问实例属性吗_[python学习心得17] 实例属性、方法和类的属性、方法...
查看>>
java 暗黑字符串_CSS变量实现暗黑模式,我的小铺页面已经支持
查看>>
java多个if语句的执行顺序_Java学习笔记-第四章 流程控制语句
查看>>
iis里运行php_让IIS也能运行PHP网页
查看>>
php tp6 错误接管分析,TP6实现原理分析系列(二):请求与响应
查看>>
php 继承类构造函数,PHP面向对象之继承构造函数
查看>>
php5.4 升级,php-5.4 升级到 php7.2
查看>>
php js json 转换包,json转换js ,php重组数组
查看>>
linux php 相关配置,linux下安装apache与php及其相关配置攻略
查看>>
matlab线性规划上限,matlab解决非线性规划,其中限制条件是集合如x属于{0,1},这样肿么编程?...
查看>>
mysql 更新memcache,MySQL触发器自动更新memcache
查看>>
怎样让php支持中文文件名,让phpmailer支持中文名称的附件
查看>>
matlab如何表示结构体,matlab中怎么定义结构体啊 !!!
查看>>
matlab第二章习题答案,matlab第二章习题答案
查看>>
java hibernate注解详解,Hibernate注解使用以及Spring整合
查看>>
lnmp php t扩展,Linux + Lnmp php编译安装fileinfo扩展 苹果CMS
查看>>