Vue 2.3、2.4 知识点小结
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/render-function.html#函数化组件 。
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>
设置
interitAttrs
为false
,之后,不会应用到跟元素上。// 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 。
Vue 2.3、2.4 知识点小结的更多相关文章
- React及Nextjs相关知识点小结
React及Nextjs知识点小结 函数式组件和类组件区别是什么 1.函数式组件是用于创建无状态的组件,组件不会被实例化,无法访问this中的对象,无法访问生命周期方法,是无副作用的,相比于类组件函数 ...
- C++重要知识点小结---3
C++重要知识点小结---1:http://www.cnblogs.com/heyonggang/p/3246631.html C++重要知识点小结---2:http://www.cnblogs.co ...
- C++重要知识点小结---2
C++重要知识点小结--1 :http://www.cnblogs.com/heyonggang/p/3246631.html 1.C++允许程序员声明一个不能有实例对象的类,这样的类惟一的用途是被继 ...
- 【SpringBoot MQ 系列】RabbitMq 核心知识点小结
[MQ 系列]RabbitMq 核心知识点小结 以下内容,部分取材于官方教程,部分来源网络博主的分享,如有兴趣了解更多详细的知识点,可以在本文最后的文章列表中获取原地址 RabbitMQ 是一个基于 ...
- SpringBoot 系列教程之事务隔离级别知识点小结
SpringBoot 系列教程之事务隔离级别知识点小结 上一篇博文介绍了声明式事务@Transactional的简单使用姿势,最文章的最后给出了这个注解的多个属性,本文将着重放在事务隔离级别的知识点上 ...
- disruptor笔记之四:事件消费知识点小结
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- vue知识点小结
vue.js中==和===的区别 1.== 用于比较.判断两者相等,比较时可自动换数据类型 2.=== 用于(严格)比较.判断两者(严格)相等,不会进行自动转换,要求进行比较的操作数必须类型一致,不一 ...
- Vuejs技术栈知识点小结
前言 上家公司的项目主要是使用jQuery和Angular1,然后自己学了React,没想到来到这家公司突然开始做vue,不过vue还是挺容易上手的.下面是vue技术栈的一些总结,都是来自官网,主要是 ...
- promise知识点小结
断断续续学习es6也有一段时间了,趁着开学空闲对知识点做一些小结. 为什么使用promise 谈到Promise,我们知道,这是社区较理想的异步编程解决方案.想要掌握promise,我们首先要知道其提 ...
随机推荐
- Bootstrap富文本编辑器-bootstrap-wysiwyg
在进行英语试题的录入中,因为英语试题经常会有类似如下的试题: My friend watches dragon boat races at the Dragon Boat Festival.(对划线部 ...
- 远程连接mongodb服务器
- AtCoder Grand Contest 017D (AGC017D) Game on Tree 博弈
原文链接https://www.cnblogs.com/zhouzhendong/p/AGC017D.html 题目传送门 - AGC017D 题意 给定一棵 n 个节点的以节点 1 为根的树. 两个 ...
- Python scrapy爬虫学习笔记01
1.scrapy 新建项目 scrapy startproject 项目名称 2.spiders编写(以爬取163北京新闻为例) 此例中用到了scrapy的Itemloader机制,itemloade ...
- AspectJ(AOP)切面获取参数名称和参数
@Async @AfterReturning(value ="execution(public * com.zhx.recharge.service.RechargeService.buil ...
- 使用 linux 的 epoll 的套接字
1. 代码: import socket import selectors #IO多路复用的选择模块 epoll_selector = selectors.EpollSelector() 实例化一个和 ...
- Date、Calendar、DateFormat类
Date类与Calendar类之间的转换 package date; import java.util.Calendar; import java.util.Date; public class Da ...
- aar上传maven库工具
需求:本地aar文件上传到maven库 参考我之前的博客gradle上传本地文件到远程maven库(nexus服务器) 下面是java图形化工具代码 package com.jinkejoy.buil ...
- POJ 2912 Rochambeau(暴力)+【带权并查集】
<题目链接> 题目大意: n个人进行m轮剪刀石头布游戏(0<n<=500,0<=m<=2000),接下来m行形如x, y, ch的输入,ch='='表示x, y平局 ...
- POJ2387 Til the Cows Come Home【Kruscal】
题目链接>>> 题目大意: 谷仓之间有一些路径长度,然后要在这些谷仓之间建立一些互联网,花费的成本与长度成正比,,并且要使这些边连起来看的像一课“树”,然后使成本最大 解题思路: 最 ...