Vue.js实践记录
发布于 9 年前 作者 keller35 6957 次浏览 最后一次编辑是 8 年前 来自 分享

#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,封装自己的组件达到复用的目的。因为这一块实践较少,后续补上。

4 回复

vue有没有动态给treeview 动态增加删除节点的组件?

最近我们也在实践这个,还不错。

@yakczh 应该是没有的,需要你自己封装

入门贴,最近做了一个Vue全家桶项目,复杂交互场景Vue确实好用, Vue全家桶实践项目总结

回到顶部