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和資料綁定起來。一旦你創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。

當然了，在使用Vue.js時，你也可以結合其他函式庫一起使用，像是jQuery。

1.使用

使用Vue的過程就是定義MVVM（Model-View-ViewModel）各個組成部分的過程的過程。

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

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後面賦予 可以轉換為布林類型的表達式

<p>
      </p><h1 id="Hello-Vue-js">Hello, Vue.js!</h1>
      <h1 id="Yes">Yes!</h1>
      <h1 id="No">No!</h1>
      <h1 id="gt-Age-age">= 25">Age: {{ age }}</h1>
      <h1 id="gt-Name-name">= 0">Name: {{ name }}</h1>

 <script></script>
 <script>
    var vm = new Vue({
      el: &#39;#app&#39;,
      data: {
        yes: true,
        no: false,
        age: 28,
        name: &#39;keepfool&#39;
      }
    })
 </script>

這裡最後就輸出

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

2.2 v-show

 <p>
      </p><h1 id="Hello-Vue-js">Hello, Vue.js!</h1>
      <h1 id="Yes">Yes!</h1>
      <h1 id="No">No!</h1>
      <h1 id="gt-Age-age">= 25">Age: {{ age }}</h1>
      <h1 id="gt-Name-name">= 0">Name: {{ name }}</h1>
    
  

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