Vue Component Test

by nevkatz

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>



<div id="app1">

  <h1>
  {{ title }}
  </h1>
  <hithere></hithere>
  <hithere></hithere>
  <hr>
  <hello></hello>
  <hello></hello>

  <button v-on:click="togglePara" ref="myButton" id="yo">
    {{ showParagraph ? "Hide" : "Show" }} Paragraph
  </button>
  <p v-if="showParagraph">
  This is not always visible.
  </p>
  <div>
    <input type="text" v-model="title"/>
  </div>
  <section id="hud">
   last changed:  {{ lastChanged }}
  </section>
</div>

<!-- second app structure -->
<div id="app2">
  <h2>
  {{ title }}
  </h2>
  <button @click="onChange">
  Change
  </button>
 </div>
 
 <div id="app3">
 
 </div>
 <div id="app4">
 
 </div>
 <div id="debug">
 
 </div>

JavaScript

Vue.component('hello',{
  template:'<h2>Hello!</h2>'
});
Vue.component('hithere',{
  template:'<h2>Hello class!</h2>'
});

var vm1 = new Vue({
  el:'#app1',
  data:{
     title:'My Title',
     showParagraph:false,
     lastChanged:Date.now()
  },
  methods:{
     togglePara:function() {
       this.showParagraph = !this.showParagraph;
     },
     updateTitle:function(title) {
       this.title= title;
     }
  
  },
  computed:{
     lowerCaseTitle:function() {
       return this.title.toLowerCase();
     }
  },
  // only fires when there is a change.
  watch: {
    title:function(value) {
  	    vm1.lastChanged = Date.now();
    }
  }
});

// Demo of accessing data from outside object.
//vm1.$data.title = 'Nevin';

var vm2 = new Vue({
   el:'#app2',
   data:{
     title:'The second instance.'
   },
   methods:{
     onChange:function() {
        vm1.title = 'Nevin';
     }
   }
});

let debug = document.querySelector('#debug');

// show an element's innerHTML
 debug.innerHTML = vm1.$el.textContent;
 
// show refs
debug.innerHTML = vm1.$refs.myButton.id;


// method one of using moun. 
var vm3 = new Vue({
    template:'<h2>Hello Jeremy!</h2>'
});

// mount this template in the appropriate div.
vm3.$mount('#app3');

// method 2 of using mount.
var vm4 = new Vue({
    template:'<h2>Hello Meliss!</h2>'
});
// mount this.
vm4.$mount();
// append the vue object's inner element.
document.getElementById('app4').appendChild(vm4.$el);