Vue 2.0의 내부 지시문은 무엇입니까?
- 一个新手원래의
- 2017-10-16 09:49:101429검색
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> 첫 번째 p 태그는 "front-end Engineer"를 출력하고 두 번째 p 태그는 건너뜁니다. vue 컴파일하고 원래 값, 즉 {{message}}를 출력합니다.
2-8 v-cloak 명령
v-cloak 명령의 기능은 DOM 트리가 빌드된 후 이를 실행하고 페이지가 렌더링되며 CSS와 함께 사용해야 합니다.
2-9 v-once 명령
v-once 명령은 DOM 트리가 처음으로 렌더링될 때만 작동합니다.
위 내용은 Vue 2.0의 내부 지시문은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!