## 一、本节说明 此节通过最简单的例子,来讲解如何安装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'`