最近在项目中引入了Vue.js,并不是为了MVVM的概念有多火爆,实在是看着一大堆DOM和POJO之间互相取值赋值的代码太繁琐,而Handlebar有太难用(尤其是没有文档)。 Vue做得确实漂亮,A
最近在项目中引入了Vue.js,并不是为了MVVM的概念有多火爆,实在是看着一大堆DOM和POJO之间互相取值赋值的代码太繁琐,而Handlebar有太难用(尤其是没有文档)。
Vue做得确实漂亮,API易读,官方文档也清楚。引入以后,页面代码量骤降,可读性还提高不少,真是前端工程师居家旅行必备工具。
不过百密一疏,官方文档还是有照顾不到的地方,让初学者容易踩坑:
- v-model 绑定是双向的,一旦表单控件设置了v-model, 就不用再设置其他属性的占位符了
- v-for = "item in itmes" 这个表达式里面, item是随便起的名字, 相当于给items这个集合属性的子元素起个代号
- 对于select元素, 可以直接用v-model绑定用户选中的option的值, 里面的option通常应该用v-for绑定一个集合属性(可选项和被选项通常不会在同一个业务对象里, 我这里的做法是给业务对象一个临时属性来存可选项, 提交的时候再把这个属性去了, 还没摸索出最佳实践)
- 数据对象如果一开始是空的, 那么代码里添加的属性是不能动态绑定的, 需要用Vue.set来设置。当然更推荐初始化的时候就添加一个空属性。这段描述官方文档里有, 只是藏得有点深:http://vuejs.org.cn/guide/reactivity.html