快捷導(dǎo)航

Vue基礎(chǔ)知識(shí)快速入門教程

更新時(shí)間：2023年05月04日 08:45:45 作者：link可

這篇文章主要介紹了Vue基礎(chǔ)知識(shí)快速入門教程,我們可以先學(xué)會(huì)用，使用一段時(shí)間之后，回頭來熟悉一下Vue框架以及它的特點(diǎn),需要的朋友可以參考下

一、Vue程序初體驗(yàn)

可以先不去了解Vue框架的發(fā)展歷史、Vue框架有什么特點(diǎn)、Vue是誰開發(fā)的，對(duì)我們編寫Vue程序起不到太大的作用，更何況現(xiàn)在說了一些特點(diǎn)之后，我們也沒有辦法徹底理解它，因此我們可以先學(xué)會(huì)用，使用一段時(shí)間之后，回頭來熟悉一下Vue框架以及它的特點(diǎn)。只需要知道Vue是一個(gè)基于JavaScript（JS）實(shí)現(xiàn)的框架。要使用它就需要先拿到Vue的js文件。

1.1 下載并安裝vue.js

第一步：打開Vue2官網(wǎng)，點(diǎn)擊下圖所示的“起步”：

第二步：繼續(xù)點(diǎn)擊下圖所示的“安裝”

第三步：在“安裝”頁面向下滾動(dòng)，直到看到下圖所示位置：

第四步：點(diǎn)擊開發(fā)版本，并下載，如下圖所示：

第五步：安裝Vue：

使用script標(biāo)簽引入vue.js文件。就像這樣：<script src=”xx/vue.js”></script>

1.2 第一個(gè)Vue程序

集成開發(fā)環(huán)境使用VSCode，沒有的可以安裝一個(gè)

第一個(gè)Vue程序如下：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>第一個(gè)Vue程序</title>  
    <!-- 安裝vue.js -->  
    <script src="../js/vue.js"></script>  
</head>  
<body>  
    <!-- 指定掛載位置 -->  
    <div id="app"></div>  
    <!-- vue程序 -->  
    <script>  
        // 第一步：創(chuàng)建Vue實(shí)例  
        const vm = new Vue({  
            template : '<h1>Hello Vue!</h1>'  
        })  
        // 第二步：將Vue實(shí)例掛載到指定位置  
        vm.$mount('#app')  
    </script>  
</body>  
</html>

運(yùn)行效果：

對(duì)第一個(gè)程序進(jìn)行解釋說明：

當(dāng)使用script引入vue.js之后，Vue會(huì)被注冊(cè)為一個(gè)全局變量。就像引入jQuery之后，jQuery也會(huì)被注冊(cè)為一個(gè)全局變量一樣。我們必須new一個(gè)Vue實(shí)例，因?yàn)橥ㄟ^源碼可以看到this的存在。

Vue的構(gòu)造方法參數(shù)是一個(gè)options配置對(duì)象。配置對(duì)象中有大量Vue預(yù)定義的配置。每一個(gè)配置項(xiàng)都是key:value結(jié)構(gòu)。一個(gè)key:value就是一個(gè)Vue的配置項(xiàng)。template配置項(xiàng)：value是一個(gè)模板字符串。在這里編寫符合Vue語法規(guī)則的代碼（Vue有一套自己規(guī)定的語法規(guī)則）。寫在這里的字符串會(huì)被Vue編譯器進(jìn)行編譯，將其轉(zhuǎn)換成瀏覽器能夠識(shí)別的HTML代碼。template稱之為模板。Vue實(shí)例的$mount方法：這個(gè)方法完成掛載動(dòng)作，將Vue實(shí)例掛載到指定位置。也就是說將Vue編譯后的HTML代碼渲染到頁面的指定位置。注意：指定位置的元素被替換。‘#app’的語法類似于CSS中的id選擇器語法。表示將Vue實(shí)例掛載到id=’app’的元素位置。當(dāng)然，如果編寫原生JS也是可以的：vm.$mount(document.getElementById(‘app’))‘#app’是id選擇器，也可以使用其它選擇器，例如類選擇器：’.app’。類選擇器可以匹配多個(gè)元素（位置），這個(gè)時(shí)候Vue只會(huì)選擇第一個(gè)位置進(jìn)行掛載（從上到下第一個(gè)）。

1.3 Vue的data配置項(xiàng)

觀察第一個(gè)Vue程序，你會(huì)發(fā)現(xiàn)要完成這種功能，我們完全沒有必要使用Vue，直接在body標(biāo)簽中編寫以下代碼即可：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>沒必要使用Vue呀</title>  
</head>  
<body>  
    <h1>Hello Vue!</h1>  
</body>  
</html>

在Vue中有一個(gè)data配置項(xiàng)，可以幫助動(dòng)態(tài)的渲染頁面代碼如下：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Vue選項(xiàng)data</title>  
    <!-- 安裝vue -->  
    <script src="../js/vue.js"></script>  
</head>  
<body>  
    <!-- 指定掛載位置 -->  
    <div id="app"></div>  
    <!-- vue代碼 -->  
    <script>  
        new Vue({  
            data : {  
                message : 'Hello Vue!'  
            },  
            template : '<h1>{{message}}</h1>'  
        }).$mount('#app')  
    </script>  
