一、vue.js简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二、DOM简介
DOM全称 Document Object Model，即文档对象模型，它允许脚本(js)控制Web页面、窗口和文档。
DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
可以把DOM理解为结构，骨架
三、MVVN简介
MVVN是一种软件架构模式，是MVC的改进版，MVVM将其中View的状态和行为抽象化，让我们将视图的UI和业务上的逻辑进行分开。
简单来说，MVVM是Model-View-ViewModel的简写。即是模型-视图-视图模型。
- model 模型：指的是后端传过来的数据。
- view 视图：指的是所有看到的页面，可以理解为将数据以某种方式呈现给用户。
- ViewModel：指的是视图模型，他是连接view和model的桥梁。
MVVM就是将MVC的View的状态和行为抽象化，让我们的视图UI和业务逻辑进行分离。
在MVVM架构下，View和Model没有直接的联系，而是通过ViewModel进行数据交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，Model数据的变化也会立即反应到View上面。
ViewModel通过双向数据绑定把View和Model层连接起来，而View和Model之间的同步工作是完全自动的，不需要进行人为的干涉，因此开发者只需要关注业务逻辑，不需要手动操作Dom，不需要关注数据状态的同步问题，复杂的数据状态的维护完全由MVVM来进行管理。
四、第一个Vue程序
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--使用CDN方式引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--创建了一个id为App的div标签-->
<div id="app">
<!--是用来输出Vue对象中的message值。如果message内容改变，这里输出也会改变。-->
{{message}}
</div>
<script>
/*在script标签内，创建了Vue实例对象，该对象中有两个属性：el和data。el属性的作用是将Vue实例绑定到id为App的DOM中，data用于数据的存储*/
var app=new Vue({
el:'#app',
data:{
message:'Hello world'
}
})
</script>
</body>
</html>
打开Fn键，并按下F12进入谷歌浏览器的调试窗口
可以通过控制台输入app.message=‘Hello’ 改变message的值
308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
