Cpage.js框架API

作者: 欣悦之旅 | 来源:发表于2017-08-23 21:08 被阅读0次

    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)

    相关文章

      网友评论

        本文标题:Cpage.js框架API

        本文链接:https://www.haomeiwen.com/subject/lumjdxtx.html