Vue 2.0 내부 지시어

php中世界最好的语言원래의: 2018-04-17 14:39:561448검색

이번에는 Vue 2.0 내부 명령어를 가져왔습니다. Vue 2.0 내부 명령어 사용 시 주의사항은 무엇인가요?

1.Vue.js 소개

현재 Angular, React 및 Vue라는 세 가지 주요 프런트엔드 프레임워크가 있습니다. 얼마 전 React의 라이선스 논란으로 인해 Vue의 인기가 높아지고 있습니다. 또한 Vue의 친숙한 API 문서도 주요 기능입니다. Vue.js는 MVVM 프레임워크라기보다는 js 라이브러리에 더 가까운 매우 가벼운 도구입니다. Vue.js는 반응형 프로그래밍 및 구성 요소화 기능을 제공합니다. 리액티브 프로그래밍은 상태와 뷰를 동기화하는 것을 의미하며 상태도 데이터라고 할 수 있습니다. 그 구성 요소화 개념은 React와 동일합니다. 즉, "모든 것이 구성 요소이고 구성 요소화 아이디어는 개발에 편리합니다. modular의, 프론트엔드 분야

의 주요 트렌드입니다. 2. 내부 지침

2-1.v-if v-else v-show: 처음 두 개는 일반적으로 함께 사용되며 v-show의 효과는 v-if와 유사합니다.

예는 다음과 같습니다:

<body>
  <p id="app">
    <p v-if="flag">if</p>
    <p v-else>else</p>
    <p v-show="flag">show</p>
  </p>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
      flag:true
    }
  });
</script>

DOM 구조에서 세 개의 p 태그 내용이 페이지에 표시되는지 여부는 플래그의 Boolean 속성에 따라 달라집니다. 플래그가 true이면 if와 show가 모두 표시되고 else는 DOM 구조에 존재하지 않습니다. v-if와 v-show의 차이점은 다음과 같습니다. v-if는 조건의 값에 따라 로드 여부를 결정하므로 서버에 대한 부담을 줄일 수 있지만 단점은 조건의 값이 변경되면 페이지를 다시 로드해야 합니다. v-show는 중요하지 않습니다. 조건 값이 true인지 여부는 로드됩니다. 조건이 true이면 display 속성이 기본 속성으로 설정되고, 그렇지 않으면 없음으로 설정되어 있습니다)

2-2.v-for 루프 명령

예는 다음과 같습니다:

<body>
  <p id="app">
   <ol>
     <li v-for="b in b">{{b}}</li>
   </ol>
  </p>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
     b:['a','b','c',1,2]
    }
  });
</script>

페이지에는 5li가 표시됩니다. 보간법의 효과는 li가 arrayb에 해당하는 요소를 일대일로 표시한다는 것입니다. v-for는 for in 루프

와 다소 유사합니다. 2-3 v-text v-html 텍스트(htmlstring) 명령

<body>
  <p id="app">
   <p v-text="msgText"></p>
   <p v-html="msgHtml"></p>
  </p>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
     msgText:"China",
     msgHtml:"<span>中国</span>"
    }
  });
</script>

jquery의 text()와 html()을 생각할 수 있습니다. 이제 이전 보간 연산, 즉 {{}}가 사용되었음을 알 수 있습니다. 이 접근 방식은 어느 정도 성능에 영향을 미칩니다.

2-4 v-on 바인딩 이벤트 리스너

예는 다음과 같습니다:

<body>
  <p id="app">
   <button v-on:click="Hi()">Button</button>
  </p>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    methods:{
      Hi:function(){
        alert("Hello World!")
      }
    }
  });
</script>

마찬가지로 이벤트 바인딩에 사용되는 jquery의 on() 메서드와 유사하게 v-on:click은 예제에서 @click으로 축약될 수 있습니다. 클릭은 마우스아웃, 마우스오버 등과 같은 다른 마우스 작업으로 대체될 수 있습니다.

2-5 v-bind 명령

예는 다음과 같습니다:

<body>
  <p id="app">
    <a v-bind:style="{color:&#39;red&#39;}" :src="message">{{message}}</a>
  </p>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程师"
    }
  });
</script>

결과적으로 a 레이블은 빨간색으로 표시되고 src 속성은 vm.message가 됩니다. v-bind 명령은 주로 html 태그의 속성을 설정하는 데 사용됩니다. 해당 명령의 약어는 v-bind:——>：

입니다. 2-6 v-model 데이터 양방향 바인딩 명령

예는 다음과 같습니다:

<body>
  <p id="app">
    <p>{{message}}</p>
    <input type="text" v-model="message">
  </p>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程师"
    }
  });
</script>

입력 값이 변경되면 p 태그에 포함된 내용도 변경되고 전자와 일관성을 유지합니다.

2-7 v-pre 명령

예는 다음과 같습니다:

<body>
  <p id="app">
    <p>{{message}}</p>
    <p v-pre>{{message}}</p>
  </p>
</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 트리가 처음으로 렌더링될 때만 작동합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!