Vue 학습 의 상용 명령 어 실례 상세 설명

이 글 의 실례 는 Vue 가 자주 사용 하 는 지령 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
1.vue 인 스 턴 스 만 들 기
vue 의 특징 은 바로 데이터 구동 인터페이스 이다.일단 js 중의 데 이 터 를 수정 하면 인터페이스 에서 데 이 터 를 사용 하 는 곳 도 바로 변경 할 것 이다.인터페이스 를 조작 하기 위해 서 는 먼저 인터페이스의 태그 요 소 를 가 져 오고 vue 인 스 턴 스 를 예화 해 야 합 니 다.
예 를 들 어 HTML 에 div 를 만 듭 니 다:

<div id="app">
  <p>{{msg}}</p>
</div>

js 에서 그 예 를 vue 대상 으로 바 꿉 니 다.

  let app=new Vue({
    el:'#app',//     、id，      
    //                
    data:{
      msg:'     '
    },
    //          
    methods:{
    }
  });

이렇게 하면 js 에서 msg 의 내용 이 p 탭 에 표 시 됩 니 다.
2.vue 상용 명령
1.v-model:구성 요소 와 변 수 를 양 방향 으로 연결 합 니 다.구성 요소 데이터 가 수정 되면 변 수 는 변 합 니 다.이 뒤에 장식 부 호 를 추가 할 수 있 습 니 다.예 를 들 어 레이 지 는 탭 의 값 이 바 뀌 었 을 때 만 변 수 를 동기 화 할 수 있 습 니 다.trim 은 사용자 가 입력 한 빈 칸 을 걸 러 냅 니 다.
2.v-once:데 이 터 를 수정 할 수 없습니다.예 를 들 어 HTML 에는 다음 과 같은 세 개의 태그 가 있 습 니 다.

  <div id="app">
    <p v-once>{{msg}}</p>
    <p>{{msg}}</p>
    <input type="text" v-model="msg">
  </div>

input 상자 에 내용 을 입력 하면 msg 변수 에 전 달 됩 니 다.두 번 째 p 탭 에 표 시 된 정 보 는 msg 에 따라 달라 집 니 다.첫 번 째 v-once 가 있 는 p 탭 은 msg 의 초기 값 만 표시 되 고 이에 따라 달라 지지 않 습 니 다.
3.v-if="표현 식"은 표현 식 의 결과 에 따라 판단 되 며,true 는 렌 더 링 요소 이 고,false 는 요 소 를 주석 합 니 다.
4.v-show 는 v-if 와 유사 합 니 다.true 는 렌 더 링 을 하지만 false 는 주석 이 없 는 것 이 아니 라 display:none 을 통 해 렌 더 링 을 합 니 다.원 소 를 숨 기 려 면,왔다갔다 전환 이 필요 하 다 면 v-show 를 사용 하 는 것 이 좋 습 니 다.예 를 들 면:  

<p v-if="show">    </p>
<p v-if="hide">    </p>
<p v-show="hide">v-show  </p>

쇼:true,hide:false,결 과 는 다음 과 같 습 니 다.

5.v-else,v-else-if 와 v-if 를 연결 하여 사용 하 는 것 은 논리 적 판단 을 구성 하고 반환 값 에 따라 표시 여 부 를 결정 하 며 단독으로 또는 따로 사용 할 수 없습니다.예 를 들 어:

<p>     ：</p>
<input type="text" v-model="score">
<p v-if="score>90">  </p>
<p v-else-if="score>80">  </p>
<p v-else-if="score>60">  </p>
<p v-else>   </p>

테스트 결 과 는:

6.v-for 는 요 소 를 옮 겨 다 니 는 데 사 용 됩 니 다.형식 은 v-for="(값,키)in 옮 겨 다 니 는 내용"입 니 다.옮 겨 다 니 는 내용 은 배열,대상,문자열 일 수 있 습 니 다.예 를 들 어 js 의 data 에 person 대상 이 있 습 니 다.person:{name:'tony',age:15,sex:'남'}.그 내용 을 페이지 에 옮 겨 다 니 며 출력 합 니 다. 

<p v-for="(value,key) in person">
  {{key+':'+value}}
</p>

생 성 결 과 는 다음 과 같 습 니 다.

