前端組件化Polymer入門教程(2)——Hello world - pssp－IT工程師數位筆記本

文章出處

本節為體驗篇，就是讓你了解它有哪些功能，不做詳細說明，后面再來講細節。

自定義元素

組件頁

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

<dom-module id="my-tab">
    <!-- 可以在template里面寫樣式、html、js -->
    <template>
        <style>
            div{
                color:red;
                border:1px solid #dedede;
            }
        </style>
        <div>
            Hello World!
        </div>
        <script>
            console.log('Hello world');
        </script>
    </template>
<dom-module/>

<script>
    Polymer({
        // 組件名字，必須加-否則不起作用。
        is:'my-tab'
    });
</script>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 這是一個基礎版的兼容庫 -->
    <script src="webcomponents-lite.min.js"></script>
    <!-- 將rel修改為import可以引入另外一個HTML，它將會被執行 -->
    <link rel="import" href="./template/tab.html">
</head>
<body>
    <my-tab></my-tab>
</body>
</html>

效果

配置元素屬性和內容

tab.html

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

<dom-module id="my-tab">
    <!-- 可以在template里面寫樣式、html、js -->
    <template>
        <style>
            div{
                color:red;
                border:1px solid #dedede;
            }
        </style>
        <div>
            {{msg}}
        </div>
    </template>
<dom-module/>

<script>
    Polymer({
        is:'my-tab',
        properties:{
            msg:{
                type:String
            }
        }
    });
</script>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 這是一個基礎版的兼容庫 -->
    <script src="webcomponents-lite.min.js"></script>
    <!-- 將rel修改為import可以引入另外一個HTML，它將會被執行 -->
    <link rel="import" href="./template/tab.html">
</head>
<body>
    <my-tab msg="世界你好！"></my-tab>
</body>
</html>