Vue.js Getting Started

Every Vue application needs to be implemented by instantiating Vue.

The syntax format is as follows:

var vm = new Vue({
  // 选项
})

Next, let's look at what is needed in the Vue constructor through an example:

You can see that there is an `el` parameter in the Vue constructor, which is the id in the DOM element. In the above example, the id is `vue_det`, in the div element:

<div id = "vue_det"></div>

This means that all our subsequent modifications are within the specified div above, and the outside of the div is not affected.

Next, let's see how to define data objects.

dataUsed to define properties. The instance has three properties: site, url, alexa.

methodsUsed to define functions, which can return function values through return.

{{ }}Used to output object properties and function return values.

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

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

In addition to data properties, Vue instances also provide some useful instance properties and methods. They all have the prefix `$` to distinguish them from user-defined properties. For example:

Other Extensions