웹 프론트엔드 JS 튜토리얼 Vue 내장 명령어 사용 지침

Vue 내장 명령어 사용 지침

May 02, 2018 pm 01:59 PM
사용 지침 내장 지침

이번에는 Vue 내장 명령어 사용 지침을 가져왔습니다. Vue 내장 명령어 사용 지침에 대한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

지시문은 v- 접두사가 있는 특수 속성입니다. 지시문의 역할은 표현식 값이 변경될 때 관련 효과를 DOM에 반응적으로 적용하는 것입니다.

내장 명령

1. v-bind: DOM 기능에 응답하고 업데이트합니다(예: v-bind:href v-bind:class v-bind:title 등).

주요 사용법 속성을 바인딩하는 것입니다.

2의 속성을 동적으로 업데이트합니다. v-on: DOM 이벤트를 수신하는 데 사용됩니다. 예: v-on:click v-on:keyup

그런데, 메소드와 이벤트에 대해 이야기해 봅시다 2.1 @click 표현식은 직접

JavaScript

문을 사용할 수도 있고, Vue 인스턴스의 메소드 옵션에 함수 이름이 될 수도 있습니다.

2.2 메소드 및 이벤트:

Vue는 이벤트가 버블링되거나 링크가 열리는 것을 방지할 수 있는 특수 변수 $event를 제공합니다.

  <p @click="stopClick1(&#39;stop1&#39;,$event)">
      <p @click="stopClick2(&#39;stop2&#39;,$event)">
        <p @click="stopClick3(&#39;stop3&#39;,$event)">阻止冒泡</p>
      </p>
    </p>
  </p>
methods:{
    stopClick3: function(message, event){
      console.log(message);
      event.stopPropagation();  //阻止冒泡
    },
    stopClick2: function(message, event){
      console.log(message);
    },
    stopClick1: function(message, event){
      console.log(message);
    }
}
로그인 후 복사

2.3 수정자:

바운드 이벤트 뒤에 작은 원 추가 수정자를 사용하려면 "." 뒤에 접미사를 클릭하세요.

위 버블링 이벤트는 직접 사용자 수정자로 작성할 수 있습니다.

<p @click.stop="stopClick3(&#39;stop3&#39;)">阻止冒泡</p>  //不用通过$event事件再来写了
로그인 후 복사

일반적으로 사용되는 일부 수정자는 다음과 같습니다.

• .stop

• .prevent

• .capture

• .self

• .once

< !一阻止单击事件冒泡一〉
<a @click.stop=”handle "></a>
〈!一修饰符可以串联一〉
<a @click.stop.prevent=” handle ” ></a>
〈!一添加事件侦听器时使用事件捕获模式一〉
<p @click . capture=”handle ”> ... </p>
〈!一只当事件在该元素本身(而不是子元素) 触发时触发回调一〉
<p @click.self=” handle ”> ... </p>
< !一只触发一次,组件同样适用一〉
<p @click.once=” handle ”> ... </p>
로그인 후 복사

양식 요소에서 키보드 이벤트를 모니터링할 때 특정 키를 눌렀을 때만 메서드를 호출하는 등의 키 수정자를 사용할 수도 있습니다.

< !一只有在keyCode 是13 时调用vm.submit()一〉
<input @keyup.13 =“ submit ”〉
로그인 후 복사

3. v-model: 양식 입력 등에 사용됩니다. .; 예: < v-model= "message" 입력>

4. v-show: 조건부 렌더링 명령, DOM에 대한 CSS 스타일 속성 설정

5. v-if: 조건부 렌더링 명령, 동적으로 추가 또는 DOM에서 DOM 요소를 삭제합니다. if 쌍으로 사용

8. 요소의 textContent를 업데이트합니다. }} ;

9.v-html: 요소의 innerHTML도 업데이트됩니다.

10, v-for: 루프 명령어, 예:

<p id= "app ">
    <ul>
      <li v-for="book in books">{ { book.name } }</li>
    </ul>
  </p>
var app =new Vue({
  el: '#app',
  data: {
    books: [
      {name: '<vue.js实战>'},
      {name: '<javascript语言精粹>'},
      {name: '<javascript高级程序设计>'}
    ]
  }
});
로그인 후 복사

