Detailed explanation of Cpage.js binding event instances to components

Cpage.js is a lightweight Mvvm framework developed using TypeScript (a superset of JavaScript). Through this article, I will share with you the implementation code of Cpage.js binding events to components. Friends who need it can refer to it

Cpage.js is a lightweight Mvvm framework that uses TypeScript (JavaScript's super set) development.

Built-in template engine, routing, instructions, http, dom and other modules. It can easily carry out component development, has unified syntax and is easy to use, does not rely on third-party frameworks, and is suitable for the development of small and medium-sized projects.

Cpage.js can not only bind events to ordinary elements, but also to components!

First, we can define a component header

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() {
  }
});

and then reference it wherever we need to use it

<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>

You can use c-event to bind events on components

The above is the detailed content of Detailed explanation of Cpage.js binding event instances to components. For more information, please follow other related articles on the PHP Chinese website!