第一个Vue.js程序 · Vue从入门到实战

[TOC] ---- ## 第一个Vue.js程序 ### 安装我们可以在 Vue.js 的[官网](http://cn.vuejs.org/)上直接下载 vue.min.js 并用 `<script>` 标签引入。Vue 会被注册为一个全局变量。 >[danger] 重要提示：在开发时请用开发版本，遇到常见错误它会给出友好的警告。 [下载Vue.js生产版本](https://vuejs.org/js/vue.min.js) [下载Vue.js开发版本](https://vuejs.org/js/vue.js) ### 代码示例 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>it研习社-第一个Hello Vue程序</title> </head> <body> <div id="app"> {{message}} </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:'Hello Vue!' } }); </script> </body> </html> ~~~ >[success] 预览：https://ityanxi.github.io/Vue-tutorial/chapter01/01hellovue.html 页面输出： ![](https://box.kancloud.cn/45b3c46335c858e0b07fe342f0719ced_115x35.png) ### 第一个Hello Vue代码详解 >[info] 1.将vue.js文件引入到当前页面 ~~~ <script src="vue.js" type="text/javascript" charset="utf-8"></script> ~~~ 只要将vue.js文件引入页面，在当前环境就会多出一个全局变量：Vue >[info] 2.通过全局构造函数：Vue ，实例化一个Vue应用程序接管的元素（包括所有的子元素） ~~~ <script type="text/javascript"> var app=new Vue({ el:'#app', //el:element 的简写，用来指定Vue应用程序接管的元素（包括所有的子元素） data:{ //data:data就是Vue实例应用程序中的数据成员 message:'Hello Vue!' } }); </script> ~~~ >[info]3.代码执行流程解析 * 1.浏览器从上到下依次进行解析浏览器对于id=app 的div 内部的 {{message}}不认识，直接作为普通文本渲染到网页上 * 2.浏览器继续往后解析执行发现有一个js外链脚本，发起请求进行下载当当前页面环境拿到js脚本之后，vue.js就会执行，执行结束，就向全局暴露出了一个对象：Vue * 3.当解析执行到咱们自己的Script的时候，开始解析执行咱们自己的代码 - 3.1 创建Vue实例通过 el 属性指定 Vue程序的接管范围通过 data 向Vue 实例的应用程序中初始化了一个 message 成员 - 3.2 接下来 Vue 程序通过 el 属性指定id为 #app 的div 开始解析执行 Vue 能识别的语法 {{message}} 在Vue 中被称为双花括号插值表达式在双括号插值表达式中可以使用当前元素所属Vue程序接管范围的data中的数据