</body>  
</html>

運(yùn)行結(jié)果如下：

對(duì)以上程序進(jìn)行解釋說明：

1.data是Vue 實(shí)例的數(shù)據(jù)對(duì)象。并且這個(gè)對(duì)象必須是純粹的對(duì)象 (含有零個(gè)或多個(gè)的 key/value 對(duì))。

2.{{message}}是Vue框架自己搞的一個(gè)語法，叫做插值語法（或者叫做胡子語法），可以從data中根據(jù)key來獲取value，并且將value插入到對(duì)應(yīng)的位置。

3.data可以是以下幾種情況，但不限于這幾種情況：

data : {  
  name : '老杜',  
  age : 18  
}  
//取值：  
{{name}}  
{{age}}  
data : {  
  user : {  
    name : '老杜',  
    age : 18  
  }  
}  
//取值：  
{{user.name}}  
{{user.age}}  
data : {  
  colors : ['紅色', '黃色', '藍(lán)色']  
}  
//取值：  
{{colors[0]}}  
{{colors[1]}}  
{{colors[2]}}

4.以上程序執(zhí)行原理：Vue編譯器對(duì)template進(jìn)行編譯，遇到胡子{{}}時(shí)從data中取數(shù)據(jù)，然后將取到的數(shù)據(jù)插到對(duì)應(yīng)的位置。生成一段HTML代碼，最終將HTML渲染到掛載位置，呈現(xiàn)。

5.當(dāng)data發(fā)生改變時(shí)，template模板會(huì)被重新編譯，重新渲染。

1.4 Vue的template配置項(xiàng)

template只能有一個(gè)根元素。請(qǐng)看如下代碼：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Vue選項(xiàng)template</title>  
    <!-- 安裝vue -->  
    <script src="../js/vue.js"></script>  
</head>  
<body>  
    <!-- 指定掛載位置 -->  
    <div id="app"></div>  
    <!-- vue程序 -->  
    <script>  
        new Vue({  
            template : '<h1>{{message}}</h1><h1>{{name}}</h1>',  
            data : {  
                message : 'Hello Vue!',  
                name : '動(dòng)力節(jié)點(diǎn)老杜'  
            }  
        }).$mount('#app')  
    </script>  
</body>  
</html>

執(zhí)行結(jié)果

控制臺(tái)錯(cuò)誤信息：組件模板應(yīng)該只能包括一個(gè)根元素。所以如果使用template的話，根元素只能有一個(gè)。代碼修改如下：

new Vue({  
    template : '<div><h1>{{message}}</h1><h1>{{name}}</h1></div>',  
    data : {  
        message : 'Hello Vue!',  
        name : '動(dòng)力節(jié)點(diǎn)老杜'  
    }  
}).$mount('#app')

運(yùn)行結(jié)果

template編譯后進(jìn)行渲染時(shí)會(huì)將掛載位置的元素替換。

template后面的代碼如果需要換行的話，建議將代碼寫到``符號(hào)當(dāng)中，不建議使用 + 進(jìn)行字符串的拼接。代碼修改如下：

new Vue({  
    template : `  
        <div>  
            <h1>{{message}}</h1>  
            <h1>{{name}}</h1>  
        </div>  
    `,  
    data : {  
        message : 'Hello Vue!',  
        name : '動(dòng)力節(jié)點(diǎn)老杜'  
    }  
}).$mount('#app')

運(yùn)行結(jié)果

template配置項(xiàng)可以省略，將其直接編寫到HTML代碼當(dāng)中。代碼如下：

<!-- 指定掛載位置 -->  
<div id="app">  
    <div>  
        <h1>{{message}}</h1>  
        <h1>{{name}}</h1>  
    </div>  
</div>  
<!-- vue程序 -->  
<script>  
    new Vue({  
        data : {  
            message : 'Hello Vue!',  
            name : '動(dòng)力節(jié)點(diǎn)老杜'  
        }  
    }).$mount('#app')  
</script>

運(yùn)行結(jié)果

需要注意兩點(diǎn)：第一：這種方式不會(huì)產(chǎn)生像template那種的元素替換。
第二：雖然是直接寫到HTML代碼當(dāng)中的，但以上程序中第3~6行已經(jīng)不是HTML代碼了，它是具有Vue語法特色的模板語句。這段內(nèi)容在data發(fā)生改變后都是要重新編譯的。

將Vue實(shí)例掛載時(shí)，也可以不用$mount方法，可以使用Vue的el配置項(xiàng)。代碼如下：

<!-- 指定掛載位置 -->  
<div id="app">  
    <div>  
        <h1>{{message}}</h1>  
        <h1>{{name}}</h1>  
    </div>  
</div>  
<!-- vue程序 -->  
<script>  
    new Vue({  
        data : {  
            message : 'Hello Vue!',  
            name : '動(dòng)力節(jié)點(diǎn)老杜'  
        },  
        el : '#app'  
    })  
</script>

執(zhí)行結(jié)果