There are three ways to write the template

1. Complete Vue, written in HTML

<html>
  <body>
    <div id=xxx>
      {{n}}
      <button @click="add"> +1 </button>
    </div>
  </body>
</html>
Copy the code
New Vue ({el: '# XXX', data: {n: 0}, / / data can be changed to function the methods: {the add () {}}})Copy the code

2. Vue complete version, written in the new Vue template

<div id=app>  </div>
Copy the code
New Vue({template: '<div> {{n}} <button @click="add">+1</button> </div>', data: {n: 0}, // data: {n: 0}) {the add () {this. N + = 1}}}) $mount (' app ') / / pay attention to a detail: div # app will be replacedCopy the code

3. Vue incomplete version, with XXX. Vue file

Note that the syntax in template is not HTML, but XML

Methods of presenting content

  • expression
{{fn(n)}} can call the function if the value is undefined or null. <div v-text=" one of the three ways "></div>Copy the code

Suppose I wanted to display the tags that come with HTML, such as strong, I, B, and so on

Can be written as

<div v-html="x"></div> V-html can display its own styleCopy the code

Suppose I wanted to display {{}}

  • V-pre does not compile templates
<div v-pre>{{ n }}</div>
Copy the code

Binding properties

  • Binding the SRC
<img v-bind: SRC ="x" />Copy the code
  • Bind the object to the div and write the style
<div :style="{border: '1px solid red', height:100}"> </divCopy the code

The binding event

conditional

cycle

Note: v-for must be followed by a :key, otherwise there will be a warning

Show and hide

conclusion

  • The main features of Vue templates are
  1. Use XML syntax (not HTML)
  2. Insert the expression with {{}}
  3. usev-html v-on v-bindSuch instructions manipulate the DOM
  4. usev-if v-forAnd other instructions to achieve conditional judgment and loop

instruction

The modifier

  • The ones in red need to be memorized and used