Vue2-2 component

Posted on 2018-04-07 |

Simple Component

<!DOCTYPE html>
<html>
<body>
    <div id="root">
        <task></task>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./order.js"></script>
</body>
</html>

Vue.component('task', {
    template: '<li>Foobar</li>'
})
new Vue({
    el: '#root',
})

Sub component

<!DOCTYPE html>
<html>
<body>
    <div id="root">
        <task-list title="my todo list"></task-list>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./order.js"></script>
</body>
</html>

Vue.component('task-list', {
    props: ['title'],
    template: `
    <div v-show="isVisible">
        <div>{{ title }}</div>
        <task v-for="t in tasks">{{ t.task }}</task>
        <button type="button" @click="hideModel">close</button>
    </div>
    `,
    data() {
        return {
            isVisible: true,
            tasks: [
                { task: 'Go to the store', complete: true },
                { task: 'Go to the email', complete: false },
            ]
        }
    },
    methods: {
        hideModel() {
            this.isVisible = false
        }
    },
})
Vue.component('task', {
    template: '<li><slot></slot></li>',
})
new Vue({
    el: '#root',
})

Vue2-1 basic

Posted on 2018-04-07 |

Basic Example

<!DOCTYPE html>
<html>
<body>
    <div id="root">
        <ul>
            <li v-for="n in names" v-text="n"></li>
        </ul>
        <input id="input" :type="inputType" v-model="newName"/>
        <button @click="addName">{{ label }}</button>
        
        <h1 v-text="reversedMessage"></h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#root',
            data: {
                label: 'Add Name',
                inputType: 'text',
                newName: '',
                names: ['Alice', 'Bob', 'Jane', 'Jack'],
                message: 'Hello World'
            },
            methods: {
                addName() {
                    this.names.push(this.newName)
                    this.newName = ''
                }
            },
            computed: {
                reversedMessage() {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>