Vue.js- built-in instructions

Learning notes:Built-in instruction

Built-in instruction

Basic instruction


v-cloakNo expression is required, it will be removed from the bound HTML element at the end of compilation of the Vue instance, often with CSSdisplay: none;Cooperate with:

<div id="app" v-cloak>

When the network speed is slow and the Vue.js file has not been loaded, it will be displayed on the page{{message}}The DOM will not be replaced until Vue creates the instance and compiles the template, so the process screen will flash. Just add a CSS to solve this problem:

[v-cloak] {
    display: none;

V-cloak is a best practice to solve the problem of page flicker caused by slow initialization, which is very practical for simple projects.

In an engineering project, the HTML structure of the project is only emptydivElement, the rest is done by routing and mounting different components, which is no longer needed.v-cloak.


v-onceIs an instruction that does not require an expression. Its function is to define its element or component to render only once, including all child nodes of the element or component. After the first rendering, it will not be re-rendered with the change of data and will be regarded as static content.

v-onceIt is rarely used in business and may be used if further performance optimization is needed.

Conditional rendering instruction


The conditional instruction of Vue.js can render or destroy elements/components in DOM according to the value of expression.

v-else-ifFollow closelyv-if,v-elseFollow closelyv-else-ifOrv-ifWhen the value of the expression is true, the current element/component and all child nodes will be rendered and removed when false.

If more than one element is judged at a time, it can be built in Vue.js<template>A conditional instruction is used on the element, and the final rendered result will not include the element.

Vue is considering efficiency when rendering elements and will reuse existing elements as much as possible instead of re-rendering.

< pdata-height = “265” data-theme-id = “0” data-slug-hash = “kewymd” data-default-tab = “html, result” data-user = “whjin” data-embedded-version = “2” data-pen-title = “conditional rendering instruction” class=”codepen”>See the PenConditional rendering instructionby whjin (@whjin) onCodePen.</p>
<script async src=” …; ></script>

In the example, after typing the content, click the switch button. Although DOM has changed, what was typed in the input box has not changed but has been replaced.placeholderThe content and description of<input>Elements are reused.

Using Vue.jskeyAttribute allows you to decide whether to reuse elements or not.keyThe value of must be unique.

<input type="text" placeholder="输入用户名" key="name-input">

Give two<input>The elements have all increasedkeyAfter that, it will not be reused. What you type when switching types will also be deleted, however<label>Elements will still be reused because they have not been addedkeyProperty.


v-showThe usage of andv-ifBasically the same, butv-showIs to change the CSS properties of an elementdisplay.

Whenv-showThe value of the expression isfalseWhen elements are hidden, DOM structural elements are loaded with inline stylesdisplay:none;.

v-showNot in<template>Use on.

v-ifAndv-showThe choice of

v-ifAndv-showIt has similar functions, howeverv-ifIs the real conditional rendering, it will be appropriate according to the expressionDestroy or rebuildElements and bound events or subcomponents.

If the initial value of the expression isfalse, the element/component will not render initially and compilation will only begin when the condition becomes true for the first time.

Andv-showJust a simple CSS property switch, whether the condition is true or not, will be compiled.

In contrast,v-ifIt is more suitable for scenes where conditions do not change frequently, because its switching overhead is relatively large, whilev-showApplicable to frequent switching conditions.

List rendering instructionv-for

Basic usage

List rendering instructions are used when it is necessary to iterate through an array or enumerate an object for circular display.v-for. Its expressions need to be combinedinTo use, similar toitem in itemsThe form of.

List rendering is also supported withofReplaceinAs a delimiter, it is closer to the syntax of JavaScript iterators:

<li v-for="book of books">{{}}</li>

v-forThe expression for supports an optional parameter as the index of the current item.

<li v-for="(book,index) of books">{{index}} - {{}}</li>

SeparatorinBefore the statement using parentheses, the second item isbooksThe index of the current item.

Andv-ifSame,v-forIt can also be used in built-in labels.<template>On, render multiple elements.

In addition to arrays, the properties of objects can also be traversed.

When traversing object properties, there are two optional parameters: key name and index:

<div id="app">
        <li v-for="(value,key,index) of users">
            {{index}} - {{key}} - {{value}}

v-forYou can also iterate over integers:

<div id="app">
    <span v-for="n in 10">{{n}}</span>

Array update

The core of Vue is the two-way binding of data and views, which includes a set of methods to observe array changes. Using them to change arrays will also trigger view updates:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

Using the above methods will change the original array called by these methods.

The following methods will not change the original array:

  • filter()
  • concat()
  • slice()

They return a new array, and when using these non-mutating methods, the element group can be replaced by the new array.

When Vue detects an array change, it does not directly re-render the entire list, but reuses DOM elements to the maximum. In the replaced array, items with the same elements will not be re-rendered, so you can boldly replace the old array with the new one without worrying about performance.

It should be noted that in the following changed arrays, Vue cannot be detected and view update will not be triggered:

  • Setting items directly by index,app.books[3]={}
  • Modify the array length,app.books.length=1

To solve the first problem, the same effect can be achieved in two ways. The first is built-in Vue.setMethods:

Vue.set(app.books, 3, {
    name: '《CSS秘密花园》',
    author: '无名氏'

If you are using componentization in a webpack, Vue is not imported by default, then you can use it.this.$set.

Another method:app.books.splice(3,1,{})

Filtering and sorting

If you don’t want to change the original array and want to filter or sort through a copy of the array, you can use the calculation property to return the filtered or sorted array.