Vue 2.0 Hello World

by ngoctuan001

HTML

<script src="https://unpkg.com/vue"></script>


<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="postFontSize += $event">
    </blog-post>
  </div>
  <custom-input v-model="searchText"></custom-input>
</div>

CSS

.active {
  color: blue;
}

.text-danger {
  color: red;
}

JavaScript

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})


Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text',0.1)">
  Enlarge text
</button>
      <div v-html="post.content"></div>
    </div>
  `
})

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [{
      title: "HELLO",
      content: "This is the hello content"
    }, {
      title: "Hi",
      content: "Those are hi fies"
    }],
    postFontSize: 1
  }
})