Vue.js Day06 看真鐵人學樣板語法

感謝真鐵人讓我學習，以下文章僅是自己的吸收，看真鐵人才是對的！

通往真鐵人：https://ithelp.ithome.com.tw/articles/10191396

Conditional Rendering

透過 v-if 這個指令(directive) 決定是否顯示 p tag。

<div id="app-3">
    <p v-if="seen">Now you see me</p>
</div>

data 的 seen 值為 true。

var app3 = new Vue({   
    el: '#app-3',   
    data: {     
        seen: true   
    } 
})

List Rendering

透過 v-for 這個指令 (directive) 顯示 todos list。

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }} 
        </li>
    </ol>
</div>

只要寫一個樣板，新增一個 value 就可以產生一個 li。

var app4 = new Vue({
    el: '#app-4',   
    data: {     
        todos: [
            {text: 'Learn JavaScript' },
            {text: 'Learn Vue' },
            {text: 'Build something awesome'}
        ]
     }
})

Event Handling

透過 v-on 綁定 click 事件，點擊 button時執行 reverseMessage，將 message反轉。

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button> </div>

反轉重組，可以順便看 this 的作用域。

var app5 = new Vue({   
    el: '#app-5',
    data: {     
        message: 'Hello Vue.js!'   
    },   
    methods: {     
        reverseMessage: function () {       
            this.message = this.message.split('').reverse().join('')     }   
    } 
})

Form Input Bindings

透過 v-model 可雙向綁定 input 和 vue instance 的 message。

<div id="app-6">
    <p>{{ message }}</p>   
    <input v-model="message">
</div>

修改 message，message 也會改變。

var app6 = new Vue({   
    el: '#app-6',   
    data: {     
        message: 'Hello Vue!'   
    } 
})

Component

<div id="app-7">   
    <ol>     
        <todo-item 
            v-for="item in groceryList" 
            v-bind:todo="item"       
            v-bind:key="item.id">     
        </todo-item>   
    </ol> 
</div>

可以自定義 component

Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
    el: '#app-7',
    data: {
       groceryList: [
          { id: 0, text: 'Vegetables' },
          { id: 1, text: 'Cheese' },
          { id: 2, text: 'Whatever else humans are supposed to eat' }
        ]
    } 
})

再次感謝鐵人。