polymer 自定义元素入门【4】

最新推荐文章于 2020-08-06 10:31:50 发布

chongru9836

最新推荐文章于 2020-08-06 10:31:50 发布

阅读量101

点赞数

原文链接：https://my.oschina.net/u/157383/blog/674748

版权

下面手动来创建一个干净的项目

1、cd nodejs

2、mkdir polymer-demo1

3、cd polymer-demo1

4、bower init (一路回车)

5、echo>.bowerrc

{ "directory": "bower_components"}

打开“.bowerrc”文件增加bower安装组件路径

6、bower install -save polymer

7、根目录创建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="import" href="my-elem.html">
</head>
<body>
    <my-elem></my-elem>
</body>
</html>

8、自定义一个polymer元素my-elem.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="my-elem">
  <template>
    <h3>my elem test</h3>
  </template>

  <script>
    Polymer({
      is: "my-elem",
    });
  </script>
</dom-module>

9、安装 polyserve

npm install -g polyserve

安装完，启动服务

polyserve

10、访问

http://localhost:8080/

第一个简单的polymer自定义元素完成！

11、为元素增加、样式、属性、监听事件

<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="my-elem">
    <template>
        <style>
          :host {display: block;}
          h3 {color: red;}
          h3>span {color: blue;}
        </style>
        <h3>my <span>elem</span> test</h3>
        <p>{{text}}</p>
    </template>
    <script>
    Polymer({
        is: "my-elem",
        properties: {
            text: {
                type: String,
                value: 'default value'
            }
        },
        listeners: {
          'tap': 'click'
        },
        click: function() {
          this.text = "click!";
        },
    });
    </script>
</dom-module>

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="import" href="my-elem.html">
</head>
<body>
    <h3>hello</h3>
    <my-elem text='12345689'></my-elem>
    <my-elem></my-elem>
</body>
</html>

样式定义放在 template 标签里面

：host 就是当前模块 #my-elem

转载于:https://my.oschina.net/u/157383/blog/674748