zoukankan      html  css  js  c++  java
  • 前端组件化Polymer入门教程(2)——Hello world

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

    自定义元素

    组件页

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

  • 相关阅读:
    zimg
    ffmpeg P016 P010 YUV444P16LE 的打印的像素值
    zimg 使用
    P010LE P016LE YUV420P10LE
    如鹏网学习笔记(八)CSS
    对dui界面 组件 hook的通杀方案
    Python 中str 与 bytes 数据结构转换
    Tensorflow 老版本的安装
    Java string和各种格式互转 string转int int转string
    电脑黑屏
  • 原文地址:https://www.cnblogs.com/pssp/p/5919519.html
Copyright © 2011-2022 走看看