Vue.js介紹.

標籤：span   載入   隱藏   資訊   表示   data   對象   作用   事件監聽   

Vue.js　主要用簡潔的範本語言聲明式的把資料渲染進ＤＯＭ

例如

<div id="app">  {{ message }}</div>var app = new Vue({  el: ‘#app‘,  data: {    message: ‘Hello Vue!‘  }})Hello Vue!

　

還可以綁定DOM對象

<div id="app-2">  <span v-bind:title="message">    滑鼠移至上方幾秒鐘查看此處動態綁定的提示資訊！  </span></div>var app2 = new Vue({  el: ‘#app-2‘,  data: {    message: ‘頁面載入於 ‘ + new Date()  }})

　　

這裡我們遇到點新東西。你看到的 v-bind 屬性被稱為指令。指令帶有首碼 v-，以表示它們是 Vue 提供的特殊屬性。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為。簡言之，這裡該指令的作用是：“將這個元素節點的 title 屬性和 Vue 執行個體的 message 屬性保持一致”。

控制一個元素隱藏

<div id="app-3">  <p v-if=‘seen‘>  現在你看到我了  </p>  </div>var app3 = new Vue({el:‘#app-3‘,data:{seen:false //true可見}})

　　

v-for迴圈＼

<div id="app-4">  <ol>    <li v-for="todo in todos">      {{ todo.text }}    </li>  </ol></div>var app4 = new Vue({  el: ‘#app-4‘,  data: {    todos: [      { text: ‘學習 JavaScript‘ },      { text: ‘學習 Vue‘ },      { text: ‘整個牛項目‘ }    ]  }})

　　

　為了讓使用者和你的應用進行互動，我們可以用 v-on 指令綁定一個事件監聽器，通過它調用我們 Vue 執行個體中定義的方法：

<div id="app-5">  <p>{{ message }}</p>  <button v-on:click="reverseMessage">逆轉訊息</button></div>var app5 = new Vue({  el: ‘#app-5‘,  data: {    message: ‘Hello Vue.js!‘  },  methods: {    reverseMessage: function () {      this.message = this.message.split(‘‘).reverse().join(‘‘)    }  }})Hello Vue.js!逆轉訊息

　　

 

vue 還提供了 v-model 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向繫結。

<div id="app-6">  <p>{{ message }}</p>  <input v-model="message"></div>var app6 = new Vue({  el: ‘#app-6‘,  data: {    message: ‘Hello Vue!‘  }})

　　

Vue.js介紹.