• demo的三部分結構
• 判斷：v-if、v-else-if、v-else
• 迴圈：v-for
• 事件繫結 v-on:eventType
• 內容輸入的雙向繫結v-model

原始碼：Github

demo的三部分結構

• 通過script src引入``vue相關js`檔案

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• 在body中的div裡通過id繫結``vue`物件

<div id="app">
    <!-- message output -->
    <h1>{{message}}</h1>
</div>
 

• 在js程式碼裡實現物件的繫結，初始化值、成員函式已經其他在生命週期裡可能存在的鉤子函式。

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello Vue",
            ok: true,
            items: [{
                value: "List item 1"
            }, {
                value: "List item 2"
            }, {
                value: "List item 3"
            }],
            username: "",
            input2: "",
        },
        methods: {
            clickButton: function() {
                this.message = "button clicked ... ";
                this.ok = false;
            }
        },
    })
</script>
 

判斷：v-if、v-else-if、v-else

<!-- if else -->
<h2 v-if="ok===true">Yes</h2>
<h2 v-else>No</h2>

迴圈：v-for

<!-- for loop -->
<ol v-for="(item, index) in items" :key="index">
	<li>{{index}}--{{item.value}}</li>
</ol>

事件繫結 v-on:eventType

<button v-on:click="clickButton()">Click me</button>
 

內容輸入的雙向繫結v-model

在v-model.lazy情況下，更改了輸入框內容後不會即時更新，而是在輸入框失去焦點後更新。

<!-- v-model bind -->
<div>
    <span>input value:</span>
    <input type="text" v-model="username"><br>
    <!-- <input type="text" v-model.lazy="username"><br> -->
    <span> value is:</span>
    <label>{{username}}</label>
</div>