vue.js的語法及常用指令的詳解

這次帶給大家的是vue.js的語法及常用指令的詳解，Vue.js是當下很火的一個JavaScript MVVM（Model-View-ViewModel）函式庫，這篇文章就給大家好好分析一下。

如果你之前已經習慣了用jQuery操作DOM，學習Vue.js時請先拋開手動操作DOM的思維，因​​為Vue.js是資料驅動的，你無需手動操作DOM。它透過一些特殊的HTML語法，將DOM和資料綁定起來。一旦你創建了綁定，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指令

<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中文網其它相關文章！

相關閱讀：

用jQuery做出對陣列去重及排序的運算

require.js的使用方法詳細介紹

nvm管理不同版本的node的方法

以上是vue.js的語法及常用指令的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！