vue에서 일반적으로 사용되는 내장 명령어에 대해 이야기해 보겠습니다.-프런트엔드 Q&A-php.cn

Vue는 DOM 작동 및 데이터 렌더링을 위한 많은 내장 지침을 제공하는 인기 있는 JavaScript 프레임워크입니다.

Vue에 내장된 명령은 아래에 설명되어 있습니다.

v-bind

v-bind 명령은 DOM 요소의 속성 값을 Vue 인스턴스의 데이터에 바인딩하는 데 사용됩니다. 이 지시어는 클래스, 스타일, src, href, 제목 등을 포함한 DOM 요소의 다양한 속성과 함께 사용할 수 있습니다.

예를 들어 다음 코드는 v-bind를 사용하여 뉴스 목록의 클래스 스타일을 바인딩하는 방법을 보여줍니다.

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

로그인 후 복사

이 예에서는 <div :class="{ 'news-active': isActive } ">동적 클래스 스타일을 바인딩하려면 v-bind 지시어를 사용하세요. isActive 상태가 변경되면 class="news-active"가 업데이트되거나 클래스가 제거됩니다. <div :class="{ 'news-active': isActive }">用v-bind指令绑定了一个动态的class样式。isActive状态的改变将会更新class="news-active"或者移除该class。

v-if / v-else

v-if和v-else指令被用来在渲染中使用条件语句。

例如，下面的代码将会根据isEnabled的值来决定是否展示一段文本：

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

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

로그인 후 복사

当isEnabled为真时，第一个元素将会显示；然而，当isEnabled为假时，第二个元素将会显示。这形成了一个很强大的条件语句。

v-show

v-show指令和v-if指令很类似。它们都是用来展示或者隐藏DOM元素的。

然而，v-show不同于v-if，因为它不会摧毁不需要显示的DOM元素。相反，v-show只是通过display:none来隐藏需要隐藏的DOM元素。

例如，下面的代码展示了使用v-show指令的例子：

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

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

로그인 후 복사

这个例子中，当isVisible为真时，元素将会显示。当isVisible为假时，元素仍然存在于DOM中，但是不可见。

v-for

v-for指令被用来渲染列表数据。它会遍历数据源的每一项，然后生成相应的DOM元素。

例如，下面的代码将会生成一个新闻列表，并将news数组中的每一项映射为一个DOM元素：

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

로그인 후 복사

在这个例子中，每个<li>元素都通过v-for指令获取了一个新闻标题。

v-model

v-model指令绑定Vue实例数据到表单输入、复选框、单选按钮等输入组件。

例如，下面的代码展示了v-model如何绑定一个输入框的内容到Vue实例的message属性上：

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

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

로그인 후 복사

在这个例子中，message属性的初始值被渲染到一个元素中。然而，当在输入框中输入任何内容时，message属性也会被更新。

v-on

v-on指令用于绑定DOM事件到Vue实例上的方法，以便于在事件发生时执行这些方法。

例如，下面的代码展示了v-on指令如何绑定一个click事件到一个按钮上：

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

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

로그인 후 복사

在这个例子中，onClick方法会在按钮被点击时执行。

除了click事件，其他常见的DOM事件比如keydown、submit、mousemove等都可以用v-on绑定。

v-bind:key

v-bind:key指令用于帮助Vue识别列表数据的渲染顺序和元素更新，从而提高渲染性能。

例如，下面的代码将会使用v-for指令渲染一个新闻列表，使用v-bind:key指令将动态的绑定列表项的id：

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

로그인 후 복사

在这个例子中，列表项的id

v-if/v-else

v-if 및 v-else 지시문은 렌더링에서 조건문을 사용하는 데 사용됩니다.

예를 들어, 다음 코드는 isEnabled 값을 기반으로 텍스트를 표시할지 여부를 결정합니다. 🎜rrreee🎜 isEnabled가 true이면 첫 번째 요소가 표시됩니다. 그러나 <code>isEnabled가 false인 경우 두 번째

