Vue.js 3.x高效前端开发（视频教学版）最新章节_李小威著

2.4　项目实训
——我的第一个Vue.js程序

Vue在创建组件实例时会调用data()函数，该函数将返回数据对象，最后通过mount()方法在指定的DOM元素上装载应用程序实例的根组件，从而实现数据的双向绑定。下面通过一个简单的图文页面来理解Vue.js程序。

【例2.1】编写简单的图文页面（源代码\ch02\2.1.html）。

这里使用了v-bind指令绑定IMG的src属性，使用{{}}语法（插值语法）显示标题<h2>的内容。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
    <div id="app">
        <div><img v-bind:src="url"></div>
        <h2>{{ explain }}</h2>
    </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        //创建一个应用程序实例
        const vm= Vue.createApp({
            //该函数返回数据对象
            data(){
              return{
                url:'1.jpg',
                explain:'敕勒川，阴山下。天似穹庐，笼盖四野。',
               }
            }
            //在指定的DOM元素上装载应用程序实例的根组件
         }).mount('#app');
    </script>
    </body>
    </html>

程序运行效果如图2-13所示。以上代码就成功创建了第一个Vue.js程序，看起来这跟渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。可以通过浏览器的JavaScript控制台来验证，也可以使用vue-devtools调试工具来验证。

图2-13　简单的图文页面效果

例如，在谷歌浏览器上按F12键，打开控制台，并切换到“Console”选项，修改vm.explain="天苍苍,野茫茫,风吹草低见牛羊。"，按回车键后，可以发现页面的内容也发生了改变，效果如图2-14所示。

图2-14　控制台上修改后效果

使用vue-devtools工具调试，打开谷歌浏览器的控制台，选择“Vue”选项，单击左侧的<Root>，修改图片的url为"2.jpg"，单击“保存”按钮，可以发现页面的内容同样也发生了改变，效果如图2-15所示。

图2-15　vue-devtools调试效果

出现上面这样的效果，是因为Vue是响应式的。也就是说当数据变更时，Vue会自动更新所有网页中用到它的地方。除了程序中使用的字符串类型，Vue对其他类型的数据也是响应式的。

特别说明：在之后的章节中，示例不再提供完整的代码，而是根据上下文，将HTML部分与JavaScript部分单独展示，省略了<head>、<body>等标签以及Vue.js的加载等，读者可根据上例结构来组织代码，或者直接查看本书配套的示例代码。

2.4 项目实训 ——我的第一个Vue.js程序

2.4　项目实训
——我的第一个Vue.js程序