当前位置：首页 > news >正文

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

news 来源：原创 2024/5/19 12:01:33

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

如果我没有说明，默认情况下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定义的那个名字

效果

添加本地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>

效果：

与原生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>

效果

提示：将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>

声明一个属性

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>

效果

双向数据绑定

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