10.1 v- for

표현식은 배열

을 탐색할 때 현재 항목의 인덱스로 선택적 매개변수를 지원합니다. 예:

  <p id="app">
    <ul>
      <li v-for="(book , index) in books ">{{ index}} - {{book.name })</li>
    </ul>
  </p>
로그인 후 복사

10.2 v- for 표현식

이 객체의 속성

을 순회할 때 두 개의 선택적 매개변수, 즉 키 이름과 인덱스가 있습니다:

  <p id= "app">
    <ul>
      <li v-for="(value , key , index) in user ">
        { { index } } - { { key } } : { { value } }
      </li>
    </ul>
  </p>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Aresn',
    grender: '男',
    age:23
  }
});
로그인 후 복사

10.3 v-for 표현식은 정수를 반복할 수도 있습니다:

10.4 배열 업데이트

배열을 수정하면 Vue는 데이터 변경을 감지하므로 v-for로 렌더링된 뷰는 즉시 업데이트됩니다. • push()

• pop()

• Shift()

• unshit()

• splice()

• sort()

• reverse()

이 메소드는 이 메소드에 의해 호출된 원래 배열을 변경합니다

예를 들어 이전 예의 데이터 북에 항목을 추가합니다.

app.books.push({
  name: '《css世界》'
});
로그인 후 복사

다음과 같은 일부 메소드는 원래 배열을 변경하지 않습니다.

• filter() • concat()

• Slice()

그들이 반환하는 것은 새로운 배열입니다. 이러한 비변이 방법을 사용하면 다음과 같이 원래 배열을 새 배열로 바꿀 수 있습니다.

app.books = app.books.filter(function (item) {
  return item . name.match(/JavaScript/);
});
로그인 후 복사

Vue 배열의 변경 사항을 감지하면 전체를 직접 다시 렌더링하지 않습니다. 목록에 있지만 DOM 요소의 재사용을 최대화합니다.

교체된 배열에서는 동일한 요소가 포함된 항목이 다시 렌더링되지 않으므로 성능 문제에 대한 걱정 없이 과감하게 기존 배열을 새 배열로 교체할 수 있습니다.

10.5 필터링 및 정렬

当你不想改变原数组,想通过一个数组的副本来做过滤或排序的显示时, 可以使用计算属性来返回过滤或排序后的数组 ,例如: 

  <p id="app">
    <ul>
      <template v-for="book in filterBooks">
        <li>书名:{{book.name}}</li>
        <li>作者:{{book.author}}</li>
      </template>
    </ul>
  </p>
var app= new Vue({
  el: '#app',
  computed: {
    filterBooks: function(){
      return this.books.filter(function (book) {
        return book.name.match(/JavaScript/);
      })
    },
  }
});
로그인 후 복사

11、v-cloak:不需要表达式,这个指令保持在元素上直到关联实例结束编译; v-cloak 是一个解决初始化慢导致页面闪动的最佳实践 ;

12、v-once:也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。

首次渲染后,不再随数据的变化重新渲染,将被视为静态内容; v-once 在业务中也很少使用,当你需要进一步优化性能时,可能会用到。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎么让页面代码分割并且按需加载

Vue中slots/scoped使用详解

위 내용은 Vue 내장 명령어 사용 지침의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Terraria에서 명령을 사용하여 아이템을 얻는 방법은 무엇입니까? -테라리아에서 아이템을 수집하는 방법은 무엇인가요? Terraria에서 명령을 사용하여 아이템을 얻는 방법은 무엇입니까? -테라리아에서 아이템을 수집하는 방법은 무엇인가요? Mar 19, 2024 am 08:13 AM

