前端组件化Polymer.js入门教程(2)——Hello world

最新推荐文章于 2024-08-10 08:26:48 发布

xiaozhen0610

最新推荐文章于 2024-08-10 08:26:48 发布

阅读量717

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2ijihkjcbcb.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

本节为体验篇，就是让你了解它有哪些功能，不做详细说明，后面再来讲细节。

自定义元素

组件页

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