Vue.js双向绑定的方法是什么

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 元素。

<divid="app"><h2>{{message}}</h2></div><script>varmyObject=newVue({el:'#app',data:{message:'HelloVue!'}})</script>

尝试一下 »

Vue.js 绑定

当 Vue 对象绑定到 HTML 元素时，当 Vue 对象发生变化时，HTML 元素也会发生变化：

<divid="app">{{message}}</div><script>varmyObject=newVue({el:'#app',data:{message:'HelloVue!'}})functionmyFunction(){myObject.message="JohnDoe";}</script>

尝试一下 »

Vue.js 双向绑定

该v-model指令将 HTML 元素的值绑定到应用程序数据。

这称为双向绑定：

<divid="app"><p>{{message}}</p><p><inputv-model="message"></p></div><script>varmyObject=newVue({el:'#app',data:{message:'HelloVue!'}})</script>

尝试一下 »

Vue.js 循环绑定

使用v-for指令将 Vue 对象数组绑定到 HTML 元素的“数组(array)”：

<divid="app"><ul><liv-for="xintodos">{{x.text}}</li></ul></div><script>myObject=newVue({el:'#app',data:{todos:[{text:'学习JavaScript'},{text:'学习Vue.js'},{text:'学编程从W3Cschool开始'}]}})</script>

到此，相信大家对“Vue.js双向绑定的方法是什么”有了更深的了解，不妨来实际操作一番吧！这里是恰卡编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！