There are three ways to write the template

Vue complete version, written in HTML

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

Vue full version, written in the options

//.html <div id="app"> </div> //.js new Vue({ template:' <div> {{n}} <button @click="add">+1</button> </div> ', $mount('#app') {// add(){this.n+=1}}}).$mount('#app') {// Add (){this.n+=1}})Copy the code

Vue incomplete version, with XXX. Vue file

//.vue <template> XML <div class="red"> {{n}} < button@click ="add">+1</button> </div> </template> <script> export default { Return {n:0}}, methods:{add() {this.n+=1}}} </script> <style scoped>. red; } </style> //.js import xxx from './xxx.vue' console.log(Demo) new Vue({ el:'#app', render(h) { return h(xxx) } })Copy the code

XML is different from HTML

XML has closed tags

//XML <input name="username" /> Must add / <div /> empty div, can be self-closedCopy the code

What syntax is in the Vue template

Display content

expression{{}}

{{ obj.a }}By default, go to obj. A in data and display it on the page
{{ n+1 }}Can write any operation, addition, subtraction, multiplication and division (if else not supported)
{{ fn(x) }}You can write function calls, by defaultmethodsI’m looking for this function
Not displayed if the value is undefined or null

{{}} also equivalent to

HTML content

Suppose data.x is hi

tells Vue that the HTML text of the div is the value of the variable x, which can be defined in data: “hi“, then the page will appear in bold HI

Just want to show {{n}}

I just want the user to see {{n}}

V-pre doesn’t compile the template, so what’s written in the template is displayed, right

Binding properties

Binding the SRC

y is a variable with the value of an address string short:

Binding objects

<div :style="{border:'1px solid red',width:'50px',height:'50px'}">Copy the code

The binding event

< button@click =”add”>+1

< button@click =”n+=1″>

Expression:

conditional

< div v - if = "z" (> 0 > z is greater than 0 < / div > < div v - else - if = "z = = = 0" > z equals 0 < / div > < div v - else > z is less than 0 < / div >Copy the code

cycle

For (value,key) in Object or array

<ul> <li V -for="(u,index) in users" :key="index"> // U indicates value, that is, each value in the array, and index indicates the subscript. // Each V-for must be followed by a :key, otherwise an error will be reported. Key is index by default, but index is usually not written. Written for u.i d (general use do not overlap value) index such as: {{index}}, value: {{u.n ame}} < / li > < / ul > < ul > < li v - for = "(the value, the name) in obj" : the key = "name" > Property name: {{name}}, attribute values: {{value}} < / li > < / ul > pit warning: key = "index" has a bugCopy the code

V -for must be followed by key

Show, hide

<div v-show="n%2===0">n is even, values are {{n}}</div>

If the expression following v-show is true, the div text is displayed; If it be false, hide it

n is even and the value is {{n}}

Note:

The visible element display has more than just blocks
For example, display of table is table
For example, li’s display is list-item

Directive Directive

V-html, V-model, V-slot, V-once, V-pre are instructions, things that start with v-

grammar

V - Instruction name: Parameter = value 如 v-on:click=add
If there are no special characters in the value, it is not quoted.
Some instructions have no parameters and values, such asv-pre.v-once
Some instructions have no value, such asv-on:click.preventBlock click’s default event

Supplementary knowledge:

<div v-html="x"></div>// declarative programming, where x refers to the corresponding value of div.innerhtml ='x'// imperative programmingCopy the code

The modifier

The modifier is a special suffix indicated by a semicontal period. Used to indicate that an instruction should be bound in a particular way. For example, the.prevent modifier tells the V-ON directive to call event.preventDefault() for triggered events:

Modifier for V-ON

Commonly used: stop, prevent, and keypress.enter

@click.stop=’add’ prevents event propagation/bubbling and executes add when clicked
@click.prevent=’add’ blocks the default action and executes the add function when clicked

@click.stop.prevent=’add’ prevents both bubbling and default actions

. {keyCode | keyAlias} keyCode key code, each key on the keyboard have their own key code keyAlias is yards of alias

< input@keypress =”press” /> Execute press if there is a keyboard press event in the input box

press(e) { console.log(e); If (e.keycode === 13) {console.log(" user hit enter "); }}Copy the code

Vue is shorthand for keycode modifiers

< input@keypress. 13=”press” /> You can specify that the key with the keyboard code 13 is pressed to execute the corresponding function.

But sometimes numbers are hard to remember, so the alias keyAlias

Modifier for V-bind

Most important: Sync

In some cases, we may need to “bidirectional bind” a prop. Unfortunately, true bidirectional binding creates maintenance problems, because child components can change parent components with no obvious source of change on either side.

This is why we recommend replacing the schema triggering event with update:myPropName. $emit(‘update:title’, newTitle). This.$emit can fire events and pass arguments. This can be omitted.

The parent component can then listen for that event and update a local data property as needed. Such as:

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>
Copy the code

$event gets the arguments to this.$emit.

Sync modifier:

Shorthand < text – the document: the title. The sync = “doc. The title” > < / text – document >

Summary: The main features of Vue templates are

Use XML syntax instead of HTML
use{{}}Insert expression
usev-html,v-on,v-bindSuch instructions manipulate the DOM
usev-if,v-forAnd other instructions to achieve conditional judgment and loop

Vue template