Vue.js新手入门
首页 > Vue.js新手入门 > 第一个Hello Vue代码详解

第一个Hello Vue代码详解

2021-03-23 22:29:16 6 0

编辑 收藏

1.将vue.js文件引入到当前页面

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
只要将vue.js文件引入页面,在当前环境就会多出一个全局变量:Vue

2.通过全局构造函数:Vue ,实例化一个Vue应用程序接管的元素(包括所有的子元素)

<script type="text/Javascript">var app=new Vue({  el:'#app', //el:element 的简写 ,用来指定Vue应用程序接管的元素(包括所有的子元素)
  data:{ //data:data就是Vue实例应用程序中的数据成员
      message:'Hello Vue!'
  }
});</script>

3.代码执行流程解析

  • 1.浏览器从上到下依次进行解析

浏览器对于id=app 的div 内部的 {{message}}不认识,直接作为普通文本渲染到网页上

  • 2.浏览器继续往后解析执行

发现有一个js外链脚本,发起请求进行下载
当当前页面环境拿到js脚本之后,vue.js就会执行,执行结束,就向全局暴露出了一个对象:Vue

  • 3.当解析执行到咱们自己的Script的时候,开始解析执行咱们自己的代码

通过 el 属性 指定 Vue程序 的接管范围
通过 data 向Vue 实例的应用程序中初始化了一个 message 成员
Vue 程序通过 el 属性指定id为 #app 的div
开始解析执行 Vue 能识别的语法
{{message}} 在Vue 中被称为双花括号插值表达式
在双括号插值表达式中可以使用 当前元素 所属Vue程序 接管范围的data中的数据


取消回复欢迎 发表评论: