Vue 2.0 Hello World

by Shin Okada

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.css">
<script src="https://unpkg.com/vue"></script>
<div id="app">
  <tabs>
            <tab name="General" :selected="true">
                <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quis natus temporibus soluta vitae veritatis vel, sequi quod voluptatibus suscipit praesentium excepturi obcaecati itaque odit.</h1>
            </tab>

            <tab name="Product Overview">
                <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim at quaerat voluptate laborum qui neque a molestias culpa? Impedit necessitatibus, facere nulla eaque vel voluptatem aperiam quibusdam, et vero quisquam temporibus fugit cum minus veritatis.</h1>
            </tab>

            <tab name="Product Specifications">
                <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas facilis cum aspernatur, sit sapiente autem a earum unde reprehenderit animi.</h1>
            </tab>
        </tabs>
</div>

Babel + JSX

Vue.component('tabs', {
	template: `
  	<div>
      <div class="tabs">
        <ul>
          <li v-for="tab in tabs" :class="{ 'is-active' : tab.isActive }">
          	<a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
          </li>
        </ul>
      </div>

      <div class="tabs-details">
      	<slot></slot>
      </div>
    </div>
  `,
  
  data() {
  	return {
    	tabs: []
    };
  },
  
  created() {
  	this.tabs = this.$children;
  },
  
  methods: {
  	selectTab: function(selectedTab) {
    	this.tabs.forEach(tab => {
      	tab.isActive = (tab.name == selectedTab.name);
      });
    }
  }
});

Vue.component('tab', {
	template: `
  	<div v-show="isActive"><slot></slot></div>
  `,
  
  props: {
  	name: { required: true },
    selected: { default: false }
  },
  
  data() {
  	return {
    	isActive: false
    };
  },
  
  mounted() {
  	this.isActive = this.selected;
  },
  
  computed: {
  	href() {
    	return '#/' + this.name.toLowerCase().replace(/ /g, '-');
    }
  }
});

new Vue({
	el:'#app'
});