第一个Vue.js程序

[TOC] ---- ## 第一个Vue.js程序 ### 安装 我们可以在 Vue.js 的[官网](http://cn.vuejs.org/)上直接下载 vue.min.js 并用 ` ~~~ >[success] 预览：https://ityanxi.github.io/Vue-tutorial/chapter01/01hellovue.html 页面输出：  ### 第一个Hello Vue代码详解 >[info] 1.将vue.js文件引入到当前页面 ~~~ ~~~ 只要将vue.js文件引入页面，在当前环境就会多出一个全局变量：Vue >[info] 2.通过全局构造函数：Vue ，实例化一个Vue应用程序接管的元素（包括所有的子元素） ~~~ ~~~ >[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中的数据