1. Overview of template syntax

(1) how to understand front-end rendering

Fill the data into HTML tags to generate static HTML content

2. Front end rendering mode

(1) native JS splicing string

(2) use the front-end template engine

(3) use Vue specific template syntax

3.Vue template syntax

(1) interpolation expression

(2) instruction

(3) event binding

(4) attribute binding

(5) style binding

(6) branch circulation structure

4. Instructions

(1) what is a custom attribute?

(2) the essence of an instruction is a custom attribute

(3) format of instruction: start with v -

5. Instruction introduction

(1)v-cloak instruction usage

Problems with interpolation expressions: when the browser is stuck and the page is refreshed, double braces will appear

Solution: use the v-cloak instruction

The principle to solve this problem: first hide the content of the style, then replace the value in memory, and then display the final effect

(2) data binding instruction

(2.1)v-text fill in plain text

It is more concise than interpolation expression

　　　　(2.2)v-html

It has its own problems and will be attacked by XSS

The internal data of this website can be used, and the data from third parties cannot be used

(2.3)v-pre filling original information

Skip the compilation process and display the original information

(3) data response

(3.1) how to understand data response?

Data response in HTML5: changes in style due to changes in screen size

Data response: (the change of data leads to the change of page content)

(3.2) what is data binding?

Populate data into labels

(3.3)v-once is compiled only once

No longer responsive after displaying content

(4) bidirectional data binding instruction

(4.1) what is bidirectional data binding

The change of page content causes the change of model data

The change of model data causes the change of page content

(4.2) bidirectional data binding instruction v-model

1 <input type="text" v-model='msg'>

The value of v-model is the value of model data

(4.3)MVVM design idea

　　　　　　M(Model),V(View),VM(View-Model)

　　　　　　View(DOM)　　---(DOM Listener)--->　　　Model(JavaScript Object)

　　　　　　　　　　　　　 <---(Data Bindings)---

January 14, 2022 08:35:02

(5) event binding

(5.1) how does Vue handle events?

v-on instruction usage

1 <button v-on:click='num++'>click</button>

v-on abbreviation

1 <button @click='num++'>Click 1</button>

(5.2) calling method of event function

Use methods to write event functions in a defined Vue instance

Direct binding function name

1 <button v-on:click='handle'>Click 2</button>

Call function

1 <button v-on:click='handle()'>Click 3</button>

(5.3) event function parameter transfer

Common parameters and event objects

1 <button v-on:click='handle2(123,456,$event)'>Click 2</button>　　　　　

(5.5) key modifier

　　　　　　. enter key

1 <input type="text" v-model='pwd' v-on:keyup.enter='handleSubmit'>

　　　　　　. delete key

1 <input type="text" v-model='uname' v-on:keyup.delete='clearContent'>

(5.6) custom key modifier

Global config Keycodes object

1 Vue.config.keyCodes.aaa = 65;

(5.7) attribute binding

v-bind instruction usage

1 <a v-bind:href="url">Baidu</a>

Abbreviation

1 <a :href="url">Baidu 1</a>

Analysis of the underlying principle and implementation of v-model

1 <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>

(5.8) style binding

class style processing

Object syntax

1 <div v-bind:class="{active:isActive,error:isError}">Test style</div>

Array syntax

1 <div v-bind:class="[activeClass,errorClass]">Test style</div>

style processing

Object syntax

1 <div v-bind:style='{border:borderStyle, width:widthStyle, height:heightStyle}'></div>

Array syntax

1 <div v-bind:style='[objStyles,overrideStyles]'></div>

(5.9) branch structure

　　　　　　　v-if

　　　　　　　v-else

　　　　　　　v-else-if

V-show: the principle of v-show: controls whether the element style displays display:none

1 <div v-if='score>=90'>excellent</div>
2 <div v-else-if='score<90 && score >=80'>good</div>
3 <div v-else-if='score<80 && score >60'>commonly</div>
4 <div v-else>fail,</div>

The difference between v-show and v-if

(1)v-if controls whether elements are rendered to the page

(2)v-show controls whether the element is displayed (rendered to the page)

(5.10) circulation structure

v-for traversal array

1 <li v-for='item in fruits'>{{item}}</li>
2 <li v-for='(item,index) in fruits'>{{item + '-------' + index}}</li>

Function of key: help vue distinguish different elements, so as to improve performance

1 <li :key='item.id' v-for='(item,index) in fruits'>{{item + '-------' + index}}</li>

v-for traversal object

<div v-for='(value,key,index) in obj'>{{value + '---' + key + '---' + index}}</div>

v-for and v-if are used together

1 <div v-if='value==12' v-for='(value,key,index) in obj'>{{value + '---' + key + '---' + index}}</div>