Terraria에서 명령을 사용하여 아이템을 얻는 방법은 무엇입니까? 1. 테라리아에서 아이템을 주는 명령은 무엇인가요? 테라리아 게임에서 아이템에 명령을 내리는 것은 매우 실용적인 기능입니다. 이 명령을 통해 플레이어는 몬스터와 싸우거나 특정 위치로 순간이동할 필요 없이 필요한 아이템을 직접 얻을 수 있습니다. 이를 통해 시간을 크게 절약하고, 게임 효율성을 향상시키며, 플레이어가 세계를 탐험하고 건설하는 데 더 집중할 수 있습니다. 전반적으로 이 기능은 게임 경험을 더 부드럽고 즐겁게 만듭니다. 2. Terraria를 사용하여 아이템 명령을 내리는 방법 1. 게임을 열고 게임 인터페이스로 들어갑니다. 2. 키보드의 "Enter" 키를 눌러 채팅창을 엽니다. 3. 채팅창에 "/give[플레이어 이름][아이템 ID][아이템 수량]" 명령 형식을 입력하세요.

VUE3 빠른 시작: Vue.js 지침을 사용하여 탭 전환 VUE3 빠른 시작: Vue.js 지침을 사용하여 탭 전환 Jun 15, 2023 pm 11:45 PM

이 글은 초보자가 Vue.js3를 빠르게 시작하고 간단한 탭 전환 효과를 얻을 수 있도록 돕는 것을 목표로 합니다. Vue.js는 재사용 가능한 구성 요소를 구축하고 애플리케이션 상태를 쉽게 관리하며 사용자 인터페이스 상호 작용을 처리하는 데 사용할 수 있는 인기 있는 JavaScript 프레임워크입니다. Vue.js3은 최신 버전의 프레임워크로, 이전 버전과 비교하여 큰 변화가 있었지만 기본 원칙은 변경되지 않았습니다. 이 기사에서는 독자가 Vue.js에 익숙해질 수 있도록 Vue.js 지침을 사용하여 탭 전환 효과를 구현합니다.

MC 명령이 제공하는 입력 방식의 무한한 가능성을 탐험해보세요. (완벽한 게임 경험을 만들어내는 혁신적인 도구 - MC 명령이 제공하는 입력 방식) MC 명령이 제공하는 입력 방식의 무한한 가능성을 탐험해보세요. (완벽한 게임 경험을 만들어내는 혁신적인 도구 - MC 명령이 제공하는 입력 방식) May 02, 2024 pm 03:01 PM

모바일 기기는 현대 사회에서 사람들의 삶에 필수적인 부분이 되었습니다. 게임은 또한 사람들의 여가 시간을 위한 주요 오락 형태 중 하나가 되었습니다. 게임 플레이를 최적화하고 게임 경험을 향상시키기 위해 새로운 도구와 기술을 개발하기 위해 끊임없이 노력하는 사람들이 있습니다. 자체 MC 명령을 사용한 입력 방식도 눈길을 끄는 혁신 중 하나다. 그리고 이것이 플레이어에게 어떻게 더 나은 게임 경험을 제공할 수 있는지 이 기사에서는 내장된 MC 명령 입력 방법의 무한한 가능성을 살펴보겠습니다. 내장 MC 명령 입력 방법 소개 내장 MC 명령 입력 방법은 MC 명령 기능과 지능형 입력 방법을 결합한 혁신적인 도구입니다. 이를 통해 모바일 장치에 입력 방식을 설치함으로써 플레이어는 게임 내에서 다양한 명령을 쉽게 사용할 수 있습니다. 빠른 명령 입력으로 게임 효율성 향상

Python 내장 함수 sorted()의 고급 사용 목록 Python 내장 함수 sorted()의 고급 사용 목록 May 13, 2023 am 10:34 AM

