Vue 2.0 all exercises

Test all Vue code

by Jacques Surveyer

HTML

<script src="https://unpkg.com/vue"></script>
<div id='app'>
 <H2>THIS IS THE FIRST VUE APP  </H2>
  {{message0}}
  <BR>===============
</div>
<div id="app-3">
  Unconditional <br>
  <span v-if="seen">Now you see me</span>
</div>
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
<div id="app-6">
  <p>
    {{message2}}</p>
  <input v-model="message2">
</div>
<div id="app-7">
  <H4>Grocery list code
  </H4>
  <ol>
    <!--
      Now we provide each todo-item with the todo object
      it's representing, so that its content can be dynamic.
      We also need to provide each component with a "key",
      which will be explained later.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>
<!--  More code control -->
<div id="appa">
  <h3>  Bazzzled will appear here randomly, roughly 50% of the time</h3>
  <p>{{ foo }}</p>
  <!-- this will no longer update `foo`! -->
  <button v-on:click="foo = 'Bazzzled'">Change it</button>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    message0: 'Top of Hello Vue!'
  }
});
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
});
var rev = app3.seen = true;
const app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [{
        text: 'Learn JavaScript'
      },
      {
        text: 'Learn Vue'
      },
      {
        text: 'Build something awesome'
      }
    ]
  }
})
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js to be reversed'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
var app6 = new Vue({
  el: '#app-6',
  data: {
    message2: 'Hello VueDemons'
  }
});
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})
var obj = {
  foo: 'bar'
}
let halfd = Math.random() * 10;
alert('The value is ' + halfd )
if(halfd  > 5 ) {
   Object.freeze(obj);
   }

new Vue({
  el: '#appa',
  data: obj
})