뷰 기본적인 사용 방법

명령은 뷰에서 매우 중요한 기능이다의 뷰 프로젝트는 필수적이다. 공식 웹 사이트의 지시 (지침)에 대해 설명 V- 접두사와 특별한 속성입니다. 또한 영향 듀티 지령 때 응답하여 DOM 작용 생성되는 식의 값.
예를 들면 :

<p v-if="seen">现在你看到我了</p> 

위 : V- 뷰 식별이고, 명령 ID되면 예를 표현한다. MVVM은 값이 변경, 디스플레이보기보기를 변경하는 명령을 트리거 할 뷰 모델 VM 즉,에서 '예'입니다.
발현은 또한 명령의 실행을 트리거하는 임의의 속성의 변화에 의존 인라인 모드에 사용될 수있다. 예를 들면 :

<p v-if="'seen '+ user.name + ', ' + time"></p> 

여기에 우리가 자주 사용하는 명령에 대해 이야기

데이터 렌더링 V 텍스트, V-HTML, V-모델, {{}}

1, V-텍스트

V 텍스트 작업에 대한 일반 텍스트, 그것은 해당 데이터 개체에 표시된 값보다 우선합니다. 데이터 객체의 값이 변경 결합 할 때, 이에 보간 갱신한다. 데이터 객체의 값의 변화, 보간이 변경됩니다,이 바인딩 한 방법입니다,하지만 보간 변화는 데이터 객체의 값에 영향을주지 않을 때 : 참고. 여기서 v 텍스트는 {} {} 및 지원 논리 연산로 축약 할 수있다. 예를 들면 :

<div id="app">  
  {{ message }}  
</div>  
var app = new Vue({  
   el : '#app',  
   data : {  
    message : 'hello world' } }) 

참고 VUE 달성하기 위해 단 한번의 보간을 수행하는 V 자 일단 명령이 V-V 텍스트 기형 통해 결합 될 수있다라는

<span v-once>这个将不会随msg属性的改变而改变: {{ msg }}</span> 

2, V-HTML

V-HTML은 V-텍스트 출력은 일반 텍스트 것을 제외하고는 V-텍스트 HTML을 출력, 브라우저는 그들을 더 분석을 HTML 없지만, V-HTML HTML 태그는 때 출력 해결 될 것입니다.

<div id="app">  
    <p v-html="html"></p> </div> var app = new Vue({ el: "#app", data: { html: "<b style='color:red'>v-html</b>" } }); 

3, 모델의

V 모델 흔히 결합 성분, 예를 들어 입력을 형성하기 위해 사용되는, 등을 선택한다. 형태 이외의 제어를위한 레이블이 아무 소용이 경우는, 그 구현을 결합하는 V-텍스트 형태 양방향 구성 요소에 차이가있다.

<div id="app">  
  <input v-model="message " /> </div> var app = new Vue({ el : '#app', data : { message : 'hello world' } }) 

4- {{}}

{{}}은 V-텍스트의 짧은 형태이다

제어 모듈 표시 / 숨기기 V-경우, V-쇼

V-경우 조건부 블록 내의 이벤트 리스너 및 하위 구성 요소들이 파괴되어 핸드 오버 프로세스에서 적절하게 재구성되도록하기 때문에 "실제"조건 렌더링.
훨씬 간단 V-표시되지 -에 상관없이 초기 조건이 요소가 항상 CSS 스위치를 기반으로 간단하게 렌더링 될 것입니다 무엇.
일반적으로 V 자한다면 더 높은 오버 헤드를 스위칭 및 렌더링 높은 초기 비용을 V-나타낸다.
스위칭이 매우 빈번하게 사용하는 경우, 따라서, 바람직하게는 V-쇼이다 런타임 조건은 다음 V-바람직한 경우 사용 변경 않을 경우.

<template>
    <div id="app"> <div v-if="isIf"> if </div> <div v-show="ifShow"> show </div> <button @click="toggleShow">toggle</button> </div> </template> <script> export default { name: 'app', data() { return { isIf : true, ifShow : true, loginType : "username" } }, methods: { toggleShow : function(){ this.ifShow = this.ifShow ? false : true; this.isIf = this.isIf ? false : true; } } } </script> 

V-에 대한 순환의 목록을 렌더링

