捕鱼游戏赢红包

書(shū)名： Vue.js 3.x從入門(mén)到精通（視頻教學(xué)版）
作者名：李小威
本章字?jǐn)?shù)： 740字
更新時(shí)間： 2023-07-17 19:58:54

2.4　第一個(gè)Vue.js程序

接下來(lái)讓我們動(dòng)手感受一下Vue.js，構(gòu)建一個(gè)“水果介紹”的簡(jiǎn)單頁(yè)面。和許多JavaScript應(yīng)用一樣，首先從網(wǎng)頁(yè)中需要展示的數(shù)據(jù)開(kāi)始。使用Vue的起步非常簡(jiǎn)單，安裝Vue庫(kù)，使用Vue.createApp創(chuàng)建一個(gè)應(yīng)用程序?qū)嵗ue在創(chuàng)建組件實(shí)例時(shí)會(huì)調(diào)用data()函數(shù)，該函數(shù)將返回?cái)?shù)據(jù)對(duì)象，最后通過(guò)mount()方法在指定的DOM元素上裝載應(yīng)用程序?qū)嵗母M件，從而實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。

【例2.1】　編寫(xiě)“水果介紹”頁(yè)面（源代碼\ch02\2.1.html）。

這里使用v-bind指令綁定IMG的src屬性，使用{{}}語(yǔ)法（插值語(yǔ)法）顯示標(biāo)題<h2>的內(nèi)容。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <div><img v-bind:src="url" width="450"></div>
            <h2>{{ explain }}</h2>
        </div>
        <!--引入Vue文件-->
        <script src="https://unpkg.com/vue@next"></script>
        <script>
        //創(chuàng)建一個(gè)應(yīng)用程序?qū)嵗?
        const vm= Vue.createApp({
        //該函數(shù)返回?cái)?shù)據(jù)對(duì)象
        data(){
           return{
               url:'1.jpg',
               explain:'蘋(píng)果是薔薇科蘋(píng)果亞科蘋(píng)果屬植物，其營(yíng)養(yǎng)價(jià)值很高。',
           }
        }
        //在指定的DOM元素上裝載應(yīng)用程序?qū)嵗母M件
        }).mount('#app');
        </script>
    </body>
    </html>

程序運(yùn)行效果如圖2-23所示。

圖2-23　“水果介紹”頁(yè)面效果

至此，就成功創(chuàng)建了第一個(gè)Vue應(yīng)用，這看起來(lái)跟渲染一個(gè)字符串模板非常類(lèi)似，但是Vue在背后做了大量工作。可以通過(guò)瀏覽器的JavaScript控制臺(tái)來(lái)驗(yàn)證，也可以使用vue-devtools調(diào)試工具來(lái)驗(yàn)證。

例如，在瀏覽器上按F12鍵，打開(kāi)控制臺(tái)并切換到Console選項(xiàng)，修改vm.explain="我最?lèi)?ài)吃的就是蘋(píng)果！"，按回車(chē)鍵后，可以發(fā)現(xiàn)頁(yè)面的內(nèi)容也發(fā)生了改變，效果如圖2-24所示。

圖2-24　在控制臺(tái)上修改后的效果

使用vue-devtools工具調(diào)試，打開(kāi)瀏覽器的控制臺(tái)，選擇Vue選項(xiàng)，單擊左側(cè)的<Root>，同樣修改vm.explain="蘋(píng)果中營(yíng)養(yǎng)成分可溶性大，容易被人體吸收！"，單擊“保存”按鈕，可以發(fā)現(xiàn)頁(yè)面的內(nèi)容同樣也發(fā)生了改變，效果如圖2-25所示。

圖2-25　vue-devtools調(diào)試效果

出現(xiàn)上面這樣的效果，是因?yàn)閂ue是響應(yīng)式的。也就是說(shuō)當(dāng)數(shù)據(jù)變更時(shí)，Vue會(huì)自動(dòng)更新所有網(wǎng)頁(yè)中用到它的地方。除了小程序中使用的字符串類(lèi)型外，Vue對(duì)其他類(lèi)型的數(shù)據(jù)也是響應(yīng)的。

特別說(shuō)明：在之后的章節(jié)中，示例不再提供完整的代碼，而是根據(jù)上下文，將HTML部分與JavaScript部分單獨(dú)展示，省略了<head>、<body>等標(biāo)簽以及Vue.js的加載等，讀者可根據(jù)上面示例的代碼結(jié)構(gòu)來(lái)組織代碼。

官术网_书友最值得收藏!

Vue.js 3.x從入門(mén)到精通（視頻教學(xué)版）

2.4 第一個(gè)Vue.js程序

2.4　第一個(gè)Vue.js程序