vuejs에 지침이 있습니다. Vuejs 명령어는 "v-"로 시작합니다. 명령어는 몇 가지 특별한 기능을 제공합니다. 명령어가 요소에 바인딩되면 명령어는 바인딩된 대상 요소에 몇 가지 특별한 동작을 추가합니다. HTML 기능.
이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.
vuejs에 지침이 있습니다.
Vue의 지시문은 무엇입니까
Vue.js 지시문은 v-로 시작합니다. 지시문은 요소에 지시문을 바인딩할 때 몇 가지 특별한 기능을 제공합니다. 바인딩된 대상 요소 지시어를 특별한 HTML 속성으로 생각할 수 있습니다.
VueJS는 지시문이라는 새로운 속성으로 HTML을 확장합니다.
ViueJS는 내장 지시문을 통해 애플리케이션에 기능을 추가합니다.
VueJS를 사용하면 지시문을 사용자 정의할 수 있습니다.
지시문의 특징
모든 지시문은 Vue 인스턴스 관리 범위에 포함됩니다.
vueJS 지시문은 v- 접두사가 붙는 확장된 HTML 속성입니다.
v-model 지시문은 요소 값(예: 입력 필드 값)을 애플리케이션에 바인딩하고 값을 저장합니다.
vuejs 일반 명령
Vue.js는 일반적으로 사용되는 내장 명령을 제공합니다. 다음으로 다음 내장 명령을 소개합니다.
- v-if 명령
- v-show 명령
- v-else 지시어
- v-for 지시어
- v-bind 지시어
- v-on 지시어
v-if 지시어
v-if는 조건부 렌더링 지시어이며, 표현식은 true 또는 false이며 요소를 삽입합니다.
기본 구문:
v-if="expression"
expression은 부울 값을 반환하는 표현식이거나 부울 값을 반환하는 연산 표현식일 수 있습니다.
<div id="app">
<div v-if="isMale">男士</div>
<div v-if="age>=20">age:{{age}}</div>
</div>
var vm = new Vue({
el: '#app',
data: {
age:25,
isMale:true,
}
})로그인 후 복사
v-show 명령
v-show와 v-if의 차이점.
v-show는 조건이 true인지 여부에 관계없이 html을 렌더링하고, v-if는 조건이 true인 경우에만 렌더링합니다.
먼저 두 개의 스크린샷을 보세요. 첫 번째는 isMale이 true인 경우입니다. isMale이 false인 경우 v-if의 html이 렌더링되지 않고 v-show의 p를 사용하면 스타일 표시만 변경되는 것을 볼 수 있습니다. none
v-else 명령은 다음과 함께 사용됩니다. v-if 또는 v-show v-if 조건이 충족되지 않으면 v-else 내용이 표시됩니다
<div id="app">
<div v-if="isMale">男士v-if</div>
<div v-show="isMale">男士v-show</div>
</div>
var vm = new Vue({
el: '#app',
data: {
isMale:false
}
})로그인 후 복사
v-for 명령
v-for 명령은 배열을 기반으로 목록을 렌더링합니다. 이는 JavaScript의 순회 구문과 유사합니다
v-for="item in list"list는 배열이고 item은 현재 순회되는 배열 요소입니다v-for="(item,index) in list" 여기서 index는 현재 루프입니다. 인덱스, 첨자는 0
<div id="app">
<div v-if="isMale">男士</div>
<div v-else>女士</div>
</div>
var vm = new Vue({
el: '#app',
data: {
isMale:true
}
})로그인 후 복사
v-bind command
v-bind는 이름 뒤에 매개변수를 동적으로 결합하고 콜론으로 구분할 수 있습니다. 예를 들어 v-bind: class
class는 v-bind:class와 동시에 존재할 수 있습니다. 즉, 클래스가 있는 경우 v-bind:class를 추가해도 덮어쓰지 않습니다. 스타일 클래스이지만 원래 기준으로 새 클래스 이름을 추가하세요
<div id="app">
<table>
<tr class="thead">
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="(item,index) in list">
<td v-text="index+1"></td>
<td v-text="item.name"></td>
<td v-text="item.age"></td>
</tr>
</table>
</div>
var vm = new Vue({
el: '#app',
data: {
list:[{
name:'章三',
age:18
},{
name:'李四',
age:23
}]
}
})로그인 후 복사
위의 v-bind:src는 다음과 같이 축약될 수도 있습니다: src, 위 코드를 수정하세요
<div id="app">
<img v-bind:src="img" class="logo"
v-bind:class="isLogo?'':'product'"
v-bind:style="{'border':hasBorder?'2px solid red':''}"></img>
</div>
var vm = new Vue({
el: '#app',
data: {
img:'https://www.baidu.com/img/bd_logo1.png',
isLogo:false,
hasBorder:true
}
})로그인 후 복사
v-on 명령
v-on은 DOM 이벤트를 수신하는 데 사용됩니다. 사용법은 v-bind와 유사합니다. 예를 들어 버튼에 클릭 이벤트를 추가합니다
<button v-on:click="show"></code ></p>마찬가지로 v-bind와 동일, v- on의 약어를 사용하여 @ 기호로 바꾸고 코드를 수정할 수도 있습니다: <p><code><button @click="show">< /code></p><p>예제를 살펴보겠습니다: </p><p><strong></strong></p>다음은 p 텍스트 단락을 숨기고 표시하는 클릭 코드입니다<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><div id="app">
<img :src="img" class="logo"
:class="isLogo?&#39;&#39;:&#39;product&#39;"
:style="{&#39;border&#39;:hasBorder?&#39;2px solid red&#39;:&#39;&#39;}"></img>
</div></pre><div class="contentsignin">로그인 후 복사</div></div><br/><code><button v-on:click="show">
同样，和v-bind一样，v-on也可以使用简写，用@符号代替，修改代码：
<button @click="show">종합적인 예
<div id="app"> <p v-show="isShow">微风轻轻的吹来，带来了一丝丝凉意</p>
<div>
<button type="button" v-on:click="show(1)">显示</button>
<button type="button" v-on:click="show(0)">隐藏</button>
</div>
</div>
var vm = new Vue({ el: '#app', data: { isShow:true
}, methods:{ show:function(type){ if(type){ this.isShow = true;
}else{ this.isShow = false;
}
}
}
})로그인 후 복사
관련 추천: "
vue .js 튜토리얼
"
위 내용은 vuejs에 대한 지침이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
