网站欣赏与创建网页17. 整个网站建设中的关键是
一 vue的mvvm实践者
1.1 介绍
-
Model：模型层， 在这里表示JavaScript对象
-
View：视图层， 在这里表示DOM(HTML操作的元素)
-
ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者
在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model就是定义了一个Observer观察者
-
ViewModel能够观察到数据的变化， 并对视图对应的内容进行更新
-
ViewModel能够监听到视图的变化， 并能够通知数据发生改变
至此， 我们就明白了， Vue.js就是一个MV VM的实现者， 他的核心就是实现了DOM监听与数据绑定
1.2 vue模板的配置
1.文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets
2.使用：新建一个html文件，在文件中输入vue.html 则自动生成如下内容
二 vue的程序
2.1 第一个程序
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><div id="app"><!-- {{}} 插值表达式，绑定vue中的data数据 -->{{ message }}</div><script src="vue.min.js"></script><script>// 创建一个vue对象
new Vue({el: '#app',//绑定vue作用的范围data: {//定义页面中显示的模型数据message: 'Hello Vue!'}
})</script></body>
</html>效果：
