vuejs.orgをただ読んでいくだけ - その1
スコープ付き CSS · vue-loader トップページの「なぜ 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>
とりあえず、vue.js使って画面表示までできた