Vue遵循SoC关注度分离原则
前端基础
结构层:HTML
表现层:CSS
–CSS预处理器:用一种专门的语言,进行Web样面设计,再通过编译器转化为正常的CSS
常用的:SASS(基于Ruby), LESS(这个是基于NodeJS,使用简单,一般用这个)
行为层:JS
Vue概念
Augular特点:将后台的MVC模式搬到前端并增加了模块化开发的理念(MVVM)(VM双向绑定相当于控制层)
React特点: 提出新概念虚拟DOM, 用于减少真实的DOM操作,在内存中模拟DOM操作,提升前端的渲染效率
Vue:渐进性JS框架,渐进性的意思是逐步学习ES6等的新特性。特点:综合了Augular和React的优点(计算属性是它的特色)
计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的DOM部分也会同步自动更新
v-model
v-model会忽略表单元素的value,checked,selected特性的初始值,将Vue实例的数据作为数据来源。
如果v-model表达式的初始值未能匹配任何选项,选择框元素将被渲染为’未选中’,在IOS中,用户不能选择第一个选项,不会触发change事件,推荐提供一个值为空的禁用选项
计算属性
计算属性的重点突出在属性两个字上,首先它是个属性,其次这个属性有计算能力。也就是说,它是一个能将计算结果缓存起来的属性(将行为转为静态的属性)
计算属性就是为了将不经常变化的计算结果进行缓存,节约系统的开销
例子:比如method计算当前时间戳的时候,控制台的值会变化
computed计算当前时间戳的时候,控制台的值不变,如果在计算的上面加一句其它操作(如值的变化),这样时间戳也就变了,相当于时间戳都是被缓存起来,有变化的时候才改变缓存的值