1.什么是Vue
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。采用MVVM模式。
2.MVVM模式
MVVM模式采用MVC模式
3.MVC模式(前后端均有此模式)
- M->model->模式->数据(js变量)
- V->View->视图->用户所见界面(HTML,css)
- C->control->控制器->事件交互->通过DOM对象绑定事件,将变量进行修改
4.关于框架
(1)提高开发效率的发展历程
原生js->Jquery之类的类库->前端模板引擎->Vue.js/Angular.js/React.js
(能够帮助我们减少不必要的DOM操作;提高渲染效率,双向数据绑定的概念)
(2)在Vue中,核心概念:数据驱动,避免手动操作DOM操作
(3)框架是一套完整的解决方案,对项目入侵比较大,如果项目需要换框架,则需要重新编码前端的各种框架
5.前端的各种框架
(1)Vue和react的相同点:
- 利用虚拟DOM实现快速渲染
- 轻重级
- 响应式组件
- 支持服务器端渲染
- 易于集成路由工具,打包工具以及状态管理工具
- Vue在国内受欢迎,react在国外受欢迎,适合大型网站。
(2)什么是虚拟DOM
创建类似DOM的对象,去拼接对象,拼接完整后,把数据整体解析,一次性插入到HTML中,其中Vue1.0没有虚拟DOM。
6.如何搭建简单的Vue框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript">
</script>
</head>
<body>
<!--vue-->
<div id="one">
{{ title }}
</div>
<script type="text/javascript">
let one=new Vue({
el:"#one",
//model
data:{
title:"hello vue!"
}
})
</script>
</body>
</html>