The Vue Instance

Every Vue application starts by creating a new Vue instance with the Vue function:

			var vm = new Vue({
			  // options
			});
		

Here, now vm is the Vue instance. A Vue application consists of a root Vue instance created with new Vue.

Data and Methods

When a Vue instance is created, it adds all the properties found in its data object to Vue’s reactivity system. When the values of those properties change, the view will “react”, updating to match the new values.

			// Our data object
			var data = { a: 1 }

			// The object is added to a Vue instance
			var vm = new Vue({
			  data: data
			});
		

No you can access vm properties from outside of the Vue instance using vm.a.

When this data changes, the view will re-render. It should be noted that properties in data are only reactive if they existed when the instance was created. That means if you add a new property, like:

			vm.b = 'hi'
		

Then changes to b will not trigger any view updates. But there's a way to get around with it. Using vm.$set() method. We will learn later.

Don't Use freeze()

When you are working with Vue.js, don't use Object.freeze(), which prevents existing properties from being changed, which also means the reactivity system can’t track changes.

			var obj = {
			  foo: 'bar'
			};
			Object.freeze(obj);
			new Vue({
			  el: '#app',
			  data () {
			    return {
			      obj
			    }
			  }
			});
		

Now if you dynamically change the value of obj object, the changes won't automatically update in the DOM as we have freeze it. Use freeze() only when you don't want a part of Vue properties not to be changed. It's like using constant.

vm.$data

Remember you can access any vue properties using the syntax vm.property. But if you still want to access data object of Vue instance you can use vm.$data.

		let obj = {
			foo : bar,
		};
		let vm = new Vue({
			el : ".Content",
			data(){
				return {
					a : 25,
					obj
				}
			}
		});
		console.log(vm.obj); // Same as the following -
		console.log(vm.$data.obj);
		

vm.$el

If you want to know which element the Vue instance is mounted on you can use vm.$el to return the element.

		let obj = {
			foo : bar,
		};
		let vm = new Vue({
			el : ".Content",
			data(){
				return {
					a : 25,
					obj
				}
			}
		});
		console.log(vm.$el);
		console.log(vm.$el === document.getElementById(".Content"));