1. V – text commands

  • V-text Sets the content of the label.
  • The default is to replace everything, but you can use the difference expression {{}} to replace something specified.
  • Internal support for writing expressions

2. V – HTML commands

  • The v-HTML directive sets the innerHTML of the element
  • There are HTML structures in the content that are parsed as tags
  • A V-text instruction will only parse to text, no matter what the content is, okay
  • To parse text using V-text, you need to parse HTML structure using V-HTML

3. V – on command

  • The V-ON directive binds events to elements
  • The event name does not need to be on
  • The instruction can be shortened to @
  • The bound methods are defined in the methods property
  • The data defined in data is accessed internally by the this keyword

Counter cases

// Since this is mainly about Vue, <body> <div id="app"> <button class="left" @click="sub">-</button> <span>{{num}}</span> <button class="right" @click="add">+</button> </div> <script> var app = new Vue({ el: "#app", data: { num: 1 }, methods: { add: function () { if (this.num < 10) { this.num++; } else {alert(" no more! ") ) } }, sub: function () { if (this.num > 0) { this.num--; } else {alert(" No more!" ) } } } }) </script> </body>Copy the code

Conclusion:

  • Create Vue instance: EL set mount point, data set data, method set method

  • The PURPOSE of the V-ON directive is to bind events, abbreviated to @

  • The interior of the method gets the data in data through the this keyword

  • The V-HTML directive sets the innerHTML of an element