Vue 2.0의 내부 지시문은 무엇입니까?-JS 튜토리얼-php.cn

Vue 2.0의 내부 지시문은 무엇입니까?

一个新手

풀어 주다： 2017-10-16 09:49:10

원래의

1502명이 탐색했습니다.

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:[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,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:&#39;red&#39;}" :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 중국어 웹사이트의 기타 관련 기사를 참조하세요!