<p> 요소가 표시됩니다. 이는 매우 강력한 조건문을 형성합니다. 🎜🎜v-show🎜🎜v-show 명령은 v-if 명령과 매우 유사합니다. 이들은 모두 DOM 요소를 표시하거나 숨기는 데 사용됩니다. 🎜🎜그러나 v-show는 표시할 필요가 없는 DOM 요소를 파괴하지 않는다는 점에서 v-if와 다릅니다. 반대로 v-show는 display:none을 통해 숨겨야 하는 DOM 요소를 숨깁니다. 🎜🎜예를 들어 다음 코드는 v-show 지시문을 사용하는 예를 보여줍니다. 🎜rrreee🎜이 예에서 isVisible이 true인 경우 <p> 요소가 표시됩니다. isVisible이 false인 경우 <p> 요소는 DOM에 계속 존재하지만 표시되지 않습니다. 🎜🎜v-for🎜🎜v-for 지시문은 목록 데이터를 렌더링하는 데 사용됩니다. 데이터 소스의 각 항목을 순회한 다음 해당 DOM 요소를 생성합니다. 🎜🎜예를 들어 다음 코드는 뉴스 목록을 생성하고 news 배열의 각 항목을 DOM 요소에 매핑합니다. 🎜rrreee🎜이 예에서 각 &lt The ;li> 요소는 모두 v-for 지시어를 통해 뉴스 제목을 얻습니다. 🎜🎜v-model🎜🎜 v-model 지시어는 Vue 인스턴스 데이터를 양식 입력, 확인란 및 라디오 버튼과 같은 입력 구성 요소에 바인딩합니다. 🎜🎜예를 들어 다음 코드는 v-model이 입력 상자의 내용을 Vue 인스턴스의 <code>message 속성에 바인딩하는 방법을 보여줍니다. 🎜rrreee🎜이 예에서는 message속성의 초기 값은 <p> 요소로 렌더링됩니다. 그러나 입력 상자에 무엇이든 입력하면 message 속성도 업데이트됩니다. 🎜🎜v-on🎜🎜 v-on 지시어는 DOM 이벤트를 Vue 인스턴스의 메서드에 바인딩하여 이벤트가 발생할 때 이러한 메서드가 실행될 수 있도록 하는 데 사용됩니다. 🎜🎜예를 들어 다음 코드는 v-on 지시어가 click 이벤트를 버튼에 바인딩하는 방법을 보여줍니다. 🎜rrreee🎜이 예에서는 onClick 메서드가 실행됩니다. 버튼을 클릭했을 때. 🎜🎜click 이벤트 외에도 keydown, submit, mousemove 등과 같은 기타 일반적인 DOM 이벤트 . v -on 바인딩과 함께 사용할 수 있습니다. 🎜🎜v-bind:key🎜🎜v-bind:key 지시문은 Vue가 목록 데이터의 렌더링 순서와 요소 업데이트를 식별하여 렌더링 성능을 향상시키는 데 사용됩니다. 🎜🎜예를 들어 다음 코드는 v-for 지시문을 사용하여 뉴스 목록을 렌더링하고 v-bind:key 지시문을 사용하여 목록 항목의 ID를 동적으로 바인딩합니다. 🎜rrreee🎜이 예에서  목록 항목의 id

속성은 v-bind:key 지시문에 바인딩되어 각 목록 항목이 고유한 식별자를 갖도록 합니다. 🎜🎜요약: 🎜🎜Vue의 내장 지침은 개발자에게 일련의 편리한 DOM 작업 및 데이터 렌더링 작업을 제공합니다. 이러한 지침을 숙지하면 개발자가 고품질 Vue 애플리케이션을 더 쉽게 개발할 수 있습니다. 🎜

위 내용은 vue에서 일반적으로 사용되는 내장 명령어에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!