Cpage.js，一款轻量级的前端MVVM框架，赶快来体验下吧！

1，框架简介

Cpage.js是一款轻量级的Mvvm框架，使用TypeScript（javascript的超集）开发。
内置模板引擎，路由，指令，http，dom等模块。可以方便地进行组件化开发，语法统一、易用，不依赖于第三方框架，适合中小项目开发。
框架同时支持es5与es6语法，可参考example中示例。

git地址：https://github.com/chenhaozhi/Cpage.js

安装使用

安装：
// 使用npm
npm install cpage

// 使用yarn
yarn add cpage
引用：
import Cpage,  { Component } from 'cpage'; 

2，使用组件

用es5语法开发

声明一个hello组件

var Hello = Cpage.component({
    name: 'hello',
    components: [],
    template: `<div>{{hello}}</div>`,
    data: {
        hello: '这是hello组件'
    },
    props: {

    },
    beforeRender() {
        console.log('beforeRender')
    },
    render() {
        console.log('render')
    }
});

在根组件引用hello组件

var app = Cpage.component({
    name: 'app',
    components: [Hello],
    template: `<div>{{text}}</div>`,
    data: {
        text: 'es5 demo'
    },
    beforeRender() {
        
    },
    render() {
        
    }
});
Cpage.bootstrap("#app", app);

用es6语法开发

声明一个hello组件

import Cpage,  { Component } from 'cpage';

export default class Hello extends Component {
    constructor(){
        super();
        this.name = 'hello';
        this.data = {};
        this.template = `<div c-click="click()">hello</div>`;
    }
	click() {
		// 派发事件
		this.$event.emit('header-event', 'header');
	}
    render(){
        
    }
}

在根组件引用hello组件

import Cpage,  { Component } from 'cpage';
import Hello from './hello';
const html = require('./app.html');

export default class App extends Component {
    constructor(){
        super();
        this.name = 'app';
        this.data = {};
        //this.templateUrl = html;
        this.template = `<div>
        	<hello></hello>
		</div>`;
        this.components = [Hello];
    }
    handelC(event){
    	// 接受事件
        this.$event.on('header-event', （msg） => {
			console.log(msg)
		});
    }

    render(){
        
    }
}
Cpage.bootstrap('#app', App);

#3，属性

属性名	是否必须	类型	用途
name	是	字符串	组件名称
components	是	数组	子组件名称集合
data	否	对象	组件属性
props	否	对象	用于子组件与父组件之间的数据传递
style	否	字符串	组件样式
styleId	否	字符串，id选择符	组件样式，es5语法
styleUrl	否	数组或对象	组件样式，es6语法，支持import * as css from ‘’; 或者require(‘…/style.css’)，需要引入css-loader
template	否	字符串	组件模板，es5,es6通用
templateId	否	字符串，id选择符	组件模板，es5语法
templateUrl	否	数组或对象	组件模板，es6语法，支持import * as html from ‘’; 或者require(‘…/xx.html’)，需要引入html-loader

#4，方法

方法名	是否必须	用途
beforeRender	否	组件完成渲染之前执行
render	是	组件完成渲染之后执行
bootstrap	是	Cpage对象的静态方法，用于将组件渲染到dom中

#5，指令

指令名	用法	用途
c-事件名	c-event=“handel()” event可以为click,mouseover…	用于dom的事件绑定
c-for	c-for=“item in items”	用于循环输出指定次数的 HTML 元素，表达式必须是数组
c-if	c-if=“{{id>10}}”	表达式为true，则渲染节点；否则不渲染
c-show	c-show=“{{id>10}}”	表达式为true，则显示节点；否则隐藏
c-ref	c-ref=“btn”	节点标识符
c-html	c-html=“span”	将表达式内的字符替换节点的html

#6，组件操作

方法名	应用范围	用途
$data	整个组件生命周期	修改组件的data属性，例：this.$data(‘text’, ‘new text’)
$el	组件渲染完毕之后才能使用	组件节点
$refs	组件渲染完毕之后才能使用	单个dom节点，例：this.$refs[‘the-ele’]，需要配合c-ref使用
$http	整个组件生命周期	操作http，例：this.$http.ajax({})。支持ajax(),get(),post()等操作
$event	整个组件生命周期	事件触发和监听，例：this.$event.trigger(事件名,信息)this.$event.listen(事件名, 回调函数)

#7，cookie操作
es6语法

import { Cookie } from 'cpage';

es5 可以直接使用Cookie对象

是否支持cookie

Cookie.support()

添加cookie

Cookie.set(name,value,{hours,path,domain,secure})

获取cookie

Cookie.get(name:string)

移除cookie

Cookie.remove(name:string, path?:string)