npm 包 @polymer/polymer 使用教程

阅读时长 4 分钟读完

介绍

@polymer/polymer 是 Polymer 3.x 的核心库,可以帮助开发者构建现代 Web 应用程序。Polymer 是一个基于 Web 组件的库,因此在使用 @polymer/polymer 时会大量涉及 Web 组件的知识。

官方文档地址:https://polymer-library.polymer-project.org/3.0/docs/about_30

使用步骤

安装 @polymer/polymer

使用 npm 安装 @polymer/polymer:

创建 Web 组件

在使用 @polymer/polymer 之前,需要先创建一个 Web 组件。

下面是一个简单的 Web 组件:

-- -------------------- ---- -------
---- ------ ------- ------- ---
------- ------------- ------------------------------------------------------------------

---- ------ - --- --------- ---
----------- ----------------
  ----------
    -------
      -- -
        ------ -----
      -
    --------
    ---------- -----------
  -----------
  --------
    ----- --------- ------- --------------- -
      ------ --- ---- - ------ ------------- -
    -

    ------------------------------------------ -----------
  ---------
-------------

---- --- --- --- --------- ---
-------------------------

使用 @polymer/polymer

在 Web 组件中使用 @polymer/polymer 的示例:

-- -------------------- ---- -------
---- ------ ------- ------- ---
------- ------------- ------------------------------------------------------------------

---- ------ - --- --------- ---
----------- ----------------
  ----------
    -------
      -- --- ------ --- --
      ----- -
        -------- ------
      -
      -- -
        ------ -----
      -
    --------
    ---- --- -------- ---
    ---------- --------------
  -----------
  --------
    ----- --------- ------- --------------- -
      ------ --- ---- - ------ ------------- -

      ------ --- ------------ -
        ------ -
          ----- -
            ----- -------
            ------ -------
          -
        -
      -
    -

    ------------------------------------------ -----------
  ---------
-------------

---- --- --- --- --------- ---
----------- ----------------------------

上述示例中,我们使用了 Shadow DOM 来保护我们的组件私有 DOM,使用了 Polymer 的双向绑定技术,使得 Web 组件更加易于维护和扩展。

总结

使用 @polymer/polymer 可以帮助开发者快速构建可维护,易于扩展的 Web 组件,同时也能够提高开发效率。希望本文能够对 Web 前端开发者有所启发。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedaa51b5cbfe1ea0610444

纠错
反馈