首先，介绍vue.js和其他需要使用或可能在页面上使用的插件(这里我引用bootstrap和jquery)

引用时需要注意文件的路径，准备工作基本完成。现在你可以开始了。

vue.js最重要的特性是双向数据绑定，通常称为mvvm: model-view-viewmodel。要实现双向绑定，首先要有“双向”。这里，vue.js为我们提供了视图层和模型层。视图层是HTML中的代码，模型层是Javascript代码。

下面是一个基本的例子

代码中标记了视图层和模型层的开始和结束位置。

在视图层，我们需要创建一个标签来显示程序在模型层运行的结果，我们需要在这个标签中添加一个类或者ID。在这个例子中，我给div标签添加了一个名为app的ID。

模型层是我们想要执行的代码。首先，我们要创建一个新的Vue对象。对象中el对应的值是我们之前在视图层创建的标签的类名或ID名(这个标签是vue对象的范围)，数据对应的值是一个对象。这个对象中的键是视图层中“{{}”中的代码，而值是显示的结果。

下图显示了运行后的结果

为了便于理解，在下面的代码中，我修改了message的值，并在数据中添加了一个键值对

这是实例修改后的运行结果

对比示例1和示例2的代码和运行结果，相信大家可以更清楚地了解vue.js的基本工作原理。

接下来，我们将双向绑定数据

在这个例子中，我们添加了一个输入标签，它有一个名为v-model的属性。我们可以清楚地看到，V-model属性的值与P标签“{{}”中的值以及数据中的键名相同，这是实现双向绑定的关键。

以下是运行示例3的结果。

上半部分显示P标签的内容，下半部分显示输入标签的内容。此时，我们可以通过修改输入的内容来改变P标签的内容，我们已经完成了最基本的双向绑定操作。

以上是边肖介绍的Vue.js双向绑定操作技巧(初级)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！