Detailed explanation of notification interaction in JavaScript's Polymer framework_Basic knowledge

Polymer defines properties with monitoring requirements in the form of accessor properties (properties without monitoring requirements are still defined in the form of ordinary properties). The "::" syntax can also be used in the template to bidirectionally synchronize attributes to an event of the target element. This is the concept of two-way binding in Angular, and it is even purer and closer to the principle than it.
If the attribute defined in properties is not added with notify and is not used in the template, then it has no monitoring requirements, so it will be defined as a normal attribute. Otherwise, it will be defined as an accessor attribute. The following example explains this problem
Run

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <h1>[[z]]</h1>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   properties: {
    x: { value: 'x' },
    y: { value: 'y', notify: true }
   },
   ready: function() {
    console.log(Object.getOwnPropertyDescriptor(this, 'x'));
    console.log(Object.getOwnPropertyDescriptor(this.__proto__, 'y'));
    console.log(Object.getOwnPropertyDescriptor(this.__proto__, 'z'));
   }
  });
 </script>
</dom-module>

<demo-test></demo-test>

An attribute with notify set to true will generate a "property name-changed" event when it changes. Note that the attribute name and changed are linked by a horizontal bar, and changed is in the past tense, not the prototype of change. Polymer can use listeners to add event listeners, but it cannot be directly bound to a function, but must be bound to a certain property name (I don't understand why it is designed this way).
Run

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <h1>[[i]]</h1>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   properties: {
    i: { value: 0, notify: true }
   },
   ready: function() {
    setInterval(function(that) {
     that.i++; 
    }, 100, this);
   },
   listeners: {
    'i-changed': 'iChangeHandler'
   },
   iChangeHandler: function(event) {
    console.log(event.detail.value);
   }
  });
 </script>
</dom-module>

<demo-test></demo-test>

Events can be captured using the "::" syntax in templates, and these events include notification events generated above and interactive events actively triggered by users.
Run

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" /

<dom-module id="demo-test">
 <template>
  <input value="{{text::input}}" /><hr/>
  <textarea value="{{css::input}}"></textarea><hr/>
  <h1 style$="[[css]]">[[text]]</h1>
 </template>
 <script>
  Polymer({ is: 'demo-test' });
 </script>
</dom-module>

<demo-test></demo-test>

Note that the above is style$="[css]" instead of direct style="css", because the value is assigned to the attribute of the element, not a pure property assignment. So add a "$" before the equal sign (actually I think this syntax looks very strange).
The above is all I know about data binding in Polymer. There may be some omissions and they may be added in other articles.