Detailed introduction to some commonly used instructions in vue

Vue is a popular JavaScript framework that is widely used in front-end development. Directives are an important concept in the Vue framework, which provide a declarative way to deal with DOM elements. Vue's instruction set contains a series of commonly used instructions. The following is a detailed introduction to these instructions.

1. Interpolation instruction

The interpolation instruction is the most basic instruction in Vue. It is used to insert data from a Vue instance into a DOM element. The format of the interpolation command is "{{}}", and "{{}}", "v-text" and "v-html" can be used.

1. "{{}}"
   "{{}}" is the most basic interpolation instruction in Vue, which can directly insert data from the Vue instance into the DOM element. For example:

<div>{{message}}</div>

In the Vue instance, set the message attribute to "Hello Vue!", then the above code will output "Hello Vue!".

2. "v-text"
   The "v-text" command has a similar function to "{{}}". It can also insert data from the Vue instance into the DOM element. However, unlike "{{}}", the "v-text" directive can solve the flickering problem in browser rendering caused by data binding. For example:

<div v-text="message"></div>

In the Vue instance, set the message attribute to "Hello Vue!", then the above code will also output "Hello Vue!".

3. "v-html"
   The "v-html" directive can insert data from a Vue instance into a DOM element as HTML code. For example:

<div v-html="message"></div>

In the Vue instance, set the message attribute to "Hello Vue!", then the above code will output "Hello Vue!" and the text part will be added thick.

2. Conditional Rendering

The conditional rendering instruction is used to switch the visibility of elements in DOM elements based on the value of an expression.

1. "v-if"
   The most commonly used conditional rendering instruction is "v-if". It determines whether to display the corresponding DOM element based on the value of the expression. For example:

<div v-if="isShow">Hello Vue!</div>

In the Vue instance, set the isShow attribute to true, then the above code will display "Hello Vue!", set the isShow attribute to false, and the DOM element will no longer be displayed.

2. "v-else"
   The "v-else" directive must follow the "v-if" directive on the same element, used when the "v-if" expression is The content displayed when false. For example:

<div v-if="isShow">Hello Vue!</div>
Vue is so great!

In a Vue instance, if the isShow attribute is true, the first DOM element will display "Hello Vue!", otherwise the second DOM element will display "Vue is so great !".

3. "v-show"
   The "v-show" command is similar to the "v-if" command and can also control the display and hiding of elements. However, unlike the "v-if" directive, the "v-show" directive is always retained in the DOM element and only controls the element's visibility by setting the element's "style" attribute. For example:

<div v-show="isShow">Hello Vue!</div>

In the Vue instance, if the isShow attribute is set to true, the above element will be displayed, and if the isShow attribute is set to false, the element will be hidden.

3. Loop Rendering

The loop rendering instruction is used to render array or object data into DOM elements.

1. "v-for"
   The most commonly used loop rendering instruction is "v-for". It can loop through an array or object and render the data within it into DOM elements. For example:

<ul>
    <li v-for="item in items">{{ item.name }}</li>
</ul>

In the Vue instance, set the items attribute to an array containing multiple {name: value} objects, then the above code will render multiple list items, each list item contains The text of a name attribute.

2. Index of "v-for"
   If you need to get the sequence number of the loop, you can use the second parameter of the "v-for" command. For example:

<ul>
    <li v-for="(item, index) in items">{{ index }} - {{ item.name }}</li>
</ul>

In a Vue instance, if the above code is applied to an items array containing 2 objects, two list items will be rendered, and each list item will display the item in the array. The index in and the name attribute of the item.

4. Event Binding

The event binding instruction is used to bind event listeners on DOM elements and call methods in the Vue instance when an event occurs.

1. "v-on"
   The most commonly used event binding directive is "v-on", which is used to bind event listeners on DOM elements. For example:

<button v-on:click="onClick"></button>

In the Vue instance, define a method named "onClick", then the above code means that the "onClick" method is called when the button is clicked.

2. Abbreviation of "v-on"
   There is also an abbreviation for the "v-on" command, which is the "@" symbol. For example:

<button @click="onClick"></button>

In the Vue instance, define a method named "onClick", then the above code means that the "onClick" method is called when the button is clicked.

5. Two-way data binding

The binding instruction is used to two-way bind the form elements and the data in the Vue instance.

1. "v-model"
   The most commonly used binding instruction is "v-model", which can two-way bind the value of the form element to the data in the Vue instance. For example:

<input v-model="message">

In the Vue instance, when the above code is applied to a property named "message", the value of the input box is bidirectionally bound to the value of the "message" property.

6. Calculated properties

计算属性用于根据Vue实例中的数据动态生成新的属性，从而方便DOM元素的渲染。

1. "computed"
   最常用的计算属性指令是"computed"，它可以自动追踪所依赖的数据，并在数据变化时更新该属性的值。例如：

Vue.component('my-component', {
    template: '<div>{{ reversedMessage }}</div>',
    data: {
        message: 'Hello Vue!'
    },
    computed: {
        reversedMessage: function () {
            return this.message.split('').reverse().join('')
        }
    }
})

在定义了一个名为"reversedMessage"的计算属性后，Vue会自动追踪message属性的变化，并在message变化时调用计算属性的计算函数，重新生成reversedMessage属性的值。

以上是Vue中常用的指令集的介绍，这些指令可以帮助我们更轻松地处理DOM元素的生成和渲染，提高开发效率。

The above is the detailed content of Detailed introduction to some commonly used instructions in vue. For more information, please follow other related articles on the PHP Chinese website!