vue.js 구문 및 일반적인 지침에 대한 자세한 설명-JS 튜토리얼-php.cn

vue.js 구문 및 일반적인 지침에 대한 자세한 설명

php中世界最好的语言

풀어 주다： 2017-12-31 11:35:34

원래의

1680명이 탐색했습니다.

이번에는 vue.js의 구문과 일반적인 지침에 대해 자세히 설명하겠습니다. Vue.js는 매우 인기 있는 JavaScript MVVM(Model-View-ViewModel) 라이브러리입니다. 시간.

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

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

1. 사용

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

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

로그인 후 복사

v-if command

<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: &#39;#app&#39;,
      data: {
        yes: true,
        no: false,
        age: 28,
        name: &#39;keepfool&#39;
      }
    })
 </script>

로그인 후 복사

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: &#39;#app&#39;,
     data: {
       yes: true,
       no: false,
       age: 28,
       name: &#39;keepfool&#39;
     }
   })
 </script>

로그인 후 복사

믿습니다 읽었습니다. 위에서 소개한 방법을 마스터하셨습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트other관련 기사를 주목하세요!