Polymer 聚合物2.x-如何使这个搜索过滤器工作？

我想在Polymer 2.x web应用程序中实现元素搜索过滤器。
下面是Polymer 1.x的代码，我不知道如何使它在Polymer 2.x中工作

如何从下面的Polymer 1.x中生成代码，以处理此Polymer 2.x页面：

my-home.html |脚本区域

类Myhome扩展了Polymer.Element{
静态get是（）{return'my home'；}
}
window.customElements.define（Myhome.is，Myhome）；

Polymer 1.x中的搜索筛选器代码： html

[[项目说明]]
按钮

剧本

聚合物({
是‘我的家’，
特性：{
默认数据：{
类型：数组，
值：[{title:'Color picture'，description:'An RGB picture'}，
{标题：'Grey image'，描述：'That's a Grey picture'}，
{标题：'3'，说明：'this is content 3'}]
},
数据：{
类型：数组
}
},
就绪：函数（）{
this.data=this.defaultData；
this.search.addEventListener（'keyup'，this.searchChanged.bind（this））；
},
搜索更改：功能（e）{
var querySearch=this.$.search.value.toLowerCase（）；
如果（查询搜索==''）{
this.data=this.defaultData；
}否则{
this.data=this.defaultData.filter（函数（项）{
return item.title.toLowerCase（）.indexOf（querySearch）！=-1 | | item.description.toLowerCase（）.indexOf（querySearch）！=-1；
});
}
}
});

很多脚本都必须更改，最显著的可能是升级到基于类的元素。这将包括作为

ready（）

函数的第一行，谢谢。只是，Polymer太令人困惑了……作为一个新手开发人员，甚至很难开始理解它，因为没有任何好的教程展示在项目中构建和实现不同组件的整个过程。我想我会选择Vue.js。哦，我个人不同意，我发现聚合物对我们的团队来说比我使用的任何其他框架都要好得多，特别是因为纸张元素对你来说太多了。我也喜欢它，只是很难更深入地理解它。你们是怎么学会的？您是否拥有良好的web开发人员背景，并仅使用文档了解框架的工作原理？如果您想了解更多信息，我建议您查看polymer starter kit（）、shop tutorial app（）和news tutorial app（）！！也可以尝试主页上的内容-通过“构建应用程序”部分。当然，如果不是为了你，也不是为了你。祝你好运！

  <script>
    class Myhome extends Polymer.Element {
      static get is() { return 'my-home'; }
    }

    window.customElements.define(Myhome.is, Myhome);
  </script>

 <div class="app-grid" style="display: flex;">
    <template items="[[data]]">
      <div class="item horizontal wrap layout" style="width: 300px; height: 300px; margin: 2%;">
        <paper-card heading="[[item.title]]" image="http://lorempixel.com/300/200">
           <div class="card-content">[[item.description]]</div>
           <div class="card-actions">
             <paper-button>Button</paper-button>
           </div>
        </paper-card>
      </div>
    </template>
  </div>

<script>
    Polymer({
      is: 'my-home',
      properties:{
          defaultData:{
            type:Array,
            value:[{title:'Color picture',description:'An RGB picture'},
              {title:'Grey image',description:'That\'s a grey picture'},
              {title:'3',description:'this is content 3'}]
          },
          data:{
            type:Array
          }
        },
        ready:function(){
          this.data = this.defaultData;
          this.$.search.addEventListener('keyup',this.searchChanged.bind(this));
        },
        searchChanged:function(e){
          var querySearch = this.$.search.value.toLowerCase();
          if(querySearch == ''){
            this.data = this.defaultData;
          }else{
            this.data = this.defaultData.filter(function(item){
              return item.title.toLowerCase().indexOf(querySearch) !== -1 || item.description.toLowerCase().indexOf(querySearch)  !== -1;
            });
          }
        }
    });
  </script>