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.vueexport 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 知识点小结相关推荐
- python基础知识点小结(2021/2/9)
python基础知识点小结(2021/2/9)持续更新中~~ 入门小知识 cmd 在cmd上进行python,直接输入 python\quad pythonpython 退出cmd输入 exit()\ ...
- C++重要知识点小结---3
C++重要知识点小结---1:http://www.cnblogs.com/heyonggang/p/3246631.html C++重要知识点小结---2:http://www.cnblogs.co ...
- 线性表部分知识点小结
线性表部分知识点小结 ------------------------------------- 开发工具与关键技术:<数据结构与算法> 作者:林敏静 撰写时间:2020年5月6日 --- ...
- 排序算法部分知识点小结
排序算法部分知识点小结 ------------------------------------- 开发工具与关键技术:<数据结构与算法> 作者:林敏静 撰写时间:2020年4月26日 - ...
- C++基础知识点小结
C++基础知识点小结 第一章 绪论 (1)cout 输出流的对象 (2)cin输入对象 (3)endl 输出控制符/操控符 (4)标识符 (5)命名空间(namespace) (6)左值: (7)右值 ...
- python语言基础知识点总结_Python语言的12个基础知识点小结
Python语言的12个基础知识点小结 python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(g ...
- 气象统计方法期末知识点小结
气象统计方法知识点小结 小知识点 气象统计诊断的基本步骤 资料收集 资料预处理 选取诊断方法 科学综合与诊断分析 气象统计预测的基本步骤 资料收集 选择合适的统计模型 统计检验 预测结论 一些概念 气 ...
- jdbctemplate 开启事务_SpringBoot 系列教程之事务隔离级别知识点小结
上一篇博文介绍了声明式事务@Transactional的简单使用姿势,最文章的最后给出了这个注解的多个属性,本文将着重放在事务隔离级别的知识点上,并通过实例演示不同的事务隔离级别下,脏读.不可重复读. ...
- C语言指针知识点小结
前期回顾 C语言指针基础知识点(一)–指针及指针变量 C语言指针基础知识点(二)–指针变量的引用 C语言指针基础知识点(三)–指针变量作为函数参数 C语言指针基础知识点(四)–通过指针 ...
最新文章
- 解决使用mybatis分页插件PageHelper的一个报错问题
- 应用宝上架审核要求_【建议收藏】安卓应用商店上架经验,含流程,方法
- java实现混合运算_java图形化界面实现简单混合运算计算器
- GitHub 中文排行榜,高分优秀中文项目一网打尽!
- 无监督学习 k-means_监督学习-它意味着什么?
- [数据结构-严蔚敏版]P42多项式Polynomial的实现
- python爬虫 asyncio aiohttp aiofiles 单线程多任务异步协程爬取图片
- Linux 索引节点 inode
- java lambda函数_Java中的Lambda函数
- cesium--3d-tiles译文[官方]
- Android 跟 ios 测试有什么区别
- 用python发邮件为什么接收不了_如何使用python发送邮件和接收邮件?
- python计算相关性系数
- 漫步数理统计二十三——泊松分布
- java 父类构造_java 父类构造器
- 云计算大数据:Xen、KVM、VMware、hyper-v等虚拟化技术的比较
- PMP考试有哪些科目
- Mybatis中注解和xml可以同时使用吗?
- 如何写出“简单“代码?
- 联想笔记本的window server R2系统安装、优化及相关软件安装全过程
热门文章
- 大数据科学认识与理解论坛全攻略
- Oracle10g下载地址
- Android自动测试之MonkeyRunner之monkeyrunner
- Docbook之一:概念 DOM schema xsl xsl-xslt xsl-fo
- struts-config.xml 简述
- Flask 项目实战|从零开发“StackOverflow”问答网站
- activex控件有什么用_你知道怎样用Excel打印「条形码」吗?
- SpringSecurity用数据库信息做认证
- 各IO 模型对比与总结
- AOP 中必须明白的概念-切入点(Pointcut)