Let's talk about some commonly used built-in instructions in vue-Front-end Q&A-php.cn

Let's talk about some commonly used built-in instructions in vue

PHPz

Release： 2023-04-17 14:27:47

Original

707 people have browsed it

Vue is a popular JavaScript framework that provides many built-in instructions for operating DOM and data rendering.

The built-in directives of Vue will be explained below:

v-bind

The v-bind directive is used to bind the attribute values of DOM elements to data on the Vue instance. . This directive can be used with various attributes of DOM elements, including class, style, src, href, title, etc.

For example, the following code shows how to use v-bind to bind the class style of a news list:

<template>
  <div :class="{ &#39;news-active&#39;: isActive }">
    <ul>
      <li v-for="item in news">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      news: [
        { title: 'Vue.js 3.0 发布了' },
        { title: 'Vue 2.x 开发指南' },
        { title: '使用 Vuex 管理应用状态' }
      ]
    }
  }
}
</script>

Copy after login

In this example, <div :class="{ 'news-active': isActive }">Use the v-bind directive to bind a dynamic class style. A change in isActive status will update class="news-active" or remove the class.

v-if / v-else

The v-if and v-else directives are used to use conditional statements in rendering.

For example, the following code will determine whether to display a piece of text based on the value of isEnabled:

<template>
  <div>
    <p v-if="isEnabled">这段文本会在isEnabled为真时渲染</p>
    <p v-else>这段文本会在isEnabled为假时渲染</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isEnabled: true
    }
  }
}
</script>

Copy after login

When isEnabled is true, the One  element will be displayed; however, when isEnabled is false, a second  element will be displayed. This forms a very powerful conditional statement.

v-show

The v-show command is very similar to the v-if command. They are all used to show or hide DOM elements.

However, v-show is different from v-if in that it does not destroy DOM elements that do not need to be displayed. On the contrary, v-show just hides the DOM elements that need to be hidden through display:none.

For example, the following code shows an example of using the v-show directive:

<template>
  <div>
    <p v-show="isVisible">这段文本会根据isVisible的值显示或者隐藏</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

Copy after login

In this example, when isVisible is true, <p&gt ; elements will be displayed. When isVisible is false, the  element still exists in the DOM, but is invisible.

v-for

The v-for directive is used to render list data. It will traverse each item of the data source and then generate the corresponding DOM element.

For example, the following code will generate a news list and map each item in the news array to a DOM element:

<template>
  <ul>
    <li v-for="item in news">{{ item.title }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      news: [
        { title: 'Vue.js 3.0 发布了' },
        { title: 'Vue 2.x 开发指南' },
        { title: '使用 Vuex 管理应用状态' }
      ]
    }
  }
}
</script>

Copy after login

In this example , each <li> element obtains a news title through the v-for instruction.

v-model

The v-model directive binds Vue instance data to input components such as form inputs, check boxes, and radio buttons.

For example, the following code shows how v-model binds the contents of an input box to the message property of the Vue instance:

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

Copy after login

In this example, The initial value of the message attribute is rendered into a  element. However, when anything is entered in the input box, the message property is also updated.

v-on

The v-on directive is used to bind DOM events to methods on the Vue instance so that these methods can be executed when the event occurs.

For example, the following code shows how the v-on directive binds a click event to a button:

<template>
  <div>
    <button v-on:click="onClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

Copy after login

In this example, onClick The method will be executed when the button is clicked.

In addition to the click event, other common DOM events such as keydown, submit, mousemove, etc. can be used v -on binding.

v-bind:key

The v-bind:key directive is used to help Vue identify the rendering order and element updates of list data, thereby improving rendering performance.

For example, the following code will use the v-for directive to render a news list, and use the v-bind:key directive to dynamically bind the id of the list item:

<template>
  <ul>
    <li v-for="item in news" :key="item.id">{{ item.title }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      news: [
        { id: 1, title: 'Vue.js 3.0 发布了' },
        { id: 2, title: 'Vue 2.x 开发指南' },
        { id: 3, title: '使用 Vuex 管理应用状态' }
      ]
    }
  }
}
</script>

Copy after login

In this example , the id attribute of the list item is bound to the v-bind:key directive to ensure that each list item has a unique identifier.

Summary:

Vue’s built-in instructions provide developers with a series of convenient DOM operations and data rendering operations. Proficiency in these instructions will make it easier for developers to develop high-quality Vue applications.

The above is the detailed content of Let's talk about some commonly used built-in instructions in vue. For more information, please follow other related articles on the PHP Chinese website!