vue简介
vue是MVVM架构的实现者。MVVM是源自于MVC模式的。
-
MVVM模式
- Model:模型层,在这里表示JavaScript 对象
- View:视图层,在这里表示DOM (HTML操作的元素)
-
ViewModel:
- 是连接视图(view)和数据(model存放数据)的中间件。是MVVM模式的核心。
- 转换model中的数据,使之变得更加容易管理
- 向上与视图层进行双向的数据绑定,简称双向绑定
- 向下与模型层通过接口请求(如ajax)进行数据交互(json)
Vue.js就是MVVM中的ViewModel层的实现者
在MVVM架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个 Observer观察者。
ViewModel能够观察到数据的变化,并对视图对应的内容进行更新.
ViewModel 能够监听到视图的变化,并能够通知数据发生改进
至此,我们就明白了,Vue.js就是一个 MVVM的实现者,他的核心就是实现了DOM监听与数据绑定。
为什么要使用Vue.js
- 轻量级,体现在Vue.js压缩后有只有20多kb (Angular压缩后56kb+,React压缩后44kb+)
- 移动优先。更适合移动端,比如移动端的Touch 事件
- 吸取了Angular(模块化)和React(虚拟DOM)的长处,并拥有自己独特的功能,如:计算属性。
第一个Vue程序
1.安装vue插件
2.导入vue的cdn
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
3.第一个程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view-->
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*vm:viewModel*/
var vm = new Vue({
el: "#app",
/*model*/
data: {
message: "hello,world!"
}
})
</script>
</body>
</html>
学到这的时候,我发现vm真的可以实现双向绑定:
这里正是体现了viewModel其中一个作用:
ViewModel能够观察到数据的变化,并对视图对应的内容进行更新.
体现了向上对视图层进行数据的双向绑定。
通俗的说,双向绑定就是指:前端视图的数据改变了,那么model层的data也会改变。反过来,model层的data改变了,前端视图的数据也会改变。并且这个过程是不需要刷新页面的。