Vue.js简介
2019-06-23 本文已影响0人
onlyJoy
Vue.js
-
Vue.js是目前最火的一个框架，React是最流行的一个框架（React除了开发网页，也可以开发手机app） -
Vue.js是前段最火的主流框架之一，和Angular.js、React.js一起，并成为前端的主流框架 -
Vue.js是一套构建用户界面的框架，不仅易于上手，还便于跟第三方库整合
框架和库的区别
- 框架：提高开发效率。是一套完整的解决方案；对项目的入侵性很大，项目如果需要更换框架，则需要重构整个项目
- 库：提供一个小功能，对项目的入侵性很小，如果某个库无法完成某些需求，可以容易的更换其他库来实现这些需求
MVC和MVVM
-
MVC是后端的分层开发概念
node为例：-
app.js：项目的入口文件
所有的请求先进入这里进行处理；注意：app.js并没有路由转发的功能，需要调用router.js模块进行路由分发处理 -
router.js：项目的路由文件
router.js：只负责分发路由，不负责具体业务逻辑的处理；如果涉及到了业务逻辑处理操作router.js就无能为力了，只能调用controller.js模块进行业务逻辑处理 -
controller.js：项目的业务处理层
controller.js：此模块中，封装了一些具体的业务逻辑处理的逻辑代码，但是，为了保证职能单一，不负责处理数据的CRUD，如果需要调用model层。router.js和controller.js合为后端开发的controller层 - Model层
职能单一，只负责操作数据库 - view层
用户访问的页面
-
-
MVVM是前段开发的分层思想，主要把每个页面分成M、V、VM，其中VM是MVVM思想的核心；因为VM是M和V之间的调度者
- M：是每个页面中单独的数据
- V：就是每个页面中的HTML结构
- VM：是个调度者，分割了M和V，每当V层想要获取保存数据的时候，都要由VM做中间的处理
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- 当导入包之后，在浏览器的内存中，就多了个Vue的构造函数 -->
</head>
<body>
<div id="app"> <!--vue实例所控制的元素区域，就是MVVM中的V -->
<p>
{{ msg }}
</p>
</div>
<script> // 创建VUE实例，
var vm = new Vue({ // 注意：此处new出来的vm对象就是MVVM中的vm调度者
el: '#app', //vue控制此处指定的元素的所有内容
data: { // data属性中存放的是el中要用到的数据
msg: 'chengjiawei' // 通过vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素
}
})
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
