资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/开坑，写点Polymer 1.0 教程第2篇(下)——hello world篇

开坑，写点Polymer 1.0 教程第2篇(下)——hello world篇

xiangzhihong / 2935人阅读

摘要：数据绑定是一个非常屌的的办法能让你快速的传播组件的变化，减少代码的行数。你可以用双大括弧来声明你需要绑定的属性，大括弧在运行时会被替换成括弧内的属性值。本篇完，下篇还没想好要写啥。

书接上回，上回叔说到如何注册（创建）一个自定义组件，这回我们来讲讲它的数据绑定。

使用数据绑定

当然，你可能不会仅仅满足上文教的简单的静态自定义组件，你通常需要动态的更新你的dom组件。

数据绑定是一个非常屌的的办法能让你快速的传播组件的变化，减少代码的行数。你可以用双大括弧{{}}来声明你需要绑定的属性，大括弧在运行时会被替换成括弧内的属性值。

name-tag.html

index.html

运行结果

声明properties

我们可以看到owner这一变量已经和标签绑定在一起了，但是这是在组件ready阶段才给owner赋的值，下面会介绍另外一种定义绑定属性的方式
定义——声明properties属性（如同声明is属性来定义自定义的组件的标签名一样）

properties是自定义组件公共api中非常重要的一个组成部分，你可以通过它来定义默认值，配置标签上的属性值，也可以用啦观测属性的变化等等

在接下去的例子中，我们将声明一个带有默认值的owner属性，并将index.html中对这个属性进行赋值操作

configurable-name-tag.html

index.html
双向绑定

除了绑定文本（如上例， 变量 -> 组件）以外，Polymer还支持双向绑定
（变量 -> 组件 -> 组件change -> 变量）

edit-element.html

index.html

运行结果

Polymer是通过事件名的约定来实现双向绑定的（关于数据绑定以后会开一张自己讲），但是原生标签一开始并不在Polymer的生态圈内，所以没有遵循这一约定，因此对于原生标签，我们需要按照下面的格式来给它这是一个自定义的change事件声明，格式如下

target-prop="{{hostProp::target-change-event}}"

举个例子：
如果是对input type="text"的文本框进行双向绑定，你就可以这样写



或者




::符号后的都是事件名，两者区别是input事件每次按下键盘都会触发双向绑定的更新，而change事件只在光标失去焦点的时候触发双向绑定的更新。


本篇完，下篇还没想好要写啥。
GPU云服务器 云服务器 第2篇 第1篇 第3篇 第6篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86018.html

相关文章

  • 开坑，写点Polymer 1.0 教程第2篇(上)——hello world篇

    摘要：书接上回，我们已经把运行的准备工作做好，接下来就敲点代码来感受下它到底是个什么东东，这一篇里我基本会照搬官网的几个例子来快速过一下。非常重要的一点是，这个组件的标签名必须要以符号分割。 书接上回，我们已经把运行Polymer的准备工作做好，接下来就敲点代码来感受下它到底是个什么东东，这一篇里我基本会照搬官网Quick tour的几个例子来快速过一下。 注册一个自定义组件 需要调用Pol...

    HitenDev 评论0 收藏0

  • 开坑，写点Polymer 1.0 教程第1篇——安装篇

    摘要：所以又以一个库的身份出现在世人面前，它现阶段要做的就是使用的规范来进行开发，并且提供了一套底层实现来填补了各大浏览器暂不支持的，我们称为填充物也就是要干的事情。 书接上回上一篇我们介绍了神马是Polymer，这一篇我们来做些正式编码前的准备工作，顺便也扯一扯Polymer的真面目 如何安装Polymer 有两种方式：第一种是bower安装，不要问我bower是什么，不会bower的话，...

    Jeff 评论0 收藏0

  • 开坑，写点Polymer 1.0 教程第3篇——组件注册与创建

    摘要：我们修改下例子定义借口，构造时将重新赋值测试一下这种构造函数传参的方式只适用于，的创建方式，而且它种方式不支持，原因你自己拍脑袋想想就懂了。 之前一篇算是带大家大致领略了一下Polymer的风采。这篇我们稍微深入一丢丢，讲下组件的注册和创建。 创建自定义组件的几种方式 这里我们使用Polymer函数注册了一个自定义组件my-element // register an element ...

    joywek 评论0 收藏0

  • 开坑，写点Polymer 1.0 教程第5篇——事件与消息机制

    摘要：而不写，则监听是加在整个组件之上的。组件的输入就是属性赋值，输出则是事件的触发。运行结果消息机制这里来聊聊组件化开发的消息机制，这个并不局限于或者应用，适用于所有的组件式开发技术。 这篇会讲下组件内部的事件处理机制，以及组件和外界通讯的处理方式（父子通讯，兄弟通讯等） 组件内的事件处理机制 第一种，直接写在标签里，用on-eventName=eventHandler的方式 ...

    SHERlocked93 评论0 收藏0

  • 开坑，写点Polymer 1.0 教程第4篇——组件的生命周期

    摘要：组件也一样，从被创建，被解析，被赋初始化值，被添加到舞台，被绘制，被布局，使用过程中被修改了值，被重绘，被重新布局，最终被父组件移除结束惨淡的一身等等，都可以称为组件的生命周期。 这篇来谈谈polymer最核心的一块，也可以说是web components技术最最核心的一块内容 生命周期，大家在学习一些框架的时候最好都去了解一下它们的生命周期。 什么是生命周期 什么是生命周期？故名思议...

    Dionysus_go 评论0 收藏0

发表评论

登陆后可评论

0条评论

xiangzhihong

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<