## 一、本节说明 此节通过最简单的例子，来讲解如何安装vue和使用vue完成第一个demo程序。 ## 二、 怎么做 ### 2.1 安装vue * 方式一：直接通过CDN引入 开发环境引入，最好有明确的版本号： ~~~ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> ~~~ 生产环境引入，最好有明确的版本号，和开发时候使用的一致 ~~~ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> ~~~ > 生产环境和开发环境引入的vue文件，最主要的区别在于：生产环境的js文件是在开发环境js文件的基础上进行了代码压缩、去掉空格、变量名简化等操作。从而减少了js文件的size，有利于提高网络传输速度。 * 方式二：下载到本地目录，然后使用`<script>`标签引入 开发环境下载地址: https://cn.vuejs.org/js/vue.js 生产环境下载地址: https://cn.vuejs.org/js/vue.min.js * 方式三：NPM安装 后面章节我们结合webpack和VUE-CLI管理前端项目，我们会使用这种方式。这里暂时不做介绍。 ### 2.2 实现第一个vue程序 在一个html页面`<body>`标签中写如下代码 ``` <div id="app"> <h2>你好啊，{{message}}</h2> </div> <!--从CDN引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script> const app = new Vue({ //初始化一个VUE实例 el: '#app', // 用于页面渲染VUE实例的元素 data: { // 定义数据 message: 'VUE' } }) </script> ``` + el: - 类型：string | HTMLElement - 作用：决定之后Vue实例会挂载渲染到哪一个DOM节点。 + data: - 类型：Object | Function （在组件当中data必须是一个函数，后续章节介绍） - 作用：Vue实例对应的数据对象，即MVVM中的Model。 ## 三、 效果 浏览器访问显示 ![](https://img.kancloud.cn/28/6f/286f88e09d1398e79b5001c7bf7d75b2_301x75.png) 我使用的chrome浏览器，按F12，输入`app.message = 'world'`,页面显示随之发生变化 ![](https://img.kancloud.cn/84/ab/84ab96fe4fafb88bc3bcb2edd0b8bdff_661x226.png) ## 四、 深入 * vue实现了数据绑定与响应式编程，在vue编程中非常重要的的一个思想就是，**通过操作数据来改变页面的显示内容、显示效果等，数据的变化影响页面展现；同时页面的输入值改变数据模型**，而不是去操作DOM节点元素，理解了这句话VUE学起来就简单了。 * 上文代码中`const app `是ES6的语法，表示定义一个常量，不允许对该常量进行二次赋值。但是常量对象的属性还是可以改的，如:`app.message = 'world'`