#Vue.js实践记录:
Vue.js 是一个MVVM框架,由Evan You大神开发。
vue类似于angular,但是更加轻便,更专注于ViewModel,上手也更加简单。
例子:
<script src="vue.js"></script>
<div id="demo">
{{message}}
<input v-model="message">
</div>
<script>
var data = {
message: 'Hello Vue.js!'
};
var vm = new Vue({
el: '#demo',
data: data
})
</script>
以上一个简单的example,vue通过实例化Vue对象,可以实现与指定view和model的双向绑定,而Vue对象本身是一个viewmodel。
Vue实例返回的是一个ViewModel对象,通过这个对象,可以操作这个vm绑定的DOM,即vm.$el
;也可以操作这个vm绑定的model,即vm.$data
,vm就是双向绑定的中间联系。vm还有很多实例方法,如数据监视,通过vm.$watch()
可以监视model的变化,执行监视函数;又如事件通讯,通过vm.emit()
可以发布事件,vm.on()
可以监听事件。这些方法在开发中都有很使用的地方,具体可见文档。
Vue的model绑定是基于js的GET/SET访问器实现的dependency tracking,按照vue作者的话说会比angular的dirty checking效率高,但是使用的时候就会有一些限制。
vm.$data
指向的是model,但其实这个model对象已经跟实例化的时候指定的model有了一些变化,vue自动为model增加了SET/GET访问器,所以这也是vue双向绑定的原理。因为有了SET/GET访问器,model上的变化,通过访问器触发了view的变化,也就达到了双向绑定的目的。也正是因为这样,下面的例子不能达到双向绑定的效果。
<script src="vue.js"></script>
<div id="demo">
{{message}}
<input v-model="message">
{{key}}
<input v-model="key">
</div>
<script>
var data = {
message: 'Hello Vue.js!'
};
var vm = new Vue({
el: '#demo',
data: data
});
setTimeout(function(){
data.key = "value";
}, 1000);
</script>
这是因为新增的属性没有SET/GET访问器,属性的变化将不会触发view层的更新。所以vue提供了vm.$add()
方法来支持新增属性,删除属性的话也可以使用vm.$delete
方法。
Vue的指令功能也很强大,类似于angular的指令,主要是用于view层的操作。
同时,vue提供了组件系统,可以扩展vue,封装自己的组件达到复用的目的。因为这一块实践较少,后续补上。
vue有没有动态给treeview 动态增加删除节点的组件?
最近我们也在实践这个,还不错。
@yakczh 应该是没有的,需要你自己封装
入门贴,最近做了一个Vue全家桶项目,复杂交互场景Vue确实好用, Vue全家桶实践项目总结