Javascript 我们可以像在Vue中那样在聚合物中使用模板语法吗？

Vue中有单文件组件概念，其中“模板”是带有自定义指令和其他功能的纯HTML（没有jsx或类似以下字符串：

template:`Content`

我们可以在聚合物3中使用类似的东西吗

内容

是的，有。它都写在一个js文件中，通常命名为component-name.js。在下面的例子中，我将我的js文件命名为

say hello.js

从“@polymer/polymer/polymer element.js”导入{html，polymererelation}”；
类SayHello扩展了关联{
静态获取模板（）{
返回html`
//在这里添加html内容
.customClass{
字体大小：16px；
}
你好{{name}}，
`
}
静态获取属性（）{
返回{
姓名：{
类型：字符串，
值：null，
},
链接：{
类型：数组，
价值：[
{id:'home'，name:'home'}，
{id:'profile'，name:'profile'}，
{id:'about'，name:'about'}
]
}
}
}
道尔特（e）{
警报（如target.id）
}
就绪（）{
super.ready（）；
这个.push（“链接”{
id:“设置”
名称：“设置”
});
}
}
window.customElements.define（“SayHello”，SayHello）；

如上所述，polymer中没有

数据

对象，所有内容都在properties下。您可以使用properties将数据传递到组件，组件的内部数据也将存储在properties中。因此，数据的任何突变也将传递到父组件。 您不必一直监视并将数据发回给父级。相反，它可以按照预期的那样开箱即用

事件绑定是使用on-click进行的，而不是vue中的@click

v-for使用dom重复模板完成。数组中的元素在每次迭代中称为

项

。为了使用道具绑定

项

中的元素，需要使用花括号，其中vue使用分号

vue中没有挂载回调，而是有一个名为ready（）的回调

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

---

我已经使用polymer 1和polymer 3有一段时间了，并且完全停止了使用。它看起来没有多大希望。

谢谢！您认为如何在IDE中很好地支持html模板inside helper？