Vue 2.0의 내부 지시문은 무엇입니까?
1. Vue.js 소개
현재 Angular, React 및 Vue의 세 가지 주류 프런트엔드 프레임워크가 있습니다. 얼마 전 React의 라이선스 논란으로 인해 Vue의 인기가 높아지고 있습니다. 또한 Vue의 친숙한 API 문서도 주요 기능입니다. Vue.js는 MVVM 프레임워크라기보다는 js 라이브러리에 더 가까운 매우 가벼운 도구입니다. Vue.js는 반응형 프로그래밍 및 구성 요소화 기능을 제공합니다. 리액티브 프로그래밍은 상태와 뷰를 동기화하는 것을 의미하며, 그 컴포넌트화 개념은 React와 동일합니다. 즉, "모든 것이 컴포넌트입니다. 컴포넌트화 아이디어는 모듈식 개발에 편리합니다. the front-end 분야의 주요 트렌드
2. 내부 지침
2-1. v-if v-else v-show: 처음 두 개는 일반적으로 함께 사용되며 v의 효과 -show는 v-if와 유사합니다.
예제는 다음과 같습니다.
<body>
<div id="app">
<p v-if="flag">if</p>
<p v-else>else</p>
<p v-show="flag">show</p>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
flag:true
}
});
</script>DOM 구조에서 세 개의 p 태그 내용이 페이지에 표시되는지 여부는 플래그의 부울 속성에 따라 다릅니다. 플래그가 true이면 if와 show가 모두 표시되고 else는 DOM 구조에 존재하지 않습니다. v-if와 v-show의 차이점은 다음과 같습니다. v-if는 조건 값에 따라 로드할지 여부를 결정합니다. , 이는 서버에 대한 부담을 줄일 수 있지만 조건 값이 변경되면 페이지를 다시 로드해야 한다는 단점이 있습니다. v-show는 조건 값이 true인지 여부에 관계없이 로드됩니다. 조건이 true이면 표시 속성이 기본 속성으로 설정되고, 그렇지 않으면 없음으로 설정됩니다.)
2-2.v-for 루프 명령
예제는 다음과 같습니다.
<body>
<div id="app">
<ol>
<li v-for="b in b">{{b}}</li>
</ol>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
b:['a','b','c',1,2]
}
});
</script>페이지에 5li가 표시됩니다. 보간법의 효과는 li가 배열 b에 해당하는 요소를 일대일로 표시한다는 것입니다. v-for는 for in 루프와 다소 유사합니다.
2-3 v -text v -html 텍스트(html 문자열) 명령
<body>
<div id="app">
<p v-text="msgText"></p>
<p v-html="msgHtml"></p>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
msgText:"China",
msgHtml:"<span>中国</span>"
}
});
</script>은 jquery의 text() 및 html()과 연관될 수 있습니다. 이제 이전 명령은 보간 연산, 즉 {{}}를 사용한다는 것을 알 수 있습니다. , 이 접근 방식은 어느 정도 성능에 영향을 미칩니다.
2-4 v-on 바인딩 이벤트 리스너
예는 다음과 같습니다.
<body>
<div id="app">
<button v-on:click="Hi()">Button</button>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
methods:{
Hi:function(){
alert("Hello World!")
}
}
});
</script>jquery의 on() 메서드와 유사하며 특정 이벤트에 대해 바인딩합니다. , v-on:click은 예제에서 @click으로 축약될 수 있습니다. Click은 mouseout, mouseover 등과 같은 다른 마우스 동작으로 대체될 수 있습니다.
2-5 v-bind 명령
예는 다음과 같습니다.
<body>
<div id="app">
<a v-bind:style="{color:'red'}" :src="message">{{message}}</a>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>효과는 a 태그가 빨간색으로 표시되고 해당 src 속성이 vm.message입니다. v-bind 지시문은 주로 html 태그의 속성을 설정하는 데 사용됩니다. :——>:
2-6 v-model 데이터 양방향 바인딩 명령
예제는 다음과 같습니다.
<body>
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>입력 입력 값이 변경되면 p 태그에 포함된 내용은 2-7 v-pre 명령어와 일치합니다.
예는 다음과 같습니다.
<body>
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>2-8 v-cloak 명령
v-cloak 명령의 기능은 DOM 트리가 빌드된 후 이를 실행하고 페이지가 렌더링되며 CSS와 함께 사용해야 합니다.
2-9 v-once 명령
v-once 명령은 DOM 트리가 처음으로 렌더링될 때만 작동합니다.
위 내용은 Vue 2.0의 내부 지시문은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7322
9
1625
14
1350
46
1262
25
1209
29
ccsvchst.exe는 어떤 프로세스인가요?
Feb 19, 2024 pm 11:33 PM
ccsvchst.exe는 SEP(Symantec Endpoint Protection) 소프트웨어의 일부인 공통 프로세스 파일이며, SEP는 잘 알려진 네트워크 보안 회사인 Symantec이 개발한 엔드포인트 보호 솔루션입니다. 소프트웨어의 일부로 ccsvchst.exe는 SEP 관련 프로세스를 관리하고 모니터링하는 역할을 담당합니다. 먼저 SymantecEndpointProtection(
Terraria에서 명령을 사용하여 아이템을 얻는 방법은 무엇입니까? -테라리아에서 아이템을 수집하는 방법은 무엇인가요?
Mar 19, 2024 am 08:13 AM
Terraria에서 명령을 사용하여 아이템을 얻는 방법은 무엇입니까? 1. 테라리아에서 아이템을 주는 명령은 무엇인가요? 테라리아 게임에서 아이템에 명령을 내리는 것은 매우 실용적인 기능입니다. 이 명령을 통해 플레이어는 몬스터와 싸우거나 특정 위치로 순간이동할 필요 없이 필요한 아이템을 직접 얻을 수 있습니다. 이를 통해 시간을 크게 절약하고, 게임 효율성을 향상시키며, 플레이어가 세계를 탐험하고 건설하는 데 더 집중할 수 있습니다. 전반적으로 이 기능은 게임 경험을 더 부드럽고 즐겁게 만듭니다. 2. Terraria를 사용하여 아이템 명령을 내리는 방법 1. 게임을 열고 게임 인터페이스로 들어갑니다. 2. 키보드의 "Enter" 키를 눌러 채팅창을 엽니다. 3. 채팅창에 "/give[플레이어 이름][아이템 ID][아이템 수량]" 명령 형식을 입력하세요.
VUE3 빠른 시작: Vue.js 지침을 사용하여 탭 전환
Jun 15, 2023 pm 11:45 PM
이 글은 초보자가 Vue.js3를 빠르게 시작하고 간단한 탭 전환 효과를 얻을 수 있도록 돕는 것을 목표로 합니다. Vue.js는 재사용 가능한 구성 요소를 구축하고 애플리케이션 상태를 쉽게 관리하며 사용자 인터페이스 상호 작용을 처리하는 데 사용할 수 있는 인기 있는 JavaScript 프레임워크입니다. Vue.js3은 최신 버전의 프레임워크로, 이전 버전과 비교하여 큰 변화가 있었지만 기본 원칙은 변경되지 않았습니다. 이 기사에서는 독자가 Vue.js에 익숙해질 수 있도록 Vue.js 지침을 사용하여 탭 전환 효과를 구현합니다.
듀얼 코어 브라우저란 무엇입니까?
Feb 20, 2024 am 08:22 AM
듀얼 코어 브라우저는 두 개의 서로 다른 브라우저 코어를 통합하는 브라우저 소프트웨어입니다. 커널은 웹 콘텐츠를 렌더링하고 웹 스크립트 및 기타 기능을 실행하는 브라우저의 핵심 부분입니다. 기존 브라우저는 일반적으로 Trident 커널을 사용하는 IE 브라우저, WebKit/Blink 커널을 사용하는 Chrome 브라우저, Gecko 커널을 사용하는 Firefox 브라우저 등 단일 커널만 사용합니다. 듀얼 코어 브라우저는 두 개의 서로 다른 코어를 하나의 브라우저에 통합하고 사용자는 필요에 따라 자유롭게 전환할 수 있습니다. 듀얼 코어 브라우저의 등장
MC 명령이 제공하는 입력 방식의 무한한 가능성을 탐험해보세요. (완벽한 게임 경험을 만들어내는 혁신적인 도구 - MC 명령이 제공하는 입력 방식)
May 02, 2024 pm 03:01 PM
모바일 기기는 현대 사회에서 사람들의 삶에 필수적인 부분이 되었습니다. 게임은 또한 사람들의 여가 시간을 위한 주요 오락 형태 중 하나가 되었습니다. 게임 플레이를 최적화하고 게임 경험을 향상시키기 위해 새로운 도구와 기술을 개발하기 위해 끊임없이 노력하는 사람들이 있습니다. 자체 MC 명령을 사용한 입력 방식도 눈길을 끄는 혁신 중 하나다. 그리고 이것이 플레이어에게 어떻게 더 나은 게임 경험을 제공할 수 있는지 이 기사에서는 내장된 MC 명령 입력 방법의 무한한 가능성을 살펴보겠습니다. 내장 MC 명령 입력 방법 소개 내장 MC 명령 입력 방법은 MC 명령 기능과 지능형 입력 방법을 결합한 혁신적인 도구입니다. 이를 통해 모바일 장치에 입력 방식을 설치함으로써 플레이어는 게임 내에서 다양한 명령을 쉽게 사용할 수 있습니다. 빠른 명령 입력으로 게임 효율성 향상
CPU란 무엇입니까?
Feb 22, 2024 pm 05:55 PM
CPU는 중앙 처리 장치입니다. 분석 1 중앙처리장치(CPU, Central Processor Unit)는 컴퓨터의 컴퓨팅 코어이자 제어 코어인 매우 큰 규모의 집적회로이다. 주요 기능은 컴퓨터 명령을 해석하고 컴퓨터 소프트웨어에서 데이터 정보를 처리하는 것이다. 보충: CPU에는 무엇이 포함됩니까? 1 CPU에는 컴퓨팅 사고 구성 요소, 레지스터 구성 요소 및 제어 구성 요소가 포함되어 있습니다. 컴퓨팅 사고 구성 요소는 지정된 주소 또는 부동 소수점 산술 연산, 시프트 연산 및 사고 연산을 수행할 수 있으며 주소 계산 및 전환. 요약/참고 CPU는 주로 컴퓨터 명령을 설명하고 컴퓨터 소프트웨어에서 데이터 정보를 처리합니다.
앨리스 코인이란 무엇인가요?
Feb 23, 2024 am 09:28 AM
앨리스 코인이란 무엇인가요? ALICE 코인은 창작자의 독특한 창의성과 상상력을 상징하는 영어 단어 "ALICE"에서 영감을 받은 디지털 암호화폐입니다. 블록체인 기술을 기반으로 한 가상 화폐인 ALICE 화폐는 사용자에게 안전하고 편리하며 개인 정보가 보호되는 거래 환경을 제공하는 것을 목표로 합니다. 블록체인 기술 적용 ALICE 화폐는 거래의 기록과 검증을 위해 블록체인 기술을 사용합니다. 블록체인은 거래 정보를 시간순으로 연결하여 불변의 체인을 형성하는 분산 데이터베이스입니다. 이 기술은 거래 정보의 보안을 크게 향상시키는 동시에 제3자 기관에 대한 신뢰의 필요성을 제거하고 거래 비용을 절감합니다. 블록체인의 분산된 특성으로 인해 거래 참가자는
WEB 코인 웹체인이란?
Feb 21, 2024 pm 06:28 PM
웹코인과 웹체인은 무엇인가요? Webcoin과 Webchain은 전 세계 사용자에게 안전하고 익명의 디지털 통화 거래 경험을 제공하는 것을 목표로 하는 밀접하게 관련된 두 가지 암호화폐 프로젝트입니다. Webcoin은 블록체인 기술을 기반으로 한 암호화폐이며, Webchain은 Webcoin의 운영을 지원하는 기본 블록체인 플랫폼입니다. 이 두 프로젝트의 결합을 통해 사용자는 익명성이 보장된 효율적이고 안전한 디지털 통화 거래를 수행할 수 있습니다. Webcoin웹코인은 글로벌 사용자에게 안전하고 효율적인 거래 환경을 제공하는 것을 목표로 하는 블록체인 기술을 사용하는 분산형 디지털 통화입니다. 오픈 소스 설계를 통해 거래 기록 및 검증이 더욱 투명하고 안정적으로 이루어집니다. 여
