前端组件化Polymer入门教程(3)——快速入门

时间：2023-01-19 06:39:10

本系列主要翻译官方的教程，因为国内目前这方面的资料太少了，但也不一定和官网的一样，反正就是自己想到哪就写到哪。

如果我没有说明，默认情况下index.html始终包含这段代码，后面将不会再贴上来。

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<!-- 这是一个基础版的兼容库 -->

	<script src="webcomponents-lite.min.js"></script>

	<!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->

    <link rel="import" href="./template/template.html">

</head>

template.html始终包含

<link rel="import" href="../polymer-1.7.0/polymer.html">
我们可以创建一个自定义元素，并向这个自定义元素添加属性和方法，不过值得注意的是：自定义元素的名称必须包含一个“-”。

template.html

<script>

  Polymer({

    is: "proto-element",

    ready: function() {

      this.textContent = "I'm a proto-element. Check out my prototype!"

    }

  });

</script>
is：创建一个自定义元素，必须包含“-”，也就是你要的标签名。
ready:当在页面中创建了proto-element这个元素后将会调到这个方法，this表示当前这个元素，this.textContent设置内容。

index.html

<proto-element></proto-element>

就是用is定义的那个名字

效果

前端组件化Polymer入门教程(3)——快速入门

添加本地DOM

template.html

<dom-module id="dom-element">

  <template>

    <p>I'm a DOM element. This is my local DOM!</p>

  </template>

  <script>

    Polymer({

      is: "dom-element"

    });

  </script>

</dom-module>
用dom-module来添加原生dom，如果用这种方式需要给它加一个id使用的时候就用这个id当做标签名。
template用来包含css、html

index.html

<dom-element></dom-element>

效果：

前端组件化Polymer入门教程(3)——快速入门

与原生DOM结合

template.html

<dom-module id="picture-frame">

  <template>

    <style>

      div {

        display: inline-block;

        background-color: #ccc;

        border-radius: 8px;

        padding: 4px;

      }

    </style>

    <div>

      <content></content>

    </div>

  </template>

  <script>

    Polymer({

      is: "picture-frame",

    });

  </script>

</dom-module>

如果希望在自定义组件中插入内容就需要用到content标签，它会将我们写的标签插入到content中。

index.html

<picture-frame>

  <p>听说你要学前端。</p>

</picture-frame>

效果

前端组件化Polymer入门教程(3)——快速入门

提示：将style放在template中，它之会影响template里面的元素。

数据绑定

template.html

<dom-module id="name-tag">

  <template>

  	<!-- 将owner绑定到property上 -->

    This is <b>{{owner}}</b>'s name-tag element.

  </template>

  <script>

  Polymer({

    is: "name-tag",

    // 当元素准备好的时候将owner属性的值设置为"Daniel"

    ready: function() {

      this.owner = "Daniel";

    }

  });

  </script>

</dom-module>

index.html

<name-tag></name-tag>

前端组件化Polymer入门教程(3)——快速入门

声明一个属性

template.html

<dom-module id="configurable-name-tag">

  <template>

    This is <b>{{owner}}</b>'s configurable-name-tag element.

  </template>

  <script>

    Polymer({

      is: "configurable-name-tag",

      properties: {

        owner: {

          type: String,

          value: "Daniel"

        }

      }

    });

  </script>

</dom-module>
通过properties声明一个自定义属性，type属性类型，value属性默认内容（如果自定义元素没有写这个属性的话）。

index.html

<configurable-name-tag owner="Scott"></configurable-name-tag>

效果

前端组件化Polymer入门教程(3)——快速入门

双向数据绑定

template.html

<link rel="import" href="https://polygit2.appspot.com/components/iron-input/iron-input.html">

<dom-module id="editable-name-tag">

  <template>

    <p>

    This is a <strong>{{owner}}</strong>'s editable-name-tag.

    </p>

    <!-- iron-input exposes a two-way bindable input value -->

    <input is="iron-input" bind-value="{{owner}}" placeholder="Your name here...">

  </template>

  <script>

    Polymer({

      is: "editable-name-tag",

      properties: {

        owner: {

          type: String,

          value: "Daniel"

        }

      }

    });

  </script>

</dom-module>

注意这里不要把polymer.html引进来，iron-input.html是一个对input的扩展库。

index.html

<editable-name-tag></editable-name-tag>

效果

前端组件化Polymer入门教程(3)——快速入门

本节完，后面会更加详细的介绍，但是本人也是刚刚接触这个，难免有解释不太清楚的，还请见谅。

相关文章