Vue Components

by Tuan Truong

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<div id="app">
  <message title="Hi" body="Lorem ipsum dolor sit amet, consectetur adipiscing elit." @open="isVisible = true"></message>
</div>

Vue

Vue.component('message',{
	props:['title', 'body'],
  data(){
  	return {
    	isVisible: true
    }
  },
	template: `
  	<div class="content">
    	<h1 v-show="isVisible">{{ title }}</h1> 
      <p>{{ body }}</p>
      <button type="button" @click='isVisible = false' @click="$emit('open')">X</button>
    </div>
    
  `,
  methods: {
  	hideModal(){
    	this.isVisible = false;
    }
  }
  
})




Vue.component('template-title', {
	template: '<div><h1>Playing Around with Templates</h1></div>'
})

Vue.component('template-text',{
	template: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id suscipit justo. Cras magna sapien, pulvinar in cursus eget, tristique aliquet ligula. Integer finibus mollis sem, semper malesuada mauris feugiat pellentesque. Integer quis sapien dolor. Praesent fringilla cursus tincidunt. </p>'
})



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