初识Vue【1】
1.什么是Vue：
Vue (读音 /vjuː/，类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与[现代化的工具链]([https://v2.cn.vuejs.org/v2/guide/single-file-components.html)](https://v2.cn.vuejs.org/v2/guide/single-file-components.html))以及各种[支持类库]([https://github.com/vuejs/awesome-vue#libraries--plugins)](https://github.com/vuejs/awesome-vue#libraries--plugins))结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue教学网址：https://v2.cn.vuejs.org/v2/guide/
2.Vue的特点：
- 遵循MVVM模式：
- 体积小，运行效率高，本身只关注视图层，可以引入其他的第三方库
3.Vue的使用步骤：
1.实现步骤：
1.创建一个基础的HTML文档：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>
2.引入Vue环境：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</body>
</html>
注意看引入的Vue环境是需要在线引入的，因此我们可以进行离线引入，即访问Vue环境的网址，将Vue环境所需要的资源复制到我们自定义的js文件中，再在HTML文档中引入我们定义的js文件即可
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>//src属性的值即为vue环境资源所在的js文件路径<script src="vue/vue.js"></script>
</body>
</html>
Vue环境的部分源码如下：
3.准备一个容器：
<font style="color:rgba(0, 0, 0, 0.85);">Vue 应用需要一个根元素来进行挂载。通常会在 HTML 中创建一个 </font>`div`<font style="color:rgba(0, 0, 0, 0.85);"> 元素作为 Vue 应用的挂载点。</font>
然后在 JavaScript 中使用 new Vue({ el: '#app' }) 将 Vue 实例挂载到这个 div 上。这样 Vue 就可以管理这个 div 及其内部的 DOM 结构，实现数据驱动的视图更新。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- 准备容器-->
<div id="app"></div>//src属性的值即为vue环境资源所在的js文件路径<script src="vue/vue.js"></script>
</body>
</html>
注意：div容器应使用id选择器，因为div容器与Vue实例是一一对应的，如果使用类选择器或标签选择器就可能出现一个Vue实例对应到多个div容器的现象
4.创建Vue实例：
通过new关键字创建一个Vue实例，并给此实例添加两个属性，el属性表示此Vue实例绑定的div容器的id，data属性是一个对象，用于保存数据内容；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- 准备容器-->
<div id="app"></div>//src属性的值即为vue环境资源所在的js文件路径<script src="vue/vue.js"></script><script>// 创建vue实例let vm=new Vue({//'#'表示选择器el:"#app",data:{name:'张三'}});
</body>
</html>
5.在div容器中获取Vue实例中保存的数据：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- 准备容器-->
<div id="app"><h1>hello,{{name}}</h1>
</div>//src属性的值即为vue环境资源所在的js文件路径<script src="vue/vue.js"></script><script>// 创建vue实例let vm=new Vue({//'#'表示选择器el:"#app",data:{name:'张三'}});
</body>
</html>
2.总结：
-
1.引入Vue环境； -
2.准备容器，并添加id属性为此容器命名； -
3.创建Vue实例，并传入配置对象； -
4.app容器中的代码 需要符合HTML的规范 可以混入Vue语法（上面的插值表达式就属于Vue语法）； -
5.Vue实例与容器是一一对应的； -
6.一旦data中的变量 发生改变 那么页面也会改变；
3.说明：
还是以上面的代码为例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- 准备容器-->
<div id="app"><h1>hello,{{name}}</h1>
</div>//src属性的值即为vue环境资源所在的js文件路径<script src="vue/vue.js"></script><script>// 创建vue实例let vm=new Vue({//'#'表示选择器el:"#app",data:{name:'张三'}});
</body>
</html>
此时我们在浏览器的控制台上可以获取此时name变量的值
当我们此时改变name变量的值时，浏览器页面上也会相应改变
有个问题需要注意一下，就是我们在代码中name变量是Vue实例中data属性的子属性，而非Vue实例vm的属性，那为什么我们可以直接通过vm.name获取或修改name属性的值呢。实际上它的底层是通过Object的defineproperty（）方法将data的属性复制到了vm中，并提供了get/set方法，才使得我们可以直接获取或修改name的值;