快速入门

安装

npm install novae-js

初始化

import { Novae } from "novae-js"
Novae.init({
	root: "确定根元素的CSS选择符"
})

创建一个双向绑定数据的有状态组件

  首先引入双向绑定数据的有状态组件类AutoStatefulComponent。

import { AutoStatefulComponent } from "novae-js"

  我们以实现一个计数器为例，新定义一个组件类，并继承于AutoStatefulComponent。

  然后覆写其data方法，返回将与模板绑定的数据的变量名作为属性名、变量值为属性值的对象，以后就可以以this.属性名的方式获取或修改。

  接着建立一个触发页面更新的函数，这里为increase方法，直接让我们的number变量自增，建议您将更新数据的方法定义为成员变量，这样this指向更为明确。

  随后覆写template方法，方法返回要渲染的模板组件，可以通过JSX形式定义（需使用框架对应JSX实现的babel插件），将组件内的值以{ }包裹，这里需要将计数值number与事件回调increase作为文本出现或绑定到对应属性。

class TestComponent extends AutoStatefulComponent
{
	data() {
		return {
			number: 0
		}
	}
	increase = () => {
		++this.number
	}
	template() {
		return (<div class="counter">
					<p>Number: { this.number }</p>
					<p><button name="button" onclick={ this.increase }>Increase</button></p>
				</div>)
	}
}

  最后运行渲染方法，将组件传入参数列表，我们上方定义的组件就会渲染至根元素下，作为其唯一的子元素。

Novae.render(TestComponent)

加入虚拟路由

  如果想为组件设定对应的路径，需要以下方的形式定义路由条目，配置方法见虚拟路由。

Novae.router([
	{
		name: "Score",
		url: "/courses/:courseID/:SNo/score",
		component: TestComponent
	},
	{
		name: "RegExp",
		url: /^(\/?regExp)/,
		getParams: (url) => {
			return {
				name: url.split("/").pop()
			}
		},
		component: TestComponent
	}
])

  配置完后您就可以在地址栏通过路径#courses/123/456/score（中间的两项可替换为任何合法的值，在TestComponent中可以通过this.params.courseID以及this.params.sNo进行获取），也可以由#regExp/123（/123可替换为其他值）转到。

  此外也可以通过name字段，运行goTo方法转到，该例子就可以通过goTo("Score")以及goTo("RegExp")方法转到。

结语

  其他组件以及以上组件的进阶使用方法请移至文档目录进行查看。