初识vue

为什么学习vue？

vue是前端三大框架中使用最简单的，国内有不少公司会选用vue，用来快速构建单页面应用。框架的使用可以提高开发效率，提高程序性能。

还有React，和Angular这两个是需要一定学习成本的，开发大项目首选React。

框架和库：

框架：提高一整套解决方案，对于项目的侵入性非常大，如果项目要切换框架，往往要重构整个项目。

库：类似一个小插件，对项目的侵入性小，如果某个库无法满足用户的需求，用户可以很容易的切换到其他库来实现

MVC和MVVM：

vue是一个MVVM的框架。

MVC：

M => Model(数据模型)
V => View(视图模型,负责将数据模型转化成UI展现出来，就是那些DOM结构)
C=> Control(业务逻辑)

 

 

缺点：M和V层直接交互，M和V之间代码耦合度高。所有的逻辑都在C层，代码量大。

MVVM：

M => Model(数据模型)
V => View(视图模型,负责将数据模型转化成UI展现出来，就是那些DOM结构)
VM => ViewModel(一个同步View和Model的对象)

 

 

MVVM 模式采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。angular 和vue都采用这种模式。

vue初体验：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1. 引入vue文件 -->
<script src="./vue2.js"></script>
</head>
<body>
<!-- 如果超过vue实例的管辖范围，这个{{}}作用就会失效 -->
<div>{{msg}}</div>
<div id="app">
<!-- 5. 展示数据：通过插值表达式{{}} ，作用是专门用来渲染文本-->
<h1>{{msg}}</h1>
</div>
<script>
// 2. 创建vue实例，作用：他会监管我们的html代码
var vm = new Vue({
// 3. 通过一个el属性来指定vue实例的监管范围,后面跟一个id
el: '#app',
// 4. 用data属性将要展示的变量存起来,data后面跟一个对象
data: {
msg: 'hello world'
}
})
</script>
</body>
</html>
posted @ 2020-03-09 08:57  木一橙  阅读(162)  评论(0)    收藏  举报