Vue第一部分(1)：Vue简介以及第一个示例

Vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的JavaScript框架。封装了原生的DOM操作，无需进行任何手动的DOM编码即可完成页面数据的渲染。

MVVM模式

前端页面开发需要解决的核心问题是：数据（模型）和页面（视图）的绑定问题。如何将数据展示到页面中，以及当页面的数据发生变化时，如何同步变化到数据？

传统的DOM操作：

手动编码将Model中的数据绑定到View上； //dom对象.属性=数据

当View的发生变化时，也需要手动编码获取变化。//数据 = dom对象.属性

存在着如下的问题：

开发者需要手动编码DOM操作，开发繁琐

当Model频繁发生变化时，开发者需要手动编码更新到View中；当View发生变化时，也需要同步到Model中。这样不仅开发繁琐，而且很难维护复杂多变的数据状态。

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是通过ViewModel 把Model和View关联起来。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model，即所谓的数据双向绑定。

MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响，把开发者从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 框架，使得我们无需关注底层DOM操作，专注于业务数据操作，提高页面开发效率。

第1个Vue示例

1. 新建页面，并引入 vue.js

<script src="js/vue-2.6.12.js"></script>

2. 定义一个视图标签

<body><div id="app"></div> </body>

3. 创建一个Vue实例（ViewModel）

<body>
<!--{{}}插值表达式，可以将vm对象的数据插入到视图中 --><div id="app"><h1>{{msg}}</h1></div>
<script>
const vm = new Vue({
el:"#app",//通过选择器，选则要挂载的标签data:{//数据
msg:"hello "
}
})
</script>
</body>

总结：

1. 页面要有一个用于挂载数据的标签

2. 创建Vue实例（ViewModel对象）

1. el：通过选择器选择标签

2. data：定义可以渲染到视图的数据 Vue框架要解决的核心问题

Vue作为构建页面的JavaScript框架，简化了页面操作的方式，但其和原生JS在操作页面时要解决的问题是相同的。原生JS操作页面需要解决的问题，也必是Vue需要解决的，而学习Vue其实就是在学习它对这些问题的解决方法。操作页面需要解决的问题：

渲染数据到页面
为标签属性赋值
事件绑定

当然Vue在解决这些基本问题的同时，也提供了更多的功能，简化开发。

注：第一部分的全部内容整合成pdf文档，可以进行下载保存

https://download.csdn.net/download/technologist_28/21114047