This is the fifth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

When using

Next we’ll look at all of the general instruction usage, which may not be used at this point, but it’s important to know.

V-text Updates the text

Update the textContent of the element. To update the textContent of a section, use the double-parenthesis syntax {{}}(also known as Mustache interpolation).

<span v-text="msg"></span>
<! -- equivalent to -->
<span>{{msg}}</span>
Copy the code

V – update HTML HTML

Update the innerHTML of the element. Note: The content is inserted as normal HTML – will not be compiled as a Vue template. If you are trying to use a V-HTML composite template, you may want to reconsider using components instead.

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

V-show Shows hidden

Toggles the value of the element’s display CSS property based on the true or false value of the expression.

When the condition is true, v-show does nothing internally. When the condition is false, v-show gives the current element display: none;

<div v-show="visible"></div>
Copy the code

V -if, V -else-if, V -else conditions

Conditionally render elements based on the true or false values of the expression. The element and its data binding/component are destroyed and rebuilt during the switch. If the element is

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
Copy the code

V – a for loop

Template loops, similar to the for in function in JavaScript. You can pass an array or an object

<div v-for="item in items">{{ item.text }}</div>
<div v-for="(item, index) in items"></div>
Copy the code

The default behavior for V-for is to try to modify elements in place rather than move them. To force it to reorder elements, you need to provide a sort hint with a special attribute key:

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>
Copy the code

V-on binding event

Bind event listeners. The event type is specified by the parameter. The expression can be the name of a method or an inline statement, or it can be omitted if there are no modifiers.

When used on normal elements, you can only listen for native DOM events. When used on custom element components, you can also listen for custom events triggered by child components.

<! -- Method processor -->
<button v-on:click="doThis"></button>

<! -- Dynamic event -->
<button v-on:[event] ="doThis"></button>

<! -- Inline statements -->
<button v-on:click="doThat('hello', $event)"></button>

<! - for - >
<button @click="doThis"></button>

<! -- Dynamic Event abbreviation -->
<button@ [event] ="doThis"></button>

<! -- Stop bubbling -->
<button @click.stop="doThis"></button>

<! -- Block default behavior -->
<button @click.prevent="doThis"></button>

<! -- block default behavior, no expression -->
<form @submit.prevent></form>

<! -- string modifier -->
<button @click.stop.prevent="doThis"></button>

<! -- key modifier, key alias -->
<input @keyup.enter="onEnter" />

<! -- Click callback to trigger only once -->
<button v-on:click.once="doThis"></button>

<! -- Object syntax -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
Copy the code

V-bind passes data

Dynamically bind one or more attributes, or a component prop, to an expression.

<! -- bind attribute -->
<img v-bind:src="imageSrc" />

<! -- Dynamic attribute name -->
<button v-bind:[key] ="value"></button>

<! - for - >
<img :src="imageSrc" />

<! -- prop binding." Prop "must be declared in my-Component -->
<my-component :prop="someThing"></my-component>

<! -- pass the parent's props to the child with $props -->
<child-component v-bind="$props"></child-component>
Copy the code

V-model bidirectional binding

Create a bidirectional binding on a form control or component.

<input v-model="message" />
<p>Message is: {{ message }}</p>
Copy the code

V – slot slot

Provide a named slot or a slot to receive a prop.

<! -- named slot -->
<base-layout>
  <template v-slot:header>
    Header content
  </template>

  <template v-slot:default>
    Default slot content
  </template>

  <template v-slot:footer>
    Footer content
  </template>
</base-layout>

<! -- Named slot to receive prop -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<! -- receives the default slot for prop, using deconstruction -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>
Copy the code

V – pre primitive

Skip the compilation of this element and its children. Can be used to display the original Mustache tag. Skipping a large number of nodes without instructions speeds up compilation.

<span v-pre>{{ this will not be compiled }}</span>
Copy the code

V – cloak concealed

This directive remains on the element until the associated component instance is finished compiling. Used together with CSS rules such as [v-cloak] {display: none}, this directive hides uncompiled {{double parentheses}} tags until the component instance is ready.

[v-cloak] {
  display: none;
}
Copy the code
<div v-cloak>
  {{ message }}
</div>
Copy the code

When the network speed is slow, the Vue. Js file has not been loaded, and the words {{message}} will be displayed on the page. The DOM will not be replaced until Vue creates an instance and compairs the template, so the screen will flash during this process, and CSS is needed to solve this problem.

When we use Webpack and Vue-Router, there is only an empty div element in the project. The rest of the content is done by routing to mount different components, so the V-cloak is not required.

V-once only renders once

Render elements and components only once. In subsequent re-rendering, the element/component and all of its children are treated as static content and skipped. This can be used to optimize update performance.

<! -- single element -->
<span v-once>This will never change: {{msg}}</span>
<! -- have child elements -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<! - component - >
<my-component v-once :comment="msg"></my-component>
<! -- 'v-for' command -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>
Copy the code

The literature

  • Vue3 instruction