1.2 初識Vue
阿新 • • 發佈：2021-07-17
1.2 初識Vue
1.2.1 引入js檔案
進入官網——安裝文件https://cn.vuejs.org/v2/guide/installation.html
根據自己的需求，選擇開發版本或是生產版本下載。
官網明確指出，如果對於製作原型或學習需要，你可以這樣使用cdn來使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初始vue</title> </head> <body> <div id="root"> <h1>Hello, World!</h1> </div> </body> </html>
這樣的程式碼我們已經十分熟悉了。為了能讓Hello, World!輸出可以動態變化，我們引入vue
首先引入剛剛下載好的vue.js
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
// 建立一個Vue的例項物件，並傳入配置物件
new Vue({
el: '#root', // 用於指定當前vue例項為哪個容器服務，值是選擇器字串，選擇的寫法類似於JQuery
data: { // data是儲存資料的地方，為root容器提供資料，值為一個物件，相當於React中的state
name: 'Vue'
}
})
</script>
<div id="root"> <h1>Hello, {{name}}</h1> </div>
1.2.3 小結
-
<div id="root">是一個容器，容器中寫的不是原始html程式碼，而是vue的模板程式碼。
-
所謂模板程式碼，類似於React中的jsx，是html+js的混合體。
-
{{xxx}} xxx會自動讀取data中的xxx屬性