Vue template syntax

Three ways to write a template

Vue complete version, written in HTML

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

Vue full version, written in the options

<div id=app>
</div>
Copy the code
new Vue({ template: ` <div> {{n}} <button @click="add">+1</button> </div>`, Data: {n: 0} / / data can be changed to function the methods: {the add () {this. N + = 1}}}) $mount (' # app ') / / details: div # app will be replacedCopy the code

Vue incomplete version, with XXX. Vue file

Vue <template> <div> {{n}} < button@click ="add"> +1 </button> </div> </template> export default { data(){ return {n:0} }, {add(){this.n += 1}}} </script> <style>Copy the code

Reference in another file

Import Xxx from './ Xxx. Vue '// Xxx is an options object. h => h(Xxx) }).$mount('#app')Copy the code

Template syntax

Display content

expression
{{object.a}} // expression {{n + 1}} // can write any operation {{fn(n)}} // can call the function // if the value is undefined or null // another way to write <div V-text =" expression "></div>Copy the code
HTML content

Suppose data.x is hi

<div v-html="x"></div>Copy the code

Show {{n}}

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

Binding properties

Binding the SRC
<img v-bind:src="x" />
Copy the code
v-bind:Shorthand for:
<img :src="x" />
Copy the code
Binding objects
<div :style="{border: '1px solid red', height: 100}">Copy the code

The binding event

V - on: the event name
<button v-on:click="add"> </button> Add () <button V-on :click=" XXX (1)"> <button V-on :click="n+=1"> XXX </buttonCopy the code
abbreviations
<button @click="add">+1</button>
Copy the code

conditional

if... else
< div v - if = "x > 0" > x greater than 0 < / div > < div v - else - if = "x = = = 0" > x is 0 < / div > < div v - else > x < 0 < / div >Copy the code

cycle

For (value,key) in Object or array

< ul > < li v - for = "(u, index) in the users" : the key = "index" > index: {{index}}, value: {{u.n ame}} < / li > < / ul > < ul > < li v - for = ", value, name) in obj ": the key =" name "> attribute name: {{name}}, attribute values: {{name}} < / li > < / ul >Copy the code

: key = “index” has a bug

Show and hide

v-show
< div v - show = "n % 2 = = = 0" > < / div > / / n is even "n % 2 = = = 0" to true, displays, is false, do not displayCopy the code
Approximately equal
<div :style="{display :n%2===0 ? 'block' :'none'}"> n is evenCopy the code

Note that the visible element display is not only a block. For example, the display of table is table, and the display of Li is list-item

conclusion

Vue template features

  1. Using XML syntax

    Notice the difference between XML syntax and HTML syntax

    // XML with a backslash / <input name="username"> // HTML <input name="username" /> // HTML <input name="username" /> // XML // XML Empty tags can be closed directly on <div></div> // HTML <div /> // XMLCopy the code

  2. Insert the expression with {{}}

  3. DOM is manipulated using v-HTML, V-ON, V-bind, and other instructions

    Div. InnerHTML = x // Imperative programming <div V-html ="x"></div> // declarative programmingCopy the code

  4. Use V-if, V-for and other instructions to achieve conditional judgment and loop

Other instructions

v-model

v-slot

v-cloak

v-once

Directive Directive

instruction

In Vue, things that begin with v- are instructions, such as:

<div v-text="x"></div>

<div v-html="x"></div>

grammar

// v-instruction name: parameter = value, such as V-on :click=addCopy the code
  • If there are no special characters in the value, it can be unquoted
  • Some instructions have no parameters and values, such asv-pre
  • Some instructions have no value, such asv-on:click.prevent

The modifier

Some instructions support modifiers

@click.stop="add" // to prevent events from propagating/bubbling @click.prevent="add" // to prevent default actions @click.stop.prevent="add" // to bothCopy the code

What are the modifiers

  • The V-ON supports

    Key modifier

    .{ keycode | keyAlias }
Copy the code

    Event modifier

    .stop
.prevent
.capture
.self
.once
.passive
.native
Copy the code

    System modifier

    .ctrl
.alt
.shift
.meta
Copy the code

    • The exact modifier

    • Mouse button modifier

      .left
.right
.middle
Copy the code

  • V-bind supports some

    .prop. Camel. Sync // see the next section for detailsCopy the code

    The sync modifier

    Vue rules:

    The component cannot modify external data for props

    This.$emit can emit events and pass parameters

    $event gets the $emit parameter

    Click to see examples

    <Child :money. Sync ="total" v-on:update:money="total = $event"/>Copy the code

    For more on the.sync modifier, see another article I wrote, Vue: Understanding the.sync modifier for Vue in depth.

  • The V-Model supports

    .lazy
.number
.trim
Copy the code