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

Question

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

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

Answer 1

是的，有。全部写在一个js文件中，通常命名为component-name.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 对象，所有内容都在属性下。您可以使用属性将数据传递到组件中，组件的内部数据也将存储在属性中。因此，数据的任何变化也将传递给父组件。您不必监视并将数据发回父级。相反，它按预期开箱即用。

事件绑定是通过点击来实现的，而不是 vue 中的@click

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

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

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

我已经使用聚合物 1 和 3 一段时间了，现在完全停止了。看起来不太乐观。

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

Can we use template syntax in Polymer like in Vue?

javascript

frontend

polymer