vuejs.orgをただ読んでいくだけ - その1

スコープ付き CSS · vue-loader f:id:okumuraa1:20180416003238p:plain トップページの「なぜ VUE.JS」をクリックしたら動画が始まったため、とりあえず、見よう見まねで似たようなコードを書いてみました。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
</head>
<body>
<div id="app">
    <component-c></component-c>
</div>

<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/http-vue-loader@1.3.4/src/httpVueLoader.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    new Vue({
        el: '#app',
        components: {
            'component-c': httpVueLoader('./c.vue'),
        },
    });
});
</script>
</body>
</html>

c.vue

<template>
    <ul>
        <li v-for="(product,index) in products" :key="index">
            {{ product }}
        </li>
    </ul>
</template>

<script>
module.exports = {
    data: () => {
        return {
            products:[
                'Boots',
                'Jackets',
                'Hiking Socks'
            ]
        }
    },
    created:()=>{
        console.log(new Date);
    }
}
</script>

<style scoped>
li {
    color: royalblue;
}
</style>

f:id:okumuraa1:20180416003541p:plain

とりあえず、vue.js使って画面表示までできた