Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to understand template syntax interpolation and instructions in Vue." Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to understand template syntax interpolation and instructions in Vue"!

Vue has a lot of template syntax especially easy to use, that is, write some template syntax defined by Vue in HTML, which can quickly display data, binding methods, etc. This is one of the reasons Vue is so quick to pick up.

1. template understanding

Let's first understand what a template is.

Template is dynamic html page, which contains some js syntax code

Vue template syntax is divided into two types, namely:

[Interpolation syntax] Double brace expression ("Mustache" syntax)[one]

[Command syntax] Command (Custom tag attributes starting with v-)[Many]

1. Interpolation syntax:

Function: Used to parse the tag body content and output data to the page

Writing: {{xxx}}, xxx is js expression, and you can directly read all attributes in data, you can call the method of the object

Note: Write js expression inside: js code with return value, not js statement

2. Command syntax:

Function: Used to parse tags (including tag attributes, tag body contents, binding events...)

For example: v-bind:href="xxx" or abbreviated as:href="xxx", xxx also needs to write js expression, and can directly read all attributes in data

Note: Vue has many commands in the form: v-????

Here are a few common command syntaxes.

2. Command syntax: mandatory data binding v-bind:

Function: Specify variable attribute values

complete writing

v-bind:xxx='yyy' // yyy will be executed as expression resolution

terse writing

:xxx='yyy' unidirectional data binding

Syntax: v-bind:href ="xxx" or abbreviated:href ="xxx"

Feature: Data can only flow from data to page

bidirectional data binding instruction v-model

Syntax: v-mode:value="xxx" or abbreviated v-model="xxx"

Features: Data can flow not only from data to page, but also from page to data.

3. Command syntax: bind event listener v-on:

Function: bind callback function of specified event name

complete writing

v-on:click='xxx'v-on:keyup='xxx'(Parameters)'v-on:keyup.enter='xxx'

terse writing

@click='xxx'@keyup='xxx'@keyup.enter='xxx'4. v-text and v-html

v-text

Effect: render text content to the node it is in.

Difference from interpolation syntax: v-text replaces the contents of the node,{{xx}} does not.

v-html

1. Function: render content containing html structure to specified node.

2. Differences from interpolation syntax:

(1).v-html replaces everything in the node,{{xx}} does not.

(2).v-html recognizes html structure.

3. Serious attention: V-html has security problems!!

(1). Dynamically rendering arbitrary HTML on a website is dangerous and can easily lead to XSS attacks.

(2). Always use v-html for trusted content, never for user-submitted content!

1. braces expression

{{msg}}

{{msg.toUpperCase()}}

2. Command 1: Force data binding

3. Instruction 2: Binding event listening test1 test1 test2 test2 new Vue({ el: '#app', data: { msg: 'I Will Back! ', imgUrl: "https://cn.vuejs.org/images/logo.png" }, methods: { test1() { alert('heheh'); }, test2(content){ alert(content); } } })

5. conditional rendering instruction

Remove Tags Delete

v-if

v-else

Written:

v-if="Expression"

v-else-if="Expression"

v-else="Expression"

Suitable for: scenes with low switching frequency. Features: DOM elements that are not displayed are removed directly. Note: v-if can be used in conjunction with:v-else-if, v-else, as long as the structure cannot be "broken."

Add Style Hide (display: none)

v-show

Write: v-show="expression" for: scenes with high switching frequency. Features: DOM elements that are not displayed are not removed, only hidden with styles

[Note] When using v-if, the element may not be obtained, but using v-show must be obtained.

Compare v-if with v-show

v-if is to control whether elements are loaded onto the page (with performance overhead) v-show is to control the display and hiding of elements (loaded once at initial creation)

If you need to switch frequently v-show is better

When the condition is not true, all child nodes of v-if will not be resolved

succeeded

failed

succeeded again

failed again

switching new Vue({ el: '#demo', data: { ok: false, } })

6. summary

Some common commands

v-text : Update textContent of an element

v-html : update innerHTML of elements

v-if : If true, the current tag will be output to the page

v-else: If false, the current tag will be output to the page

v-show : Control display/hide by controlling display style

v-for : Traverse through arrays/objects

v-on : bind event listening, commonly abbreviated as @

v-bind : force binding parsing expression, v-bind can be omitted

v-model : bidirectional data binding

ref : Registers a unique identifier for an element, which the vue object accesses via the $refs attribute

v-cloak : use it to prevent flash expressions, in conjunction with css: [v-cloak] { display: none }

At this point, I believe everyone has a deeper understanding of "how to understand template syntax interpolation and instructions in Vue," so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.