前端組件化Polymer入門教程(2)——Hello world

時間 2019-11-18

標籤前端組件 polymer 入門教程 hello world 简体版

原文原文鏈接

本節爲體驗篇，就是讓你瞭解它有哪些功能，不作詳細說明，後面再來說細節。html

自定義元素

組件頁web

<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.htmldom

<!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>

效果
code

配置元素屬性和內容

tab.htmlcomponent

<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.htmlhtm

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。