이 기사는 Vue.js의 기본 지침에 대한 요약(코드)을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
디렉토리:
v-text v-html v-show/v-if v-for v-bind/v-on v-model v-once
tag 바인딩 표시해야 할 내용
new Vue({ el: '#id', template: `<p v-text="'value:'+val"></p>`, data: { val: '123' } })// 等同于 : template: `<p>value:{{val}}</p>`
바운드 값이 문자열이 아닌 HTML 값으로 표시되는 경우(innerText를 innerHtml로 변환하는 것과 유사)
new Vue({ el: '#id', template: `<p v-html="val"></p>`, data: { val: '<span>123</span>' } })
는 노드 표시 여부를 결정하는 부울 변수를 받습니다.
차이점:
v-show: 노드에 display:none을 추가합니다.
v-if: 노드가 존재하는지 확인합니다. false인 경우 노드가 존재하지 않으므로 DOM 노드가 다시 그려집니다.
new Vue({ el: '#id', template: `<p> <span v-show="active"></span> <span v-if="active"></span> </p>`, data: { active: false, text: 0 } // <span v-if="active"></span> // <span v-else-if="text === 0"></span> // <span v-if="active"></span>})
배열(또는 객체)에 대한 루프
new Vue({ el: '#id', template: `<p> <ul> // 遍历数组 <li v-for="(item,index) in arr" :key="item">{{item}}</li> </ul> <ul> // 遍历对象 <li v-for="(val,key,index) in obj1" :key="key">{{key}} : {{val}}</li> </ul> </p>`, data: { arr: [1, 2, 3], obj1: { a: '123', b: '456' c: '789' } } })
v-bind: 단방향 바인딩 데이터
v-on: 바인딩 이벤트
// v-bind<p v-bind:class="val"></p>// 简写方式:<p :class="val"></p>// 其中val是data中的数据 // v-on<p v-on:click="clickButh"></p>// 简写方式:<p @click="clickButh"></p>// 其中clickButn是methods中的方法
양방향 바인딩 데이터
new Vue({ el: '#id', template: `<p> <input type="text" v-model="val"> </p>`, data: { val: '111' } })
는 한 번만 바인딩됩니다. 바인딩된 데이터가 변경되면 노드의 데이터는 다시 변경되지 않습니다.
new Vue({ el: '#id', template: `<p v-once >Text: {{val}}</p>`, data: { val: '111' } })
관련 권장 사항:
Angular가 사용됩니다. 요소 제어 표시 여부에 대한 기본 지침 소개_AngularJS 사용
위 내용은 Vue.js의 기본 지시문 요약(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!