vuejs에 대한 지침이 있습니까?

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: &#39;#app&#39;,
			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: &#39;#app&#39;,
			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: &#39;#app&#39;,
			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: &#39;#app&#39;,
			data: {
				list:[{
					name:&#39;章三&#39;,
					age:18
				},{
					name:&#39;李四&#39;,
					age:23
				}]
			}
		})

위의 v-bind:src는 다음과 같이 축약될 수도 있습니다: src, 위 코드를 수정하세요

<div id="app">
			<img v-bind:src="img" class="logo" 
				v-bind:class="isLogo?&#39;&#39;:&#39;product&#39;" 
				v-bind:style="{&#39;border&#39;:hasBorder?&#39;2px solid red&#39;:&#39;&#39;}"></img>
		</div>
		
		var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				img:&#39;https://www.baidu.com/img/bd_logo1.png&#39;,
				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:php;toolbar:false;'>&lt;div id=&quot;app&quot;&gt; &lt;img :src=&quot;img&quot; class=&quot;logo&quot; :class=&quot;isLogo?&amp;#39;&amp;#39;:&amp;#39;product&amp;#39;&quot; :style=&quot;{&amp;#39;border&amp;#39;:hasBorder?&amp;#39;2px solid red&amp;#39;:&amp;#39;&amp;#39;}&quot;&gt;&lt;/img&gt; &lt;/div&gt;</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: &#39;#app&#39;,			data: {				isShow:true
			},			methods:{				show:function(type){					if(type){						this.isShow = true;
					}else{						this.isShow = false;
					}
				}
			}
		})

관련 추천: "

vue .js 튜토리얼

"

위 내용은 vuejs에 대한 지침이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!