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

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

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

v-bind

<p>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.

<p>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>

<p>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

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

<p>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>

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

v-show

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

<p>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.

<p>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>

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

v-for

<p> 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.

<p>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>

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

v-model

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

<p>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>

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

v-on

<p>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.

<p>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>

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

<p>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

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

<p>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>

<p>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.

<p>Summary:

<p>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!