7.v-text:태그 에 데 이 터 를 주입 하고 태그 안의 다른 내용 을 덮어 씁 니 다.
8.v-html:태그 에 HTML 내용 을 덮어 쓰 고 하위 요소 로 합 니 다.예 를 들 면:

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

결 과 는 하위 div 를 삽입 하고 원래 내용 을 덮어 씁 니 다:

9.v-bind:태그 에 속성,클래스,스타일 등 을 연결 하고 콜론 으로 줄 일 수 있 습 니 다.예 를 들 어:    

<!--      -->
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...</a>
<!--    -->
<a :href="url" rel="external nofollow" rel="external nofollow" >...</a>

vue 의 인터페이스 요 소 는 모두 데이터 로 구동 되 기 때문에 js 코드 가 서버 에서 얻 은 속성,스타일 등 데 이 터 는 바 인 딩 을 통 해 HTML 인터페이스 요소 에 추가 해 야 합 니 다.바 인 딩 을 통 해 속성 을 추가 할 요 소 를 더욱 유연 하 게 선택 할 수 있 습 니 다.Vue 는 요 소 를 직접 조작 하 는 class 가 아니 라 하나의 데 이 터 를 class 에 연결 한 다음 에 데이터 로 class 의 유 무 를 구동 하여 페이지 의 표 시 를 바 꾸 는 것 으로 vue 데이터 구동 의 특징 을 충분히 나 타 냈 다.
예 를 들 어 위의 person 대상 중 key 가'name'인 줄 의 정 보 를 active 클래스 에 연결 하여 밝 게 표시 합 니 다.

<!--  v-for    person  ，  class，     name，   class='active'-->
<p v-for="(value,key) in person" :class="key==='name' ? 'active' : ''">
  {{key+':'+value}}
</p>

결과:

또한 다음 과 같은 방법 으로 클래스 이름 을 연결 할 수 있 습 니 다.페이지 는 변수 isActive 와 hasError 의 true 또는 false 에 따라 active 와 text-danger 류 를 연결 하 는 지 여 부 를 확인 하고 active 를 계산 속성 으로 설정 하여 연산 후 true/false 로 돌아 갈 수 있 습 니 다.
메모:바 인 딩 된 속성 은 낙타 봉 의 명명 법 이나 짧 은 횡선 으로 연결 할 수 있 으 나 짧 은 횡선 을 사용 하려 면 따옴표 로 연결 해 야 합 니 다.

<div class="static"
   v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

10.v-on:탭 바 인 딩 함수 에@이 라 고 줄 일 수 있 습 니 다.예 를 들 어 클릭 함 수 를 바 인 딩 할 수 있 습 니 다.

<p>{{msg}}</p>
<button @click="changeContent()">change</button>

Vue 의 methods 에서 changeContent 함수 구현:

  let app=new Vue({
    el:'#app',
    data:{
      msg:'       ',
    },
    methods:{
      changeContent(){
        this.msg="        ";
      }
    }
  });

원래 페이지 와 클릭 후:

Vue.js 는 v-on 에 이벤트 수정자 를 제공 합 니 다.장식 부 호 는...시작 명령 접미사 로 표시 되 며 이벤트 에 대한 제약 에 사 용 됩 니 다.예 를 들 면:

<!--            --> 
<a v-on:click.stop="doThis"></a>
<!--            --> 
<form v-on:submit.prevent="onSubmit"></form> 
<!--          ，           --> 
<a v-on:click.stop.prevent="doThat"></a> 
<!--                  --> 
<!--                 ，              --> 
<div v-on:click.capture="doThis">...</div> 
<!--     event.target               --> 
<!--             --> 
<div v-on:click.self="doThat">...</div>
<!--             -->
<a v-on:click.once="doThis"></a>

이벤트 외 에 키보드 코드 가 13 인 단 추 를 눌 렀 을 때 터치 하 는 버튼 이벤트 도 있 습 니 다.

<input v-on:keyup.13="submit">

vue 를 편리 하 게 사용 하기 위해 서 자주 사용 하 는 버튼 의 이름 을 바 꿀 수 있 습 니 다.이벤트 수정자 로 사용 할 수 있 습 니 다.예 를 들 어'enter,'delete,'tab,'space,'esc,'up,'down,'right,'left 등 도 있 고 사용자 정의 도 할 수 있 습 니 다.

Vue.config.keyCodes.f1 = 112;

본 고 에서 말 한 것 이 여러분 vue.js 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.