1,框架简介
Cpage.js是一款轻量级的Mvvm框架,使用TypeScript(javascript的超集)开发。
内置模板引擎,路由,指令,http,dom等模块。可以方便地进行组件化开发,语法统一、易用,不依赖于第三方框架,适合中小项目开发。
框架同时支持es5与es6语法,可参考example中示例。
安装使用
使用es6开发
安装:
npm install cpage
引用:
import Cpage, { Component } from 'cpage';
使用es5开发
<script src="https://gist.github.com/chenhaozhi/73ed39d4704c1ad5b49bdf9ac2c3ebe4.js"></script>
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 = `hello`;
}
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.components = [Hello];
}
handelC(event){
this.$event.trigger('header-event', 'header');
}
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>span</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)
网友评论