vue.js初级入门之最基础的双向绑定操作

开发 前端
vue.js最重要的一个特点就是双向数据绑定也就是我们常说的MVVM:Model-View-ViewModel。我们要实现双向绑定首先当然要有“双向”,这里vue.js为我们提供了View层和Model层。View层就是在HTML中的代码,Model层则是Javascript代码。

首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery)

vue.js初级入门之最基础的双向绑定操作

[[179978]]

引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门。

vue.js最重要的一个特点就是双向数据绑定也就是我们常说的MVVM:Model-View-ViewModel。我们要实现双向绑定首先当然要有“双向”,这里vue.js为我们提供了View层和Model层。View层就是在HTML中的代码,Model层则是Javascript代码。

下面是一个最基础的实例

vue.js初级入门之最基础的双向绑定操作 

[[179979]]

代码中标注了view层与model层的开始位置和结束位置。

在view层中我们需要创建一个标签来显示model层中程序运行的结果,并且我们要为这个标签添加一个类或者ID,这个实例中我为一个div标签添加了一个名为app的ID。

model层中是我们要执行的代码,首先我们要创建一个新的Vue对象,对象中的el对应的值是我们之前在view层中创建的标签的类名或ID名(这个标签就是vue对象的作用范围),data对应的值又是一个对象,这个对象中的键是我们在view层中“{{}}”里的代码,而值则是显示的结果。

下图为运行后的结果

[[179980]]

为了方便理解,在下面的代码中我修改了message的值并在data中新增了一个键值对

[[179981]]

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

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

下面我们将对数据进行双向绑定

[[179982]]

在这个实例中我们添加了一个input标签,这个input标签中有一个名为v-model的属性。我们可以清楚的看见v—model属性的值与我们在p标签“{{}}”内的值以及data中的键名一样,这就是我们实现双向绑定的关键。

下面是实例3运行的结果。

上边为p标签显示的内容,下边是input标签的内容,这时我们就可以通过修改input的内容来改变p标签里的内容,至此我们就完成了最基础的双向绑定操作。

责任编辑:张燕妮 来源: 博客园
相关推荐

2024-01-02 07:48:52

Vue.js双向绑定属性简化

2021-02-19 23:07:02

Vue绑定组件

2022-08-22 09:01:24

Vue响应式原则双向数据绑定

2018-04-04 10:32:13

前端JavascriptVue.js

2017-07-04 17:55:37

Vue.js插件开发

2016-11-04 19:58:39

vue.js

2020-09-16 06:12:30

Vue.js 3.0Suspense组件前端

2018-07-10 15:35:33

Vue前端架构

2021-04-02 11:24:22

Vue2.x双向绑定前端

2017-08-30 17:10:43

前端JavascriptVue.js

2022-01-19 22:18:56

Vue.jsVue SPA开发

2017-07-11 18:00:21

vue.js数据组件

2017-07-20 11:18:22

Vue.jsMVVMMVC

2021-09-13 09:20:20

前端框架VUE

2016-11-01 19:10:33

vue.js前端前端框架

2017-07-14 10:10:08

Vue.jsMixin

2020-09-07 14:40:20

Vue.js构建工具前端

2021-01-22 11:47:27

Vue.js响应式代码

2022-04-04 16:53:56

Vue.js设计框架

2019-04-01 19:38:28

Vue.jsJavascript前端
点赞
收藏

51CTO技术栈公众号