02.Vue初體驗程式碼（HelloVue和列表展示）

念遠_發表於2020-10-03
Vue

02、Vuejs初體驗

a、HelloVue程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>         <!--顯示下方資料-->
<div>{{message}}</div>                  <!--顯示{{message}}-->

<script src="../js/vue.js"></script>
<script>
    //let（變數）/const（常量）
    //let可以再賦值，const定義後不可以再賦值
    //在es6裡面基本上不用var了，var沒有變數作用域的概念，有缺陷。
    const app = new Vue({
        el:'#app',  //用於掛載要管理的元素
        data:{      //定義一些資料
            message:'你好啊，李銀河'
        }
    })
</script>
</body>
</html>

[外鏈圖片轉存中...(img-GnXTEch1-1601722862488)]

1、程式碼做了什麼事？

我們來閱讀JavaScript程式碼，會發現建立了一個Vue物件。

建立Vue物件的時候，傳入了一些options：{}

{}中包含了el屬性：該屬性決定了這個Vue物件掛載到哪一個元素上，很明顯，我們這裡是掛載到了id為app的元素上

{}中包含了data屬性：該屬性中通常會儲存一些資料

這些資料可以是我們直接定義出來的，比如像上面這樣，也可能是來自網路，從伺服器載入的。

2、瀏覽器執行程式碼的流程：

執行到8~9行程式碼顯然出對應的HTML

執行第16行程式碼建立Vue例項，並且對原HTML進行解析和修改。

並且，目前我們的程式碼是可以做到響應式的。

b、vue列表展示

<body>

<div id="app">
    {{movies}}
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            movies:['星際穿越','少年派','大話西遊']
        }
    })
</script>
</body>

這樣是顯示不出來列表的，網頁顯示是這樣：

[外鏈圖片轉存中...(img-ltIXJPwE-1601722862490)]

可以利用v-for顯示（後面會講）

<body>

<div id="app">
   <ul>
       <li v-for="item in movies ">
           {{item}}
       </li>
   </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            movies:['星際穿越','少年派','大話西遊']
        }
    })
</script>
</body>

[外鏈圖片轉存中...(img-diKOKelu-1601722862492)]
在瀏覽器控制檯新增列表資料
在這裡插入圖片描述

相關文章