带你认识vue

70 阅读2分钟

一 什么是vue

是一套用于构建用户界面的渐进式框架

Vue在构建用户界面时,能够

  • 编写结构:vue提供指令、数据驱动视图构建页面的结构
  • 美化样式:基础css样式即可美化
  • 处理交互:基于vue提供的事件绑定,可轻松处理用户和界面之间的交互行为

二 Vue的特点和优势

vue两大特点:响应式编程、组件化。

vue的优势:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。 vue是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和dom,这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间

** 响应式的数据绑定**

这里的响应式不是@media 媒体查询中的响应式布局,而是指vue.js会自动对页面中某些数据的变化做出响应。

这也就是vue.js最大的优点,通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,有更多的时间去思考业务逻辑。

image.png

image.png

组件化开发

Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。

组件化开发的优点:提高开发效率、方便重复使用、简化调试步骤、提升整个项目的可维护性、便于协同开发。

20181217105707577.png

组件化的优点

  • 提高开发效率
  • 方便重复使用
  • 简化调试步骤
  • 提升整个项目的可维护性
  • 便于协同开发

三、Vue中的性能优化

  • v-for不与v-if同层使用,因为v-for的优先级大于v-if
  • 使用 keep-alive缓存组件,避免组件反复的创建与销毁
  • 设置key,提高对比新旧dom树中节点时的效率
  • 使用v-if时默认不显示
  • 切换频率高时用,用v-show代替v-if ;切换频率低时,用v-if代替v-show
  • 无需自动响应的数据不放入data中。因为在data中的数据都会被监听,浪费内存。

四、vue常用的钩子函数

beforeCreate

这个时候,this变量还不能使用

image.png

computed

是把所有需要需要依赖其他值计算的值写成对象的key值

image.png

watch

把监听的值写成对象的key值

image.png

methods

可以在methods属性里给vue定义方法

image.png