溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“Vue基礎知識快速入門的方法是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue基礎知識快速入門的方法是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
可以先不去了解Vue框架的發展歷史、Vue框架有什么特點、Vue是誰開發的，對我們編寫Vue程序起不到太大的作用，更何況現在說了一些特點之后，我們也沒有辦法徹底理解它，因此我們可以先學會用，使用一段時間之后，回頭來熟悉一下Vue框架以及它的特點。只需要知道Vue是一個基于JavaScript（JS）實現的框架。要使用它就需要先拿到Vue的js文件。
第一步：打開Vue2官網，點擊下圖所示的“起步”：
第二步：繼續點擊下圖所示的“安裝”
第三步：在“安裝”頁面向下滾動，直到看到下圖所示位置：
第四步：點擊開發版本，并下載，如下圖所示：
第五步：安裝Vue：
使用script標簽引入vue.js文件。就像這樣：<script src=”xx/vue.js”></script>
集成開發環境使用VSCode，沒有的可以安裝一個
第一個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>第一個Vue程序</title>
<!-- 安裝vue.js -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定掛載位置 -->
<div id="app"></div>
<!-- vue程序 -->
<script>
// 第一步：創建Vue實例
const vm = new Vue({
template : '<h2>Hello Vue!</h2>'
})
// 第二步：將Vue實例掛載到指定位置
vm.$mount('#app')
</script>
</body>
</html>運行效果：
對第一個程序進行解釋說明：
當使用script引入vue.js之后，Vue會被注冊為一個全局變量。就像引入jQuery之后，jQuery也會被注冊為一個全局變量一樣。我們必須new一個Vue實例，因為通過源碼可以看到this的存在。
Vue的構造方法參數是一個options配置對象。配置對象中有大量Vue預定義的配置。每一個配置項都是key:value結構。一個key:value就是一個Vue的配置項。template配置項：value是一個模板字符串。在這里編寫符合Vue語法規則的代碼（Vue有一套自己規定的語法規則）。寫在這里的字符串會被Vue編譯器進行編譯，將其轉換成瀏覽器能夠識別的HTML代碼。template稱之為模板。Vue實例的$mount方法：這個方法完成掛載動作，將Vue實例掛載到指定位置。也就是說將Vue編譯后的HTML代碼渲染到頁面的指定位置。注意：指定位置的元素被替換。‘#app’的語法類似于CSS中的id選擇器語法。表示將Vue實例掛載到id=’app’的元素位置。當然，如果編寫原生JS也是可以的：vm.$mount(document.getElementById(‘app’))‘#app’是id選擇器，也可以使用其它選擇器，例如類選擇器：’.app’。類選擇器可以匹配多個元素（位置），這個時候Vue只會選擇第一個位置進行掛載（從上到下第一個）。
觀察第一個Vue程序，你會發現要完成這種功能，我們完全沒有必要使用Vue，直接在body標簽中編寫以下代碼即可：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>沒必要使用Vue呀</title> </head> <body> <h2>Hello Vue!</h2> </body> </html>
在Vue中有一個data配置項，可以幫助動態的渲染頁面代碼如下：
<!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選項data</title>
<!-- 安裝vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定掛載位置 -->
<div id="app"></div>
<!-- vue代碼 -->
<script>
new Vue({
data : {
message : 'Hello Vue!'
},
template : '<h2>{{message}}</h2>'
}).$mount('#app')
</script>
</body>
</html>運行結果如下：
對以上程序進行解釋說明：
1.data是Vue 實例的數據對象。并且這個對象必須是純粹的對象 (含有零個或多個的 key/value 對)。
2.{{message}}是Vue框架自己搞的一個語法，叫做插值語法（或者叫做胡子語法），可以從data中根據key來獲取value，并且將value插入到對應的位置。
3.data可以是以下幾種情況，但不限于這幾種情況：
data : {
name : '老杜',
age : 18
}
//取值：
{{name}}
{{age}}
data : {
user : {
name : '老杜',
age : 18
}
}
//取值：
{{user.name}}
{{user.age}}
data : {
colors : ['紅色', '黃色', '藍色']
}
//取值：
{{colors[0]}}
{{colors[1]}}
{{colors[2]}}4.以上程序執行原理：Vue編譯器對template進行編譯，遇到胡子{{}}時從data中取數據，然后將取到的數據插到對應的位置。生成一段HTML代碼，最終將HTML渲染到掛載位置，呈現。
5.當data發生改變時，template模板會被重新編譯，重新渲染。
template只能有一個根元素。 請看如下代碼：
<!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選項template</title>
<!-- 安裝vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定掛載位置 -->
<div id="app"></div>
<!-- vue程序 -->
<script>
new Vue({
template : '<h2>{{message}}</h2><h2>{{name}}</h2>',
data : {
message : 'Hello Vue!',
name : '動力節點老杜'
}
}).$mount('#app')
</script>
</body>
</html>執行結果
控制臺錯誤信息：組件模板應該只能包括一個根元素。 所以如果使用template的話，根元素只能有一個。 代碼修改如下：
new Vue({
template : '<div><h2>{{message}}</h2><h2>{{name}}</h2></div>',
data : {
message : 'Hello Vue!',
name : '動力節點老杜'
}
}).$mount('#app')運行結果
template編譯后進行渲染時會將掛載位置的元素替換。
template后面的代碼如果需要換行的話，建議將代碼寫到``符號當中，不建議使用 + 進行字符串的拼接。 代碼修改如下：
new Vue({
template : `
<div>
<h2>{{message}}</h2>
<h2>{{name}}</h2>
</div>
`,
data : {
message : 'Hello Vue!',
name : '動力節點老杜'
}
}).$mount('#app')運行結果
template配置項可以省略，將其直接編寫到HTML代碼當中。 代碼如下：
<!-- 指定掛載位置 -->
<div id="app">
<div>
<h2>{{message}}</h2>
<h2>{{name}}</h2>
</div>
</div>
<!-- vue程序 -->
<script>
new Vue({
data : {
message : 'Hello Vue!',
name : '動力節點老杜'
}
}).$mount('#app')
</script>運行結果
需要注意兩點： 第一：這種方式不會產生像template那種的元素替換。
第二：雖然是直接寫到HTML代碼當中的，但以上程序中第3~6行已經不是HTML代碼了，它是具有Vue語法特色的模板語句。這段內容在data發生改變后都是要重新編譯的。
將Vue實例掛載時，也可以不用$mount方法，可以使用Vue的el配置項。 代碼如下：
<!-- 指定掛載位置 -->
<div id="app">
<div>
<h2>{{message}}</h2>
<h2>{{name}}</h2>
</div>
</div>
<!-- vue程序 -->
<script>
new Vue({
data : {
message : 'Hello Vue!',
name : '動力節點老杜'
},
el : '#app'
})
</script>執行結果
el是element單詞的縮寫，翻譯為“元素”，el配置項主要是用來指定Vue實例關聯的容器。也就是說Vue所管理的容器是哪個。
讀到這里，這篇“Vue基礎知識快速入門的方法是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
