【Vue自學筆記（一）】第一個Vue程式
阿新 • • 發佈：2020-12-24
HelloVue
步驟
第一步：建立一個HTML檔案
在導航欄中的檔案按鈕中新建檔案，在右下角的位置將純文字替換成HTML。如圖
在文字中輸入! + tab即可生成HTML檔案的模板。
第二步：匯入Vue
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
開發版本提示更加多，但是體積也更加大。生產版本削去不必要的提示，同時也壓縮了體積。新人學習的時候建議使用開發版本。
第三步：編寫HTML
<div id='app'> {{ message}} </div>
第四步：編寫JavaScript
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
完整程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue基礎</title> </head> <body> <div id='app'> {{ message}} </div> <!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html>
講解
el：掛載點
- el是用來設定Vue例項掛載(管理)的元素
元素中用{{}}修飾的內容，會被Vue例項中data的屬性的值替換。 - Vue例項的作用範圍
Vue會管理el選項命中的元素及其內部的後代元素。 - 可以使用的選擇器
可以使用其他的選擇器，但是建議使用ID選擇器。因為ID選擇器可以保證掛載唯一，而其他選擇器都有可能掛載多個元素。 - 可以設定的dom元素
可以使用除了HTML和BODY以外其他的雙標籤，單標籤不行。建議使用div標籤，因為div沒有特殊的樣式。
data：資料物件
1.Vue中用到的資料定義在data中
2.data中可以寫複雜型別的資料
3.渲染複雜型別資料時，遵守js的語法即可
複雜型別的data demo
示例如下：
<body>
<div id='app'>
{{ message}}
<h2>{{ school.name }} {{school.ranking}}</h2>
<ul>
<li>{{academy[0]}}</li>
<li>{{academy[1]}}</li>
<li>{{academy[2]}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
school: {
name: '清華北大',
ranking: 1
},
academy: ['計算機學院', '美術學院', '數學學院']
}
})
</script>
</body>
效果：
都非常簡單，不做過多解釋。