快捷導(dǎo)航

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

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

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

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

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

那么如何下載安裝Vue呢？

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

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

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

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

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

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

第二步：創(chuàng)建一個div標簽，該標簽要被Vue控制（掛載點）

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

    <!--第一步：引入vue的核心文件-->
    <script src="./lib/vue.js"></script>
</head>
<body>
    <!--第二步：在body中設(shè)置一個標簽，vue會控制該標簽-->
    <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')里的代碼對應(yīng)div里的id="app"，它是一個id選擇器，我們也可以換為類選擇器或者標簽選擇器，將id改為class，mount里的#號改為.

另外方法內(nèi)部

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

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

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