plunkerでvue その62

概要

plunkerでvueやってみた。
練習問題、やってみた。

練習問題

vueファイルからvueファイルを呼び出せ。

写真

サンプルコード

<template>
  <div>
    <h2>demo</h2>
    <ul>
      <li v-for="i in items">
        {{i}}
      </li>
    </ul>
    <div id="koko"></div>
    <div id="dynamic-placeholder"></div>
  </div>
</template>

<script>
define(['Vue'], function(Vue) {
  return new Vue({
    template: template,
    data: {
      items: ['ichi', 'ni', 'san', 'shi', 'go', 'roku', 'shichi', 'hachi']
    },
    mounted() {
      require(['vue!tVar'], function(compo) {
        compo.$mount('#koko');
      });
      require(['vue!dynamics'], function(compo) {
				compo.$mount('#dynamic-placeholder');
			})
    },
    methods: {
    }
  })
});
</script>

<style>
body {
  background: grainsboro;
  color: chucknorris;
}
li {
  list-style-type: cjk-ideographic;
}
</style>

成果物

以上。