Each Vue.js application is started by creating a root instance of Vue through the constructor Vue:

var vm = new Vue({
      // option
    })

Each Vue instance proxies all of its data objects
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// Setting properties also affects raw data
vm.a = 2
data.a // -> 2
//... Vice versa
data.a = 3
Vm.a// -> 3 instances expose some useful instance attributes and methods. These attributes and methods have prefixes to distinguish them from proxy data attributes. For example:
    var data = { a: 1 }  
    var vm = new Vue({  
      el: '#example',  
      data: data  
    })  
    vm.data === data // -> true
vm.el===document.getElementById('example')//> true//watch is an example method
vm.$watch('a', function (newVal, oldVal) {
// This callback will be called after the vm.a change
})
Instances need to configure data observers, compile templates, mount instances to DOM, and then update DOM when data changes. In this process, instances also call some lifecycle hooks, which gives us the opportunity to execute custom logic. For example, the create hook is called after the instance is created:
var vm = new Vue({
data: {
a: 1
},
created: function () {
// this points to the vm instance
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"
There are also some other hooks that are called at different stages of the instance life cycle, such as mounted, updated, destroyed. this of the hook points to the Vue instance that calls it.

{{}}: The most common form of data binding is text interpolation using the "Mustache" grammar (double braces):
Message: {{ msg }}
The Mustache tag will be replaced by the value of the msg attribute on the corresponding data object. Whenever the msg attribute on the bound data object changes, the contents of the interpolation will be updated.

v-once: Instructions, you can also perform one-time interpolation, when the data changes, the contents of the interpolation will not be updated. Note, however, that this affects all data binding on that node:
This will never change: {{ msg }}

V-html: Double braces interpret data as plain text, not HTML. To output real HTML, you need to use the v-html instruction:

V-bind: Mustache cannot be used in HTML attributes. The v-bind directive should be used:

v-if: The instruction removes/inserts the value of the expression seed based on its true or false value

element

Now you see me

    <div id="example-1">
      <button v-on:click="counter += 1">Add 1</button>
      <p>The button was clicked. {{ counter }} Second time.</p>
    </div>
    var example1 = new Vue({
      el: '#example-1',
      data: {
        counter: 0
      }
    })

Many event handling logic is complex, so it is not feasible to write JavaScript code directly in v-on instructions. So v-on can accept a defined method call.
Examples:

    <div id="example-2">
      <!-- `greet` Is the method name defined below -->
      <button v-on:click="greet">Greet</button>
    </div>
    var example2 = new Vue({
      el: '#example-2',
     data: {
        name: 'Vue.js'
      },
      // Define methods in `methods'objects
      methods: {
        greet: function (event) {
         // ` this `refers to the current Vue instance in the method
         alert('Hello ' + this.name + '!')
         // ` event `is a native DOM event
         alert(event.target.tagName)
       }
     }
    })
    // You can also call methods directly in JavaScript

Inline processor
In addition to directly binding to a method, you can also use inline JavaScript statements:

    <div id="example-3">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
    new Vue({
      el: '#example-3',
      methods: {
        say: function (message) {
          alert(message)
        }
      }
    })

Special variable event sometimes requires access to native DOM events in the inline statement processor. It can be passed into the method with a special variable event:

    <button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
    // ...
    methods: {
      warn: function (message, event) {
        // Now we can access the native event object
        if (event) event.preventDefault()
        alert(message)
          }
    }

Event modifier
.stop
.prevent
.capture
.self
.once
.enter
.tab
Delete (capture delete and backspace keys)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

v-model
You can use the v-model instruction to create two-way data binding on form control elements. It automatically selects the right method to update elements according to the type of control. Although somewhat magical, v-model is essentially just grammatical sugar, which monitors user input events to update data, and specially handles extreme examples.

Message is: {{ message }}

check box
Multiple check boxes are bound to the same array:

    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
    new Vue({
     el: 'divID',
      data: {
        checkedNames: []
      }
    })

radio button

    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>

 One 
 Two 
Picked: One

Selection List
Dynamic options, rendered with v-for:


{{ option.text }}


Selected: {{ selected }}
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})

Attribute binding
But sometimes we want to bind value to a dynamic property of a Vue instance, which can be implemented with v-bind, and the value of this property can be not a string.

check box:
<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>
// When elected
vm.toggle === vm.a
// When not selected
vm.toggle === vm.b

//Radio button:
<input type="radio" v-model="pick" v-bind:value="a">
// When elected
vm.pick === vm.a

<select v-model="selected">
   <!-- Inline object literal quantity -->
 <option v-bind:value="{ number: 123 }">123</option>
</select>
// When elected
typeof vm.selected // -> 'object'
vm.selected.number // -> 123

Modifier:
By default, v-model synchronizes the values and data of the input box in the input event (except for the IME section above), but you can add a modifier lazy, which translates to synchronization in the change event:

    <div id="example">
      <div>A custom component!</div>
    </div>

    var data = { counter: 0 }
    Vue.component('simple-counter', {
      template: '<button v-on:click="counter += 1">{{ counter }}</button>',
      data: function () {
        return data
      }
    })
    new Vue({
      el: '#example-2'
    })