vue项目开发总结

从2017年8月30到10月30号,项目开发总结.

1.注意组件的命名,当别人看到组件名称时就能明白这组件的功能.(增加代码的可读性,有利于后期的维护)

2.使用统一的模板.

1)统一使用iview模板,不能将iview模板和vue混合使用.例如:使用iview的<Input></Input>里面属性,不要用使用vue里面<input></input>的属性

2)每个组件里面不能重写iview样式.若是重写样式的话,页面与页面之间的跳转,会改变页面的样式.同时,一个页面之内会有很多样式,这样不利于前台页面的调试

3)组件内,自定义的样式,要注意命名规范.引用其他页面的时,要修改class的名称.或者将统一的样式放到css文件中.

3.将静态数据统一放到js文件,然后引入到vue组件之中,这样有利于后期维护.

例如:

js文件:

letbasetypes=[{key:'主运行基地',value:'主运行基地'},{key:'辅运行基地',value:'辅运行基地'},{key:'转场基地',value:'转场基地'}]

	export default {
   		 citys,
   		 basetypes
	}

	vue组件:

	import flybasedata from '../../../data/flybase/index';//引入js
	baseTypes:flybasedata.basetypes//将js中定义的对象的值赋值给vue中属性赋值）。


4.后台传出入vue文件的json数据赋值.使用this.$set(对象,对象中的属性名称,保存到属性中的值).
如果使用"="赋值,可能会将get/set方法覆盖掉.
例如:在vue组件中定义,Objecta:{a1:'',a2:''},json数据返回的对象是jsonobeject:{a1:'1'},使用
Objecta=jsonobeject时,a2的get/set将会被覆盖掉.查看get/set方法可以在console.log()中看到.
出现的问题主要在数据绑定(数组,复选框,每次只能选中一个值,若是选中多个值时,点击其他的控件,所选的值只保留最后选的值)的时候出现.
5.select,radio值的绑定,获取到时,且无法绑定到Model,可能出的问题是获取到的属性值的类型和定义的Model值的类型不一致.
6.日期格式,iview控件传到后台的类型date类型,保存到数据时,要使用sql.date类型.这样可以解决保存到数据库的日期比输入的日期格式少一天问题.(解决方法还有其他)

7.watch监听，要选择性使用，可以使用ref的地方使用ref调用子组建方法
vue使用参考：https://www.iviewui.com/docs/guide/install
		http://cn.vuejs.org/
第一次写博客，不妥之处，还请见谅。欢迎赐教