tiny-vue
rewrite vue.js.
包含一个比较完整的基本项目,webpack打包、mocha测试、eslint代码校验.
实现原理分析:https://github.com/xiaofuzi/deep-in-vue
特性
- 双向绑定
- 计算属性
- 事件支持
- watch监测
- 生命周期函数
- 预定义指令
- 自定义指令
- 组件系统
Usage
example:
add toggle
var mvvm;var opts = el: '#app' data: isShow: false counter: 1 hello: 'ahahah!' info: age: 18 person: weight: 20 height: 170 computed: { return text: thishello + '---' + thisinfoage; } methods: { thiscounter += 1; thisinfoage += 1; } { thisisShow = !thisisShow; } watch: { console; } { console; } 'info.age' { console; } { let self = this; selfhello = 'Ready, go!'; } TinyVuemvvm = opts;
组件系统示例
组件系统示例
var mvvm;var subComponent = template: '<div><h2 v-text="name"></h2></div>' { return name: 'an new component!' } props: 'info' TinyVue;var opts = el: '#app' data: message: 'the fast mvvm framework.' computed: components: subComponent: subComponent methods: watch: { } mvvm = opts;
这里定义了<sub-component />
局部组件以及<hello-world />
全局组件。
API
options
- el
Type: String | Node
根节点选择器或是根节点dom元素。
-
template Type:
String
组件模板 -
data
Type: Object
初始化响应式数据模型
- computed
Type: Object
计算属性,每一个元素对应一个函数
注: * computed属性依赖于data中的响应式数据 * computed属性可依赖computed属性 * computed禁止赋值操作
- methods
Type: Object
每一个元素对应一个函数,支持响应式替换
- watch
Type: Object
监测对象,监测对应的响应式数据,当数据发生更改时执行回调.
directives
* v-text
* v-show
* v-visible
* v-model
* v-on
* v-if
* v-for
实例 api
- $watch
Type: Function
监测某一数据的响应式变化
如:
```js
var vm = new TinyVue({
data: {
info: {
age: 18
}
}
});
vm.$watch('info', function (info) {
});
vm.$watch('info.age', function (age) {
})
```
- $directive
Type: Function
自定义指令
如:
```js
vm.$directive('text', function (text) {
this.el.textContent = text;
});
```
-
$reactive 将一个普通对象转换为一个响应式对象
-
component 定义全局组件
TinyVue; -
beforeCompiler
生命周期函数,编译前执行
- ready
生命周期函数,渲染完毕后执行
Install
npm install tiny-vue --save