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双向绑定的方法是什么”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！