Detaillierte Erläuterung der Bindung von Ereignisinstanzen an Komponenten durch Cpage.js

Cpage.js ist ein leichtes Mvvm-Framework, das mit TypeScript (einer Obermenge von JavaScript) entwickelt wurde. In diesem Artikel werde ich den Implementierungscode von Cpage.js zum Binden von Ereignissen an Komponenten mit Ihnen teilen. Freunde, die ihn benötigen, können darauf verweisen.

Cpage.js ist ein leichtes Mvvm-Framework, das TypeScript (JavaScripts Superset) verwendet ) Entwicklung.

Eingebaute Template-Engine, Routing, Anweisungen, http, Dom und andere Module. Es kann problemlos Komponentenentwicklungen durchführen, verfügt über eine einheitliche Syntax und ist einfach zu verwenden, ist nicht auf Frameworks von Drittanbietern angewiesen und eignet sich für die Entwicklung kleiner und mittlerer Projekte.

Cpage.js kann Ereignisse nicht nur an gewöhnliche Elemente binden, sondern auch an Komponenten!

Zuerst können wir einen Komponentenheader definieren

var header = Cpage.component({
  name: 'header',
  components: [],
  template: `<p>{{header}}--{{height}}</p>`,
  data: {
    header: &#39;this is header&#39;
  },
  props: {
    height: {
      default: &#39;10&#39;
    }
  },
  beforeRender() {
  },
  render() {
  }
});

und ihn dann dort referenzieren, wo wir ihn verwenden müssen

<p>
  <p class="main" c-click="handelIf()">my app--templateId</p>
  <p c-if="{{ifTest}}">
    <article></article>
  </p>
   <header 
    height="{{headerHeight}}"
    c-click="headerClick()"
    ></header>
   <article></article> 
  <footer></footer> 
</p>

Sie können c-event verwenden, um Ereignisse an die Komponente zu binden

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Bindung von Ereignisinstanzen an Komponenten durch Cpage.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!