Vue.js程序执行分析

分析

<html>
    <head>        
        <title>第一个Hello Vue程序</title>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
        <script src="vue.js" type="text/javascript"></script>
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',       //el:element 的简写 ，用来指定Vue应用程序接管的元素（包括所有的子元素）
                data:{           //data:data就是Vue实例应用程序中的数据成员
                    message:'Hello Vue!'
                }
            });
        </script>
    </body>
</html>
执行情况：
　①浏览器从上到下一次解析，首先遇到id='app'的div,因为浏览器不认识{{message}}，所以会将此内容作为文本显示在网页上。
　②浏览器继续向下解析，遇到script src='vue.js'，这是一个外链脚本，所以发起请求，进行下载，当前环境拿到js脚本后，vue.js就会执行，执行结束，会向
全局暴露一个对象:Vue。
  ③当浏览器解析到第2个script时，首先通过new Vue，实例化一个Vue的对象，并赋值给app。
　　I、该对象有2个属性，第1个属性为el，执行Vue程序的接管范围。
　　II、第2个属性为data，data属性也是一个对象，对象的内容是一个名称为message的成员，message的值为‘Hello Vue！’。
　④接下来，程序通过el属性，会接管id为app的div(或者说，会将此实例挂载到id为app的Dom元素上)。此时，浏览器可以解析{{message}}了(插值表达式)，即用data数据成员中message的值，替换{{}}中的内容。

官网对el的解释：提供一个页面上已经存在的Dom元素，作为Vue实例挂载的目标。可以是css选择器，也可以是htmlElement实例。
　　

 

 

 
posted @ 2020-04-17 14:02  茶沐书香  阅读(225)  评论(0)  编辑  收藏  举报
Bottom