vue學習記錄-01 vue初體驗

這篇文章是根據codewhy老師在b站的視訊進行的學習記錄

---

---

一、HelloVueJS

想要使用VUE首先是需要將VUE進行引入，官方提供了兩個版本供選擇，當然我們也可以直接將VUE檔案下載到本地使用。

<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

這裡我們直接選擇開發版本即可，開發版本的錯誤警告可以幫助我們進行VUE的學習。
接下來就是建立第一個Vue應用。

<div id="app">
        <h2>{{message}}</h2>
        <h1>{{name}}</h1>
    </div>

const app=new Vue({
            el:"#app",//用於掛載要管理的元素
            data:{//定義資料
                message:"Hello,Vue!",
                name:"Aaron"
            }
        })

我們可以直接在控制檯看到vue應用裡面的資料。

這是頁面的輸出效果。

二、Vue列表展示

接下來嘗試在VUE裡面輸出一個列表。

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

v-for是vue用於遍歷迴圈的一個指令，我們用這個指令來做一個電影列表

const app=new Vue({
            el:"#app",
            data:{
                message:"Hello,Vue!",
                movies:["星際穿越","大話西遊","少年派","盜夢空間"]
            }
        })

頁面效果：

三、Vue案例：計數器

我們再來做一個簡單的計數器體驗一下Vue的使用。

<div id="app">
        <h2>當前計數：{{counter}}</h2>
        <button v-on:click="add">+</button>
        <button @click="sub">-</button>
    </div>

我們使用v-on指令點選事件的事件監聽器，也可以用語法糖寫為"@"。

<script>
        const app = new Vue({
            //el型別 string或者HTMLElement
            el: "#app",
            //data型別 Object或者Function()
            data: {
                counter: 0
            },
            //methods型別 {[key:string]:Function}
            methods: {
                add: function () {
                    console.log("add被執行");
                    this.counter++;
                },
                sub: function () {
                    console.log("sub被執行");
                    this.counter--;
                }
            }
        })
    </script>

頁面效果