VueJS Snippets for some key concepts

vuesnippets-components.js

<div id="app">
  <contact-us></contact-us>
</div>


Vue.component('contact-us', {
	data: function() {
  	return {
    	email: 'info@mycompany.com'
    };
  },
	template: `
  	<div>
		  <h1>Contact Us</h1>
			<p>Please send an e-mail to: {{ email }}</p>
		</div>
  `
});

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

vuesnippets-lifecyclehooks.js

var vm = new Vue({
  data: {
		message: 'Hello World!',
    counter: 1,
    created: new Date()
  },
  beforeCreate: [
  	function() {
      alert("beforeCreate #1");
    },
    function() {
      alert("beforeCreate #2");
    }
  ],
  created: function() {
  	alert("created");
  },
  beforeMount: function() {
  	alert("beforeMount");
  },
  mounted: function() {
  	alert("mounted");
  },
  beforeUpdate: function() {
  	alert("beforeUpdate");
  },
  updated: function() {
  	alert("updated");
  },
  beforeDestroy: function() {
  	alert("beforeDestroy");
  },
  destroyed: function() {
  	alert("destroyed");
  }
});

//vm.$destroy();

setTimeout(function() {
	vm.$mount('#app');
}, 2000);

console.log(vm);

vuesnippets-localcomponents.js

<div id="app1">
  <contact-us></contact-us>
</div>

<div id="app2">
  <contact-us></contact-us>
</div>


var contactUs = {
	data: function() {
  	return {
    	email: 'info@mycompany.com'
    };
  },
	template: `
  	<div>
		  <h1>Contact Us</h1>
			<p>Please send an e-mail to: {{ email }}</p>
		</div>
  `
};

new Vue({
	el: '#app1',
  components: {
  	'contact-us': contactUs
  }
});

new Vue({ . // This will not recognize contact-us component
	el: '#app2',
});

vuesnippets-refs.js

//////////-------\\\\\\\\\
//////////-------\\\\\\\\\
//////////-------\\\\\\\\\
//////////-------\\\\\\\\\
// This snippet is for refs

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

<div id="app">
  <h1 ref="message">{{ message }}</h1>
  <button ref="myButton" @click="clickedButton">Click Me!</button>
  
  <ul>
    <li v-for="n in 10" ref="numbers">{{ n }}</li>
  </ul>
</div>
//////////////////////////////////////------
var vm = new Vue({
	el: '#app',
  data: {
  	message: 'Hello World!'
  },
  methods: {
  	clickedButton: function() {
    	console.log(this.$refs);
      this.$refs.myButton.innerText = this.message;
    }
  }
});

setTimeout(function() {
	vm.$refs.message.innerText = 'This is a test';
}, 2000);

setTimeout(function() {
	vm.message = 'This is another test';
}, 4000);

vuesnippets-updatequee.js

// This snippet is for showing update quee logic of VueJS

var vm = new Vue({
	el: '#app',
  data: {
    message: 'Hello!'
  }
});

vm.message = 'Hello World!';
alert(vm.$el.textContent);

Vue.nextTick(function() {
  alert(vm.$el.textContent);
});



setTimeout(function() {
	unwatch();
}, 5000);

vuesnippets-watchers.js

// This snippet is for controlling, watching and unwatching Vue instance elements

var vm = new Vue({
	el: '#app',
  data: {
    counter: 1,
    person: {
    	name: {
      	firstName: 'Serdar',
        lastName: 'AGLAMIS'
      }
    }
  }
});

/*vm.$watch('counter', function(newValue, oldValue) {
	alert('Counter changed from ' + oldValue + ' to ' + newValue + '!');
});*/

/*vm.$watch('person.name.firstName', function(newValue, oldValue) {
	alert('First name changed from ' + oldValue + ' to ' + newValue + '!');
});*/

/*vm.$watch('person.name', function(newValue, oldValue) {
	alert('The first name was changed from ' + oldValue.firstName + ' to ' + newValue.firstName + '!');
}, { deep: true });*/

var unwatch = vm.$watch(
	function() {
  	return this.counter;
  },
  function(newValue, oldValue) {
		alert('Counter changed from ' + oldValue + ' to ' + newValue + '!');
	}
);