javascript - 我们可以像在 Vue 中一样在 Polymer 中使用模板语法吗？

Question

Vue 中有单个文件组件的概念，其中"template"是带有自定义指令和其他功能的纯 HTML(没有 jsx 或字符串，如:template:`<div>Content</div>`我们可以在 Polymer 3 中使用类似的东西吗？

    <template>
      <div>Content</div>
    </template>

Answer 1

就在这里。这一切都写在一个通常命名为 component-name.js 的 js 文件中。在以下情况下，我将我的 js 文件命名为 say-hello.js

import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";

class SayHello extends PolymerElement {
   static get template() {
     return html`
        //add html contents inside here
        <style>
          .customClass {
            font-size: 16px;
          }
        </style>
        <div class="customClass">
          Hello {{name}},
        </div>
        <template is="dom-repeat" items="{{links}}">
           <input type="button" id="{{item.id}" value="{{item.name}}" on-click="doAlert"/>
        </template>

     `
   }

   static get properties() {
     return {
        name: {
          type: String,
          value: null,
        },
        links: {
          type: Array,
          value: [
            {id: 'home', name: 'Home'},
            {id: 'profile', name: 'Profile'},
            {id: 'about', name: 'About'}
          ]
        }
     }
   }

   doAlter(e){
      alert(e.target.id)
   }

   ready() {
    super.ready();
    this.push("links", {
        id: 'settings'
        name: 'Settings'
      });
  }
}
window.customElements.define("say-hello", SayHello);

正如您在上面注意到的，没有 data polymer 中的物体，一切都在属性之下。您可以使用属性将数据传递给组件，并且组件的内部数据也将存储在属性中。正因为如此，任何数据突变也将传递给父组件。
您不必监视并将数据发回给父级。相反，它按预期开箱即用。

事件绑定(bind)是通过点击完成的，而不是 vue 中的 @click

v-for 是使用 dom-repeat 模板完成的。数组中的元素称为 item在每次迭代中。为了在 item 中绑定(bind)元素对于 Prop ，您需要使用大括号，其中 vue 使用分号。

在 vue 中没有挂载回调，而是调用 ready() 的回调

您不能将元素直接推送到数组，相反，您需要在数组突变方法上使用他们的。

我使用 polymer 1 和 3 已经有一段时间了，完全停止了。它看起来不太有希望。