Vue相关知识点
1.Vue.js是目前最流行的前端mvvm框架。
2.Vue.js是一套构建用户界面的渐进式的自底向上增量开发MVVM框架,Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
3. 对于Vue是一套渐进式框架的理解
可以在原有大系统的上面,把一两个组件改用vue实现,也可以整个用vue全家桶开发不会做职责之外的事。
4. 对于Vue自底向上增量开发的设计的理解
先写一个基础的页面,把基础的东西写好,再逐一去添加功能和效果,由简单到繁琐的这么一个过程。
5.vue.js的目的:
Vue.js的产生核心是为了解决如下三个问题
a.解决数据绑定问题。
b.Vue.js主要的目的是为了开发大型单页面应用。(Angular.js对PC端支持比较好,但对移动端支持就一般,而Vue.js主要是支持移动端,同时也支持PC端。)
c.支持组件化,也就是可以把页面封装成为若干个组件,把组件进行拼装,这样是让页面的复用性达到最高。
6.vue.js的核心思想包括:数据驱动和组件化。
7.vue.js的优势:
- 简洁:HTML 模板 + Vue 实例 + JSON 数据
- 轻量:17kb,性能好
- 设计思想:视图与数据分离,无需操作DOM
- 社区:大量的中文资料和开源案例
8.框架:
封装与业务无关的重复代码,形成框架。
9.框架的优势:
使用框架提升开发效率(虽然使用框架要遵循框架的语法但是使用框架可以大大提高对于业务逻辑的操作)
10.mvc框架:
MVC - 表示软件可分成三部分
-
- 模型(Model)
- 视图(View)
- 控制器(Controller)
11.为什么要使用mvc:
-
- MVC 是一种专注业务逻辑,而非显示的设计思想
- MVC 中没有DOM操作
- 将数据独立出来,方便管理
- 业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。
12. MVC更关注业务数据,不关注页面实现的表象(独立数据,不用操作DOM)
13. MVVM分为三个部分:
- 分别是M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也可以看作为控制器MVC的C层)
- M:模型层,主要负责业务数据相关;
- V:视图层,顾名思义,负责视图相关,细分下来就是html+css层;
- VM:V与M沟通的桥梁,负责监听M或者V的修改,是实现MVVM双向绑定的要点;因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
14.MVVM思想关系图:
15.MVP思想:
- MVP的全称为Model-View-Presenter,Model提供数据,View负责显示,Presenter负责逻辑的处理
- MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter来进行的.而在MVC中View会直接从Model中读取数据而不是通过Controller。
16.MVC与MVVM对比:
- MVC 思想:一种将数据层与视图层进行分离的设计思想
- MVVM思想:意思就是当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改,反之相同
17.vue.js起步:
- 了解 Vue.js 模板的组成
- 编写第一个 Vue.js 程序 – – ‘hello,Vue.js’
- 实现原理
套用 MVC思想,逐步创建出控制器,视图和数据
第一步 创建 View 视图
应用程序的界面将显示在这里
第二步 创建 Controller 控制器
控制器也就是 Vue.js 的实例
第三步 创建 Model 数据
data 为 Vue.js 实例的固定属性,存储数据
第四步 使用数据
-
- 将 data 中变量 message 放在 #app内的双花括号内
- 修改 data 中的 message,会同步显示在页面中
模板组成:一片 html 代码 + 数据 + 控制器
18.声明式渲染与数据驱动:
Vue数据驱动:
通过控制数据的变化来显示:vue的数据驱动是视图的内容随着数据的改变而改变
19.vue渲染方式:
-
{{}}--表达式
- 将双大括号中的数据替换成对应属性值进行响应式的展示,避免在双括号中使用复杂表达式,使用双大括号来包裹 js 代码构成表达式
20. 模板语法基本用法
模板语法中可以写入哪些内容
-
- 数字
- 字符串
- 计算 mvc设计思想,是为了使页面和数据进行很好的分离;如果在表达式中写入过多的逻辑代码,那么违背了最初的设计思想;也就使代码看起来很复杂,难以维护
21.表达式中可以写入:json数据、数组
22. 如何区分插值中的内容是表达式还是普通文本?
Vue.js 会通过是否带引号区分两者