In the case of the current Vue flying, people only know Vue did not know Polymer
Vue inspired by Polymer, following is the official website of their own contrast Vue
"Polymer is another project sponsored by Google, in fact, is also a source of inspiration .Vue Vue components can roughly analogous to the Polymer custom elements, and both have a similar style of development. The biggest difference is that, Polymer is based on the latest version of the Web Components standards, and the need to help heavyweight polyfills work (performance degradation), the browser itself does not support these features. in contrast, Vue is not in the case of support to IE9 We need to rely on polyfills to work.
In Polymer version in order to make up for the performance, the team very limited use data binding system. For example, in Polymer supported only expression only Boolean value negated and a single method call to achieve its computed method is not very flexible.
"
Probably looked at the wording of the Vue, apply the formatting is Polymer1.0
In case you just know you may feel Vue Vue good clear writing, good novel,
But if you read Polymer2.0 you might think this is good writing confusion, dreadful
Vue achieved by rendering virtual Dom and two-way binding, Polymer achieved by rendering two-way binding and shadowDom
The concept comes from the virtual Dom React,
React Polymer0.6 version and do a simple test speed is 20 times React, but the test is too simple does not mean anything
But you might say that since Polymer2.0 slip so no one knows why it
I have to say Polymer has his own problems, like Vue as their own comparison, but I think this can only be that he did not fire a very weak factor
The most fundamental reason should be a big change in version, and no Chinese documents
Chinese documents about March 18 years to almost complete translation
But his version also makes it changes too much headache, almost every version is destructive of upgrades, and the new version of the browser will soon remove support for older versions
If your program is a joint browser packaged, the problem is not really the problem version of the change
Before Polymer3.0 each html form can be made into a trusteeship under the bower, 3.0 components into a js hosted under npm
When used always feels like (due to various reasons also were forced ah) gave up the original intention was to downgrade
Hey, memorial under 2.0 bar, the following wording is Polymer2.0
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<meta charset="utf-8">
<dom-module id="my-table">
<template>
<custom-style>
<style is="custom-style" include="iron-flex iron-flex-alignment">
:host {
display: block;
position: relative;
}
section {
text-align: center;
border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
div[role="row"] {
min-height: 40px;
line-height: 40px;
word-break: break-all;
}
div[role="row"] > div {
border-bottom: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
.table-header {
background: var(--table-header-background, #E1ECFF);
}
div[role="disabled"] {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.table-body > div:first-of-type {
background: var(--table-body-first-col-background);
}
.table-body > div:nth-of-type(n+2) {
background: var(--table-body-col-background);
}
</style>
</custom-style>
<section>
<div class="layout horizontal center-justified table-header " role="row">
<div class="flex">化验指标</div>
<dom-repeat items="[[tableData]]">
<template>
<div class="flex">[[item.name]]</div>
</template>
</dom-repeat>
</div>
<div class="layout horizontal center-justified table-body" role="row">
<div class="flex">化验结果</div>
<dom-repeat items="[[tableData]]">
<template>
<div class="flex" contenteditable="true"
index$="[[index]]" inner-text="{{item.value}}"
></div>
</template>
</dom-repeat>
</div>
<div class="layout horizontal center-justified table-body" role="row">
<div class="flex">化验减扣</div>
<dom-repeat items="[[tableData]]">
<template>
<div class="flex" contenteditable="true"
index$="[[index]]"
inner-text="{{item.deduct}}"
></div>
</template>
</dom-repeat>
</div>
<dom-if if="[[disabled]]">
<template>
<div role="disabled"></div>
</template>
</dom-if>
</section>
<iron-ajax auto url="/rest/inout/inspectitem" last-response="{{data}}"></iron-ajax>
</template>
<script>
class MyTable extends Polymer.Element {
static get is() {
return 'my-table';
}
static get properties() {
return {
tableData: {
type: Array,
value: [
{name: "水分%", id: 1},
{name: "色泽", id: 2},
{name: "气味", id: 3},
{name: "重金属%", id: 4},
{name: "含黄%", id: 5},
{name: "脂肪酸值%", id: 6},
{name: "杂质%", id: 7},
{name: "出糙率%", id: 8},
],
notify: true,
reflectedToAttribute: true,
observer: 'tableDataChanged'
},
disabled: {
type: Boolean,
value: false,
notify: true,
reflectedToAttribute: true
},
data: {
type: Object,
observer: 'dataChanged'
}
}
}
dataChanged(d) {
if (d && d.data && d.data.length > 0) this.tableData = d.data;
}
tableDataChanged(d) {
d.forEach(v => {
if (v.value == undefined) v.value = null;
if (v.deduct == undefined) v.deduct = null;
})
}
}
customElements.define(MyTable.is, MyTable);
</script>
</dom-module>