vue的基础认识

204 阅读2分钟

1.Vue是一个渐进式的框架,什么是渐进式的呢?

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。 或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。 比如Core+Vue-router+Vuex,也可以满足你各种各样的需求。

2.Vue有很多特点和Web开发中常见的高级功能

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM

3 .Vue中的MVVM

什么是MVVM呢?
通常我们学习一个概念,最好的方式是去看维基百科(对,千万别看成了百度百科) zh.wikipedia.org/wiki/MVVM 维基百科的官方解释,我们这里不再赘述。 我们直接来看Vue的MVVM


View层: 视图层 在我们前端开发中,通常就是DOM层。 主要的作用是给用户展示各种信息。
Model层: 数据层 数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。 在我们计数器的案例中,就是后面抽取出来的obj,当然,里面的数据可能没有这么简单。
VueModel层: 视图模型层 视图模型层是View和Model沟通的桥梁。 一方面它实现了Data Binding,也就是数据绑定,将Model的改变实时的反应到View中 另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data。

4.计数器的MVVM

计数器的MVVM
我们的计数器中就有严格的MVVM思想 View依然是我们的DOM Model就是我们我们抽离出来的obj ViewModel就是我们创建的Vue对象实例
它们之间如何工作呢?
首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。 其次ViewModel通过DOM Listener来监听DOM事件,并且通过methods中的操作,来改变obj中的数据。
有了Vue帮助我们完成VueModel层的任务,在后续的开发,我们就可以专注于数据的处理,以及DOM的编写工作了

5.创建Vue实例传入的options

你会发现,我们在创建Vue实例的时候,传入了一个对象options。
这个options中可以包含哪些选项呢?
详细解析: cn.vuejs.org/v2/api/#选项-…
目前掌握这些选项:
el:
类型:string | HTMLElement
作用:决定之后Vue实例会管理哪一个DOM。
data:
类型:Object | Function (组件当中data必须是一个函数)
作用:Vue实例对应的数据对象。
methods:
类型:{ [key: string]: Function }
作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。

6.Vue的生命周期