Learn Vue.js

Test

by Michael Lajlev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="root" class="hide">
  <code>#root</code>
  <h1>{{greeting}}</h1>
  <input v-model="greeting" type="text">
  <div v-if="count === 1">
    First
  </div>
  <div v-else-if="count === 2">
    Second
  </div>
  <div v-else>
    Third
  </div>
  <div v-show="count===5">
    Show
  </div>
</div>



<div id="signup" class="hide">
  <code>#signup</code>
  <input type="text" v-model='email' :class="[email.length < 2 ? 'red' : 'green']">
  <input type="text" v-model='email' :class="{red: email.length < 2}">
  <p v-text="email"></p>
  <button onclick="alert('signed up')" :disabled="email.length < 2">
    Submit
  </button>
</div>



<div id="list" class="hide">
  {{kittifyName}}
  <input v-model="newCat" @keyUp.enter="addKitty">
  <button @click="addKitty">
    + Add
  </button>
  <ul>
    <li v-for="cat of cats">
      {{cat.name | capitalize | kittify }}
    </li>
  </ul>
  <ul>
    <li v-for="cat of cats">
      {{cat.name | capitalize | kittify }}
    </li>
  </ul>
</div>



<div id="customcomponent">
  <cat-list :cats="cats"></cat-list>
</div>

CSS

body {
  margin: 2em;
}

body>div {
  padding: 1em;
  background: #efefef;
  margin-bottom: 5em;
}

input,
button,
code,
p {
  display: block;
  margin-bottom: 2em;
}

.hide {
  display: none;
}

.red {
  border: 2px solid red;
}

.green {
  border: 2px solid green;
}

JavaScript

new Vue({
  el: '#root',
  data: {
    greeting: "Hello Vue",
    count: 6
  }
})

new Vue({
  el: '#signup',
  data: {
    email: ''
  }
})

new Vue({
  el: '#list',
  data: {
    cats: [{
        name: 'Jack'
      },
      {
        name: 'Hans'
      },
      {
        name: 'James'
      }
    ],
    newCat: ''
  },

  methods: {
    addKitty: function() {
      return this.cats.push({
        name: this.newCat
      });
    }
  },

  filters: {
    capitalize: function(value) {
      return value.toUpperCase()
    },
    kittify: function(value) {
      return value + "y"
    }
  },

  computed: {
    kittifyName: function() {
      if (this.newCat.length > 1) {
        return this.newCat + 'y'
      }
    }
  }
})



Vue.component('cat-list', {
  props: ['cats'],
  template: `
    <ul>
      <li v-for="cat for cats">
        {{cat.name}}
      </li>
    </ul>
  `
})

new Vue({
  el: '#customcomponent',
  component: 'cat-list',
  data: {
    cats: [
    	{
        name: 'Jack'
      },
      {
        name: 'Hans'
      },
      {
        name: 'James'
      }
    ],
  }
})