1. 서문 며칠 전 Python 다이아몬드 교환 그룹에 [emerson]이라는 팬이 Python 정렬에 관해 질문을 했습니다. 여기에서 공유하고 함께 배워보겠습니다. 사실 여기에서 [량유 선생님], [부다페스트의 영원] 등에서 많은 이야기를 나눴지만, 아직 기초가 부족한 친구들에게는 조금 어려운 부분이 있습니다. 그러나 내장 함수 sorted()는 여전히 실제 응용 프로그램에서 많이 사용됩니다. 다음에 친구들이 이 함수를 접하면 당황하지 않기를 바랍니다. 2. 기본 사용법 내장 함수 sorted()를 사용하여 정렬할 수 있습니다. 기본 사용법은 다음과 같이 매우 간단합니다. lst=[3,28,18,29,2,5,88

OnePlus budsPro_OnePlus budsPro 지침 사용 방법 OnePlus budsPro_OnePlus budsPro 지침 사용 방법 Mar 23, 2024 am 10:11 AM

1. 소음 감소 모드와 투명 모드 간 전환 이어폰 핸들을 약 1초 동안 길게 누르면 소음 감소 모드와 투명 모드가 전환됩니다. 2. 음악 모드에서 이어폰 핸들을 한 번 누르면 음악이 일시 정지되거나, 이어폰 핸들을 두 번 누르면 다음 곡이 재생됩니다. 3. 통화 모드에서 통화 중 이어폰 손잡이를 한 번 누르면 전화를 받거나 끊을 수 있습니다. 4. 재설정 방법 이어폰 상자를 열면 충전 상자 표시등이 빨간색으로 5번 깜박일 때 버튼을 놓으면 이어폰이 재설정됩니다. 3. 휴대폰 연결 방법 1. 충전 박스 열기 2. 설정 버튼을 2초간 길게 누르기 3. 휴대폰 화면에 팝업창이 나타나면 클릭하여 연결을 확인하세요. 4. 배터리 상태 확인 방법 1. 이어폰이 휴대폰에 연결되면 휴대폰 화면 팝업창에서 이어폰 및 충전박스의 배터리 잔량을 확인할 수 있습니다. 2,

UniApp 결제 기능 접속 및 이용 안내 UniApp 결제 기능 접속 및 이용 안내 Jul 04, 2023 am 10:27 AM

UniApp의 결제 기능 액세스 및 사용 지침 모바일 결제의 인기로 인해 많은 애플리케이션에서는 사용자가 온라인 결제를 쉽게 할 수 있도록 결제 기능을 통합해야 합니다. UniApp은 Vue.js를 기반으로 한 크로스 플랫폼 개발 프레임워크로서 일회성 개발과 멀티 플랫폼 사용이 가능한 특징을 가지고 있으며 결제 기능을 쉽게 구현할 수 있습니다. 이 기사에서는 UniApp의 결제 기능에 액세스하는 방법을 소개하고 코드 예제를 제공합니다. 1. 결제 기능에 액세스하려면 앱 측 매니페스트.json 파일에 결제 권한을 추가하세요.

컴퓨터가 직접 실행할 수 있는 명령의 두 부분은 무엇입니까? 컴퓨터가 직접 실행할 수 있는 명령의 두 부분은 무엇입니까? Dec 09, 2020 am 09:15 AM

컴퓨터가 직접 실행할 수 있는 명령어에는 연산 코드와 피연산자가 포함됩니다. Opcode는 작업을 수행하기 위해 컴퓨터 프로그램에 지정된 명령어 또는 필드의 일부를 나타내며 실제로 실행해야 할 명령어를 CPU에 알려주는 데 사용됩니다.

프롬프트는 더 이상 필요하지 않습니다. iChat을 사용하여 다중 모드 대화 시스템을 플레이할 수 있습니다! 프롬프트는 더 이상 필요하지 않습니다. iChat을 사용하여 다중 모드 대화 시스템을 플레이할 수 있습니다! May 15, 2023 pm 05:55 PM

Xi Xiaoyao Technology는 원저자 IQ가 땅에 떨어졌다고 말했습니다. 최근 많은 팀이 사용자 친화적인 ChatGPT를 기반으로 재창조했으며 그 중 많은 팀이 상대적으로 눈길을 끄는 결과를 얻었습니다. InternChat 작업은 다중 모드 작업을 위해 언어(커서 및 제스처)를 넘어서는 방식으로 챗봇과 상호 작용함으로써 사용자 친화성을 강조합니다. InternChat의 이름도 흥미롭습니다. 이는 상호작용, 비언어적, 챗봇을 의미합니다. 순수 언어에만 의존하는 기존의 대화형 시스템과 달리 iChat은 포인팅 지침을 추가하여 사용자와 챗봇 간의 의사소통 효율성을 크게 향상시킵니다. 게다가 저자 역시

See all articles