vue.js의 일반적인 지침 요약

이번에는 vue.js의 공통 명령어를 요약해서 가져오겠습니다. vue.js의 공통 명령어를 사용할 때 주의사항은 무엇인가요?

Vue.js는 매우 인기 있는 JavaScript MVVM(Model-View-ViewModel) 라이브러리로, 데이터 기반 및 구성 요소 기반 아이디어로 구축되었습니다. Angular.js와 비교하여 Vue.js는 더 간단하고 이해하기 쉬운 API를 제공하므로 Vue.js를 빠르게 시작하고 사용할 수 있습니다.

이전에 jQuery를 사용하여 DOM을 조작하는 데 익숙했다면 Vue.js를 학습할 때 DOM을 수동으로 조작한다는 생각은 접어두시기 바랍니다. Vue.js는 데이터 중심이므로 수동으로 조작할 필요가 없습니다. DOM. 특별한 HTML 구문을 통해 DOM과 data를 바인딩합니다. 바인딩을 생성하면 DOM은 데이터와 동기화 상태를 유지하며 데이터가 변경될 때마다 그에 따라 DOM이 업데이트됩니다.

물론 Vue.js를 사용할 때 jQuery와 같은 다른 라이브러리와 함께 사용할 수도 있습니다.

1.

을 사용하세요. Vue를 사용하는 과정은 MVVM(Model-View-ViewModel)의 다양한 구성요소를 정의하는 과정입니다.

rreee

2. Vue.js

의 일반적인 명령 Vue.js는 일반적으로 사용되는 내장 지침을 제공합니다. 다음으로 다음과 같은 내장 지침을 소개합니다.

• v-if 명령
• v-show 명령
• v-else 명령
• v-for 명령
• v-bind 명령
• v-on 명령

Vue.js는 확장성이 뛰어나며 일부 사용자 정의 지침을 개발할 수도 있습니다. 사용자 정의 지침은 이후 기사에서 소개하겠습니다.

2.1 v-if 지시어

v-if 뒤에는 Boolean 유형으로 변환할 수 있는 expression

<!--这里定义View-->
<p id="app">{{ message }}</p>
<script src="js/vue.js"></script>
<script>
    // 这里定义Model
    var exampleData = {
      message: 'Hello World!'
    }
    // 这里创建一个 Vue 实例或 "ViewModel"
    // 连接 View 与 Model
    new Vue({
      el: '#app',
      data: exampleData
    })
</script>

이 옵니다. 최종 출력은 다음과 같습니다

<p id="app">
      <h1>Hello, Vue.js!</h1>
      <h1 v-if="yes">Yes!</h1>
      <h1 v-if="no">No!</h1>
      <h1 v-if="age >= 25">Age: {{ age }}</h1>
      <h1 v-if="name.indexOf(&#39;jack&#39;) >= 0">Name: {{ name }}</h1>
</p>
 <script src="js/vue.js"></script>
 <script>
    var vm = new Vue({
      el: '#app',
      data: {
        yes: true,
        no: false,
        age: 28,
        name: 'keepfool'
      }
    })
 </script>

2.2 브이쇼

<p id="app">
  <h1>Hello, Vue.js!</h1>
  <h1>Yes!</h1>
  <!---->
  <h1>Age: 28</h1>
  <!---->
</p>

여기 코드는 v-if가 v-show

로 변경된 것입니다. 출력은

 <p id="app">
      <h1>Hello, Vue.js!</h1>
      <h1 v-show="yes">Yes!</h1>
      <h1 v-show="no">No!</h1>
      <h1 v-show="age >= 25">Age: {{ age }}</h1>
      <h1 v-show="name.indexOf(&#39;jack&#39;) >= 0">Name: {{ name }}</h1>
    </p>
  </body>
  <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        yes: true,
        no: false,
        age: 28,
        name: 'keepfool'
      }
    })
  </script>

입니다. 여기서 차이점은 위의 v-if가 html 코드를 직접 출력하지 않는다는 것입니다. 여기서는 display:none을 사용하여 숨깁니다

2.3 v-else 지침

<p id="app">
<h1>Hello, Vue.js!</h1>
<h1>Yes!</h1>
<h1 style="display: none;">No!</h1>
<h1>Age: 28</h1>
<h1 style="display: none;">Name: keepfool</h1>
</p>

이전 형제 요소에는 v-if 또는 v-else-if, vue.js의 새 버전에는 v-else-if가 추가되었습니다. 사용법은 v-if와 동일하지만 이전 형제 요소에는 v-if 또는 v-else-if가 있어야 합니다. v-else 버전 앞에는 v-else-if가 옵니다. 뒤에 v-show가 올 수 있지만 v-else의 새 버전 앞에는 v-show가 올 수 없습니다.

2.4 v-for 명령

<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        age: 28,
        name: 'keepfool',
        sex: 'Male'
      }
    })
</script>

상위 요소는 v-for를 사용하고 하위 요소는 바운드 해당 Array Object | string | v-for는 다음과 같이 사용할 수도 있습니다:

<p v-for="p in people">
   <h1>Age: {{ p.age }}</h1>
   <h1>Name: {{ p.name }}</h1>
   <h1>Sex: {{ p.sex }}</h1>
</p>
<script charset="utf-8" src="js/vue.js"></script>
<script type="text/javascript">
   var myModel = {
    people:[
      {
        age: 25,
        name: 'keepfool',
        sex: 'Male'
      },
      {
        age: 26,
        name: 'keepfool2',
        sex: 'FeMale'
      },
      {
        age: 27,
        name: 'keepfool3',
        sex: 'Male2'
      }
    ]
  };
 var vm = new Vue({
  el: '#app',
  data: myModel
})
</script>

2.5 v-bind 명령

v-bind 지시문은 이름 뒤에 콜론으로 구분된 매개변수를 사용할 수 있습니다. 이 매개변수는 일반적으로

HTML 요소

<p v-for="(item, index) in items"></p>
<p v-for="(val, key) in object"></p>
<p v-for="(val, key, index) in object"></p>

의 속성입니다. 또 다른 예:

<p id="app">
   <ul class="pagination">
     <li v-for="n in pageCount">
       <a href="javascripit:void(0)" rel="external nofollow" v-bind:class="activeNumber === n ? &#39;active&#39; : &#39;&#39;">{{ n }}</a>
     </li>
   </ul>
</p>
 <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        activeNumber: 1,
        pageCount: 10
      }
    })
  </script>

2.6 v-on 명령

<img v-bind:src="&#39;/path/to/images/&#39; + fileName">
<p v-bind="{ &#39;id&#39;: someProp, &#39;other-attr&#39;: otherProp }"></p>

2.7 v-model 명령

v-model은 양식 제어 요소에 대한 양방향 데이터 바인딩을 생성합니다

<p id="app">
      <p><input type="text" v-model="message"></p>
      <p>
        <!--click事件直接绑定一个方法-->
        <button v-on:click="greet">Greet</button>
      </p>
      <p>
        <!--click事件使用内联语句-->
        <button v-on:click="say(&#39;Hi&#39;)">Hi</button>
      </p>
</p>
 <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue.js!'
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet: function() {
          // // 方法内 `this` 指向 vm
          alert(this.message)
        },
        say: function(msg) {
          alert(msg)
        }
      }
    })
  </script>

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

추천 도서:

위 내용은 vue.js의 일반적인 지침 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!