Vue에서 일반적으로 사용되는 지침은 무엇입니까?
- 青灯夜游원래의
- 2020-11-25 11:32:2036503검색
vue의 일반적인 명령에는 v-once 명령, v-show 명령, v-if 명령, v-else 명령, v-else-if 명령, v-for 명령, v-html 명령, v-text 명령, v -bind 명령, v-on 명령, v-model 명령 등
vue.js는 공식적으로 자신을 데이터 템플릿 엔진으로 정의하고 데이터 렌더링을 위한 일련의 지침을 제공합니다.
Vue.js의 지침은 v-로 시작합니다. 지침은 몇 가지 특별한 기능을 제공합니다. 지침은 바인딩된 대상 요소에 몇 가지 특별한 동작을 추가합니다. 지시어를 특별한 HTML 속성으로 생각하세요.
지시문의 목적은 표현식 값이 변경될 때 그에 따라 특정 동작을 DOM에 적용하는 것입니다.
Vue 공통 지침 요약
1.v-once
은 데이터가 변경되면 보간 시 내용이 업데이트되지 않습니다. 그러나 이는 노드의 다른 데이터 바인딩에 영향을 미친다는 점에 유의하십시오.
<div id="app">
<p v-once>原始值: {{msg}}</p>
<p>后面的: {{msg}}</p>
<input type="text" v-model="msg">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '今天的天气很好!'
}
});
v-once 명령을 추가해도 변경되지 않습니다.
2.v-show
및 v-if 동일합니다. 차이점은 주석 처리된 경우 v-show에 표시되지 않도록 display:none 속성이 부여된다는 것입니다! 사용법은 다음 v-if 지시문을 참조하세요. v-show와 v-if의 차이점:
v-if는 조건부 블록이 적절하게 파괴되고 다시 작성되도록 보장하기 때문에 진정한 조건부 렌더링입니다. 스위치 내부의 이벤트 리스너와 하위 구성요소는 CSS를 기반으로 간단히 전환됩니다.
v-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높습니다. 따라서 자주 전환해야 하는 경우에는 v-show를 사용하고, 런타임 중에 조건이 변경될 가능성이 없는 경우에는 v-if를 사용하는 것이 좋습니다.
3.v-if
v-if 뒤에 오는 것은 true 또는 false를 반환하는 표현식 또는 표현식입니다. 그리고 그 값은 true이고 fasle입니다. false이면 주석 처리됩니다. v-show는 표시되지 않도록 display:none 속성을 부여하는 것입니다! true가 정상적으로 표시됩니다.<div id="app">
<p v-if="show">要显示出来!</p>
<p v-if="hide">不要显示出来!</p>
<p v-if="height > 1.55">小明的身高: {{height}}m</p>
<p v-if="height1 > 1.55">小明的身高: {{height1}}m</p>
<p v-if="3>2">打死你: {{height1}}m</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
show: true,
hide: false,
height: 1.68,
height1: 1.50
}
});
</script>4.v-else
는 v-if와 함께 사용해야 하며 단독으로 사용할 수 없으며 v-if 아래에 다른 태그가 있어야 하며 오류가 보고됩니다
<div id="app">
<p v-if="height > 1.7">小明的身高是: {{height}}m</p>
<p v-else>小明的身高不足1.70m</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
height: 1.88
}
});
</script>
5. v-else -if
이것은 비교적 간단합니다. 하하하, 등급을 입력하면 해당 레벨이 표시됩니다.<div id="app">
<p>输入的成绩对应的等级是:</p>
<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 75">良好</p>
<p v-else-if="score >= 60">及格</p>
<p v-else>不及格</p>
<input type="text" v-model="score">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
score: 90 // 优秀 良好 及格 不及格
}
});
</script>6.v-for
데이터를 기반으로 목록을 렌더링합니다. JS에서 순회합니다. 해당 데이터 유형은 Array | Object
|string일 수 있습니다. 이 명령의 값은 항목에서 특정 구문(항목, 인덱스)을 사용해야 하며 인덱스는 생략 가능합니다. item은 현재 순회하는 요소에 대한 별칭을 제공합니다(원하는 대로 이름을 지정할 수 있습니다). v-for는 v-if
<body>
<div id="app">
<!-- 遍历数组 -->
<p v-for="(d,index) in msg">
{{index +':'+d}}
</p>
<!-- 遍历对象 -->
<div v-for="(dd,index) in obj">
{{index+':'+dd}}
</div>
<!-- 遍历对象 也可以不要index索引 -->
<div v-for="dd2 in obj">
{{dd2}}
</div>
<!-- 遍历num和string -->
<p v-for="gg in num2">{{gg}}</p>
<p v-for="gg2 in string2">{{gg2}}</p>
</div>
</body>
<script src="vue/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:[123,98,25,63],
obj:{name:'敏敏',age:'21',height:'160'},
num2:'1335454', //注意这里不要写成了num2:1335154
string2:'xvzhiming'
}
})
</script>
7.v-html
과 같은 다른 명령보다 우선순위가 높습니다. 이중 중괄호는 데이터를 HTML 코드 대신 일반 텍스트로 해석합니다. 실제 HTML을 출력하려면 
보안 문제가 발생할 수 있으므로 v-html을 주의해서 사용해야 합니다. 공식 웹사이트에서는 다음과 같이 설명합니다. 사이트에서 동적으로 렌더링되는 모든 HTML은 쉽게 노출될 수 있으므로 매우 위험할 수 있습니다. XSS 공격으로 이어집니다. 신뢰할 수 있는 콘텐츠에만 HTML 보간을 사용하고 사용자 제공 콘텐츠에는 절대 사용하지 마세요. <div id="app" v-html="html">
<p v-text="msg">哈哈哈</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'我爱敏敏！！',
html:'<p>大海森林我都不爱！</p>'
}
})
</script>
v-html 而且给一个标签加了v-html 里面包含的标签都会被覆盖。
<div id="app">
<p v-text="msg">哈哈哈</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'我爱敏敏'
}
})
</script>
9.v-bind
사용법
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a>예
<div id="app">
改变src alt等属性
<img v-bind:src="imgSrc" :alt="alt">
<img :src="imgSrc1" :alt="alt">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
imgSrc: 'img/img_01.jpg',
imgSrc1: 'img/img_02.jpg',
alt: '我是美女'
}
});
</script>클래스 이름과 CSS 스타일 등을 바인딩할 수도 있습니다.<div id="app">
//v-for是一个遍历 给他一个calss 如果index===cative class名是active，如果不等就为空
//index 是v-for的索引
<p v-for="(college, index) in colleges" :class="index === activeIndex ? 'active': ''">
{{college}}
</p>
<p :style="{color: fontColor}">今天的天气很好!</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
colleges: [
'iOS学院',
'Java学院',
'HTML5学院',
'UI学院',
'VR学院'
],
activeIndex: 0,
fontColor: 'green'
}
});
</script>v-blnd가 입력에 사용되고 쓰기 방법이 더 이상 {에 래핑되지 않습니다. {}};
<body>
<div id="app"> <br> //加粗的内容刚刚学时 很容易出错 注意不要加{{}}；
原始值<input type="" name="" id="" <strong>:value=name</strong> />
模板<input type="" name="" id="" <strong>:value=name.split('').reverse().join()</strong> />
methods<input type="" name="" id="" <strong>:value=fz()</strong> />
conputed<input type="" name="" id="" <strong>:value=fz2</strong> />
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
name:'chenglianjie'
},
methods:{
fz(){
return this.name.split('').reverse().join('');
}
},<br> //这是vue的计算属性 在我的博客vue分类里面有介绍
computed:{
fz2(){
return this.name.split('').reverse().join('');
}
}
})
</script>
10.v -on
나중에 블로그
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>11.v-model
에서 언급할 바인딩 이벤트의 몇 가지 사용법이 있습니다. v-model은 , ,
으로 제한되는 명령과 데이터의 양방향 바인딩 작업을 위한 구성 요소입니다.관련 권장 사항:
2020 프런트엔드 vue 인터뷰 질문 요약(답변 포함)
vue 튜토리얼 추천: 2020 최신 5개 vue.js 비디오 튜토리얼 선택
더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: 프로그래밍 소개 ! !
위 내용은 Vue에서 일반적으로 사용되는 지침은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!