開坑，寫點Polymer 1.0 教程第2篇(上)——hello world篇

時間 2019-12-20

標籤 polymer1.0 polymer 教程 hello world 简体版

原文原文鏈接

書接上回，咱們已經把運行Polymer的準備工做作好，接下來就敲點代碼來感覺下它究竟是個什麼東東，這一篇裏我基本會照搬官網Quick tour的幾個例子來快速過一下。html

註冊一個自定義組件

須要調用Polymer這個function才能在瀏覽器中註冊一個新的組件，你須要給這個新組件關聯一個標籤名，你也能夠在這個組件上添加你自定義的屬性和方法。很是重要的一點是，這個組件的標籤名必需要以「-」符號分割。
你須要把這個組件的各類定義封裝在一個對象裏做爲參數傳入到Polymer函數中去。web

proto-element.html(自定義組件)segmentfault

<link rel="import"
      href="bower_components/polymer/polymer.html">
<!-- link rel="import" 這種寫法可能比較陌生，其實就是導入一個已經封裝好的自定義組件，這裏導入了polymer.html你能夠打開看一下里面有對Polymer function的定義 -->
<script>
  // register a new element called proto-element
  Polymer({
    is: "proto-element", //is來標示組件的標籤名
    // add a callback to the element's prototype
    ready: function() { //ready是組件生命週期的一部分，這塊之後會具體開一篇介紹
      this.textContent = "I'm a proto-element. Check out my prototype!"  //爲組件賦上一段文字
    }
  });
</script>

index.html瀏覽器

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="proto-element.html">
    <!-- 這裏就是導入了上面已經定義好的自定義組件 proto-element -->
  </head>
  <body>
    <proto-element></proto-element><!-- 用標籤的形式加載自定義組件-->
  </body>
</html>

運行效果
dom

Add local DOM

上面這個例子只是將一段text封裝成一個組件，在實際使用過程當中咱們不多會這麼幹，絕大部分狀況下咱們封裝的最小顆粒都是原生的標籤，下面這個例子就對dom進行封裝（官網稱爲local dom）svg

dom-element.html函數

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

<dom-module id="dom-element">

  <template>
    <p>I'm a DOM element. This is my local DOM!</p>
  </template>
<!--這裏用一個template標籤來封裝了dom-->
  <script>
    Polymer({
      is: "dom-element"
    });
  </script>

</dom-module><!--最外層也用了dom-module來包裹-->

index.htmlui

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="dom-element.html">
  </head>
  <body>
    <dom-element></dom-element>
  </body>
</html>

運行結果
this

Compose with local DOM

這個功能不太好翻譯，大概意思就是你能夠把一些子組件或者子標籤經過標籤嵌套的方式插入到父的組件中去，語言可能不太好描述，我們直接用代碼說話
picture-frame.htmlspa

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

<dom-module id="picture-frame">

  <template>
    <!-- scoped CSS for this element -->
    <style>
      div {
        display: inline-block;
        background-color: #ccc;
        border-radius: 8px;
        padding: 4px;
      }
    </style>
    <div>
      <!-- any children are rendered here -->
      <content></content>
      <!--注意這裏使用了content標籤，子組件或者標籤將被插入到這裏-->
    </div>
  </template>

  <script>
    Polymer({
      is: "picture-frame",
    });
  </script>

</dom-module>

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="picture-frame.html">
  </head>
  <body>
    <picture-frame>
      <img src="images/p-logo.svg"><!--此處就是講一個原生的img標籤做爲子組件插入到picture-frame中去-->
    </picture-frame>
  </body>
</html>

運行結果