명령 루프이기 V-, 일반적으로, 예를 들면 어레이와 결합되어

<p id="wantuizhijia">
 <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </p> <script> new Vue({ el: '#wantuizhijia', data: { sites: [ { name: '网推之家' }, { name: '谷歌' }, { name: '淘宝' } ] } }) </script> 

우리는 또한 템플릿의 V를-에 사용할 수 있습니다 :

<p id="wantuizhijia">
 <ul> <template v-for="place in places"> <li>{{ place.name }}</li> <li>--------------</li> </template> </ul> </p> <script> new Vue({ el: '#wantuizhijia', data: { places: [ { name: '厦门' }, { name: '漳州' }, { name: '福州' } ] } }) </script> 

V-대해 반복 데이터 객체에 의해 등록 될 수있다 :

<p id="wangtuizhijia">
 <ul> <li v-for="value in object"> {{ value }} </li> </ul> </p> <script> new Vue({ el: '#wangtuizhijia', data: { object: { name: '汇票盟', url: 'http://www.pjmeng.com', slogan: '美好生活，等待你的开创！' } } }) </script> 

V-위한 두번째 파라미터 키로서 제공 될 수있는 개체의 데이터 속성을 반복하는 :

<p id="wangtuizhijia">
 <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </p> <script> new Vue({ el: '#wangtuizhijia', data: { object: { name: '汇票盟', url: 'http://www.pjmeng.com', slogan: '美好生活，等待你的开创！' } } }) </script> 

V-데이터 객체의 속성을 반복하는, 세번째 파라미터 인덱스이다 :

<p id="wangtuizhijia">
 <ul> <li v-for="(value, key, index) in object"> {{ index }} {{ key }}:{{ value }} </li> </ul> </p> <script> new Vue({ el: '#wangtuizhijia', data: { object: { name: '脚本之家', url: 'www.jb51.net', slogan: '美好生活，等待你的开创！' } } }) </script> 

V-FOR 루프의 정수일 수있다

<p id=”wangtuizhijia”>
<ul> <li v-for=”n in 10″> {{ n }} </li> </ul> </p> <script> new Vue({ el: ‘#wangtuizhijia' }) </script> </body> 

이벤트 바인딩 V-에

1, DOM 이벤트를 수신, 일반적으로는 V-에 있습니다 : 매개 변수를 전달 기본 재산에 대한 접근 방법에서을 (를) 클릭합니다.

<button @click="test">点击</button>  
  
methods: {  
    test: function (evt) {  
        console.log(evt);  
    }  
} 

EVT 여기 JQuery와 클릭 이벤트 콜백 함수 매개 변수와 유사한 표준 마우스 클릭 이벤트입니다.
당신은 예를 들어이로 속성 값의 데이터를 찾을 수 있습니다 :

data: {  
    items: "test"  
},  
methods: {  
    test: function (evt) { console.log(this.items); console.log(evt); } } 

여기서이 변수는 항목의 데이터이고, this.items.
2 문 관련 프로세서
V 온 이벤트는 고정 된 매개 변수를 전달

<button @click="test('a')">点击搜索age</button> 

이번에는, 함수의 첫 번째 매개 변수는 오히려 마우스 클릭 이벤트,하지만 문자열이 아닌 경우

test: function (mes) {  
    console.log(mes);  
}  

MES 값은 'A'입니다
$ 이벤트
는 다음 매개 변수로 $ 이벤트를 사용 (기본 마우스와 그 이벤트 개체 매개 변수가 동일 통과하지 않음), 위와 같이 그에게 마우스 클릭 이벤트를 제공해야합니다.
속성 이름의 값에 데이터 전송 특성을 원하는 경우 뷰 인스턴스 변수를 직접 배치되어 사용
예 :

<div id="app">  
    <a href="http://www.baidu.com" @click="test(items, $event)">点击搜索age</a> </div> <script> var test = {name: "test"}; var vm = new Vue({ el: '#app', data: { items: "test" }, methods: { test: function (msg, evt) { console.log(msg); evt.preventDefault();//阻止默认动作，比如这里是页面跳转 } } }) </script> 

출력 : 테스트 및 버튼
이 우리가 도와주고 싶어, 지시 뷰 일반적인 사용합니다.