YouTip LogoYouTip

Vue Start

# Vue.js Getting Started Every Vue application needs to be implemented by instantiating Vue. The syntax format is as follows: var vm = new Vue({ // options}) Next, let's look at what is needed in the Vue constructor through an example: ## Example

site : {{site}}

url : {{url}}

{{details()}}

var vm = new Vue({ el: '#vue_det', data: { site: "", url: "www.", alexa: "10000" }, methods: { details: function() { return this.site + " - "; } } }) [Try it Β»](#) Click the "Try it" button to view the online example You can see that there is an `el` parameter in the Vue constructor, which is the id of the DOM element. In the example above, the id is `vue_det`, in the div element:
This means that all subsequent changes will be within the specified div, and the outside of the div will not be affected. Next, let's see how to define a data object. **data** is used to define properties. There are three properties in the instance: site, url, and alexa. methods is used to define functions, which can return function values via `return`. `{{ }}` is used to output object properties and function return values.

site : {{site}}

url : {{url}}

{{details()}}

When a Vue instance is created, it adds all properties found in its data object to Vue's reactive system. When the values of these properties change, the HTML view will also change accordingly. ## Example

site : {{site}}

url : {{url}}

Alexa : {{alexa}}

// Our data object var data = { site: "", url: "www.", alexa: 10000} var vm = new Vue({ el: '#vue_det', data: data }) // They reference the same object! document.write(vm.site === data.site) // true document.write("
") // Setting properties will also affect the original data vm.site = "Tutorial" document.write(data.site + "
") // Tutorial // ……Vice versa data.alexa = 1234 document.write(vm.alexa) // 1234 [Try it Β»](#) In addition to data properties, Vue instances also provide some useful instance properties and methods. They all have a `$` prefix to distinguish them from user-defined properties. For example: ## Example

site : {{site}}

url : {{url}}

Alexa : {{alexa}}

// Our data object var data = { site: "", url: "www.", alexa: 10000} var vm = new Vue({ el: '#vue_det', data: data }) document.write(vm.$data === data) // true document.write("
") document.write(vm.$el === document.getElementById('vue_det')) // true [Try it Β»](#)
← Mongodb Create CollectionJava Stringtokenizer Example β†’