快捷導(dǎo)航

VS編譯器中引用Vue3框架的實(shí)現(xiàn)步驟

更新時(shí)間：2024年12月30日 09:42:24 作者：破曉*

本文主要介紹了VS編譯器中引用Vue3框架的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

Vue是漸進(jìn)式JavaScript前端框架，用于構(gòu)建交互的用戶界面。簡單理解就是用來做網(wǎng)頁的框架，它基于標(biāo)準(zhǔn)HTML，CSS和JavaScript構(gòu)建，提供了一套聲明式的，組件化的編程模型，能夠幫助我們高效地開發(fā)用戶界面。

目前已經(jīng)更新到了Vue3代，Vue相對(duì)于React和Angular來說，Vue上手簡單（易用）；漸進(jìn)式技術(shù)，能夠開發(fā)任何規(guī)模的Web應(yīng)用程序（靈活）；Vue采用了虛擬DOM，雙向數(shù)據(jù)綁定等技術(shù)，運(yùn)行速度快（性能）。

那么如何下載安裝Vue呢？

從官網(wǎng)訪問https://vue3js.cn/,訪問中文文檔，點(diǎn)開快速上手，查看如何安裝

這里將Vue.js添加到項(xiàng)目中有三種主要方式，我們選用第一種

這里的script標(biāo)簽引入了一個(gè)文件，我們復(fù)制文件在瀏覽器中打開，此時(shí)我們看到的頁面代碼就是Vue3的核心代碼

在桌面新建文件夾命名vue3，然后用VS編譯器打開vue3文件，將上述復(fù)制的vue核心代碼粘貼到新建的vue3文件（vue3 - lib - vue.js）中，我們就可以寫任何一個(gè)HTML文件然后去引入lib里的vue.js文件

安裝完Vue3文件，我們來進(jìn)行測(cè)試，使用Vue編寫一個(gè)html文件，使用瀏覽器打開之后，在頁面上呈現(xiàn)Hello Vue3的字樣

第一步：在頁面中引入vue框架的核心文件

第二步：創(chuàng)建一個(gè)div標(biāo)簽，該標(biāo)簽要被Vue控制（掛載點(diǎn)）

第三步：使用Vue對(duì)象調(diào)用createApp方法來創(chuàng)建Vue應(yīng)用實(shí)例，再調(diào)用mount方法將應(yīng)用掛載到頁面上（div標(biāo)簽中）

    <!--第一步：引入vue的核心文件-->
    <script src="./lib/vue.js"></script>
</head>
<body>
    <!--第二步：在body中設(shè)置一個(gè)標(biāo)簽，vue會(huì)控制該標(biāo)簽-->
    <div id="app">       <!--也可以使用類選擇器 div class="app"-->
        {{msg}}
    </div>
    
    <script>
       Vue.createApp({
        data(){
         return{
            msg:'Hello Vue3'
         }   
        }
       }).mount('#app')   <!--也可以使用類選擇器 .mount('.app')-->
    </script>
</body>
</html>

其中mount('#app')里的代碼對(duì)應(yīng)div里的id="app"，它是一個(gè)id選擇器，我們也可以換為類選擇器或者標(biāo)簽選擇器，將id改為class，mount里的#號(hào)改為.

另外方法內(nèi)部

這個(gè)方法是用來配置數(shù)據(jù)，方法內(nèi)部必須用return來返回一個(gè)對(duì)象，對(duì)象里面的內(nèi)容就是返回的數(shù)據(jù)，msg就是返回的數(shù)據(jù)，也可以寫入多個(gè)數(shù)據(jù)

其中的{{msg}}：差值表達(dá)式，主要是將數(shù)據(jù)插入到頁面中，插值表達(dá)式也支持基本的計(jì)算操作，例如將下面price的值乘以0.8得到結(jié)果：

<body>
    <!--第二步：在body中設(shè)置一個(gè)標(biāo)簽，vue會(huì)控制該標(biāo)簽-->
    <div id="app">
      <!--toFixed（1）保留計(jì)算結(jié)果小數(shù)點(diǎn)后一位-->
        {{msg}} - {{title}} - ${{(price*0.8).toFixed(1)}}
    </div>
    <script>
       Vue.createApp({
        data(){
         return{
            msg:'Hello Vue3',
            title:"Java程序設(shè)計(jì)",
            price:178
         }   
        }
       }).mount('#app')
    </script>
</body>