Vue.js雙向綁定的方法是什么

本篇內容主要講解“Vue.js雙向綁定的方法是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue.js雙向綁定的方法是什么”吧!

Vue（發音為 /vju?/，與 view 類似）是一個用于構建用戶界面的漸進式框架。與其他單片框架不同，Vue 從一開始就設計為可增量采用。核心庫只關注于視圖層，并且易于拾取并與其他庫或現有項目集成。 

作用：

• Vue.js 允許您使用稱為指令的 HTML 屬性擴展 HTML；

• Vue.js 指令為 HTML 應用程序提供功能；

• Vue.js 提供內置指令和用戶定義指令。

Vue.js 指令

• Vue.js 使用雙大括號{{ }}作為數據的占位符；

• Vue.js 指令是帶有前綴的 HTML 屬性 v-。

Vue 示例

在下面的示例中，使用new Vue()創建了一個新的 Vue 對象。

屬性el:將新的 Vue 對象綁定到id="app"的 HTML 元素。

<div id="app">
<h2>{{ message }}</h2>
</div>

<script>
var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})
</script>

嘗試一下 ?

Vue.js 綁定

當 Vue 對象綁定到 HTML 元素時，當 Vue 對象發生變化時，HTML 元素也會發生變化：

<div id="app">
{{ message }}
</div>

<script>
var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})

function myFunction() {
    myObject.message = "John Doe";
}
</script>

嘗試一下 ?

Vue.js 雙向綁定

該v-model指令將 HTML 元素的值綁定到應用程序數據。

這稱為雙向綁定：

<div id="app">
  <p>{{ message }}</p>
  <p><input v-model="message"></p>
</div>

<script>
var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})
</script>

嘗試一下 ?

Vue.js 循環綁定

使用v-for指令將 Vue 對象數組綁定到 HTML 元素的“數組(array)”：

<div id="app">
 <ul>
   <li v-for="x in todos">
   {{ x.text }}
   </li>
  </ul>
</div>

<script>
myObject = new Vue({
    el: '#app',
    data: {
    todos: [
        { text: '學習 JavaScript' },
        { text: '學習 Vue.js' },
        { text: '學編程從W3Cschool開始' }
        ]
    }
})
</script>

到此，相信大家對“Vue.js雙向綁定的方法是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！