如何理解Vue的.sync修饰符的使用


Posted in Javascript onAugust 17, 2017

本文介绍了Vue的.sync修饰符的使用,分享给大家,也给自己留个笔记

案例

<div id="app">
  <div>{{bar}}</div>
  <my-comp :foo.sync="bar"></my-comp>
  <!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> -->
</div>
<script>
  Vue.component('my-comp', {
    template: '<div @click="increment">点我+1</div>',
    data: function() {
      return {copyFoo: this.foo}
    },
    props: ['foo'],
    methods: {
      increment: function() {
        this.$emit('update:foo', ++this.copyFoo);
      }
    }
  });
  new Vue({
    el: '#app',
    data: {bar: 0}
  });
</script>

说明:代码<my-comp :foo.sync="bar"></my-comp>会被扩展成<comp :foo="bar" @update:foo="val => bar = val"></comp>,就是一个语法糖。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
angular4实现带搜索的下拉框
Mar 25 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 #Javascript
js编写简单的聊天室功能
Aug 17 #Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 #Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 #Javascript
js实现方块上下左右移动效果
Aug 17 #Javascript
JavaScript中一些特殊的字符运算
Aug 17 #Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 #Javascript
You might like
如何选购合适的收音机
2021/03/01 无线电
PHP临时文件的安全性分析
2014/07/04 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
PHP中的表达式简述
2016/05/29 PHP
utf8的编码算法 转载
2006/12/27 Javascript
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
python中requests小技巧
2017/05/10 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
大学生标准推荐信范文
2013/11/25 职场文书
环保专业大学生职业规划设计
2014/01/10 职场文书
中学生操行评语大全
2014/04/24 职场文书
跑操口号
2014/06/12 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
护士先进个人总结
2015/02/13 职场文书
经典爱情感言
2015/08/03 职场文书
请病假条范文
2015/08/17 职场文书
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android