前言

Vue是前端开发大牛必备的神器，也是目前最火热的JavaScript 框架。作为一名前端开发工程师，如果掌握了Vue的精髓，不仅写起代码来得心应手，也能为你的升职涨薪加分。下面来看看Vue的精髓之一数据绑定。

前端开发通俗来讲就做两件事：一件就是将界面做到极致，说白了就是高还原度的还原UI设计师的UI设计；第二件就是让界面有血有肉，这个血肉就是将数据通过一定的逻辑渲染出来。

Vue的数据绑定就是造血肉的，有两种用法：一种是单向数据绑定，一种是双向数据绑定。

单向数据绑定

单向数据绑定很好理解，就是将后端开发的接口所返回的数据按照一定的规则显示在界面上。

下面通过一个具体的实例来看看Vue是如何将数据显示在页面上：

Vue 当前的版本是：{{version}}

上面的这段代码要实现的效果是：在页面上显示“Vue 当前的版本是：2.1” ，那么2.1 就是需要绑定该页面的数据。在Vue的语法中可以通过模板语法“{{}}”，将需要绑定的数据通过模板语法“{{version}}”来表示，变量version，就是动态显示的版本号。接下来要做的就是这个version变量的赋值，以下就是JS部分的代码：

var demo = new Vue({  el: '#demo',  data: {    version: '2.1'  }})

这段代码很简洁，通过定义一个Vue 对象，通过“el”属性对应上面的DOM元素的id，data属性则是以JSON对象的方式，定义了version这个属性的值为2.1，点这个值发生改变时，则页面展示Vue 当前的版本是：XXX,也会随之改变，这就完成了将数据绑定到页面的单向绑定。

双向数据绑定

双向绑定从字面上理解，不难看出界面和数据之间的影响是双向的。

如何深入理解双向绑定呢？这里面先引入模型的概念，和MVC开发模式中的M，也即Model，它是用于实体数据的表示。

双向绑定就是指页面与数据模型Model之间相互影响，当页面发生变化时，与页面绑定的Model也会发生改变；当Model改变时，页面绑定的该Model的元素也会随之改变。双向绑定最典型的应用场景就是表单的应用。通过下面的代码来看看双向数据绑定的应用：

登录

上面是一段简单的登录界面，在点击“登录”按钮时，需要获取输入的“手机号码”和“密码”，那么在Vue 中如何实现呢？

首先分别为手机号和密码定义Model，这是通过上面 v-model 来完成；然后就需要完成从页面元素到Model的影响：输入不同的手机号，Model的值也会随之改变。通过以下部分JS代码来看看：

var loginView = new Vue({  el: '#loginView',  data: {    Mobile: '',    Pwd:''  }})

以上代码中data对象的两个属性"Mobile"和"Pwd"就代表了输入的手机号和密码的值。整个代码完成了页面元素到Model的绑定，那么这个绑定是如何实现呢？这就是上面讲到的单向绑定的过程了，将JS代码小改一下看看：

var loginView = new Vue({  el: '#loginView',  data: {    Mobile: '',    Pwd:'123456'  }})

当给“Pwd”属性赋值时，输入框就有值了，默认并不是空。到这里双向绑定就完全完成了。

总结

数据绑定概括来讲就是页面元素与定义的数据Model之间的相互赋值，用于渲染页面元素或是获取页面元素的值。

大家不妨结合上面的代码，动手试一试，应该可以完全理解。

更多web开发知识，欢迎关注“lelingtech的AI之路”

.net vue漂亮登录界面_一文弄懂前端框架Vue 的核心——数据绑定，为升职涨薪加分相关推荐

.net vue漂亮登录界面_基于 electron-vue 开发的音乐播放器「实践」
作者:XiaoTuGou 转发链接:https://github.com/SmallRuralDog 前言基于 electron-vue 开发的音乐播放器,界面模仿QQ音乐. 技术栈electron ...
vue ui框架_你为什么要使用前端框架Vue?
1.前端框架的根本意义 1.1 前端框架的好处最开始学习前端框架的时候(我第一个框架是 React)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框 ...
CAD2010 为了保护_一文弄懂，锂电池的充电电路，以及它的保护电路方案设计
原标题:一文弄懂,锂电池的充电电路,以及它的保护电路方案设计锂电池特性首先,芯片哥问一句简单的问题,为什么很多电池都是锂电池? 锂电池,工程师对它都不会感到陌生.在电子产品项目开发的过程中,尤其是 ...
python开发前端后端区别_一文看懂前端和后端开发
作为一名开发者,你可能会想:2019 年最好的软件开发技术和编程语言会是什么?它们又是如何被应用在软件开发当中的?如果你在思考这个问题,那就来对地方了.这篇文章将对前端和后端开发技术做一个对比,先从基 ...
python前端开发和后端开发工程师_一文看懂前端和后端开发
作为一名开发者,你可能会想:2019 年最好的软件开发技术和编程语言会是什么?它们又是如何被应用在软件开发当中的?如果你在思考这个问题,那就来对地方了.这篇文章将对前端和后端开发技术做一个对比,先从基 ...
.net vue漂亮登录界面_6个宝藏级Vue管理后台框架必须收藏
10月5号00:45尤小右在微博公布尚处于pre-alpha状态的Vue 3源码,主要的架构改进.优化和新功能均已完成,剩下的便是Vue 2现有功能的移植了-- 一经发布网友纷纷表示"扶我起 ...
查看dataloader的大小_一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
以下内容都是针对Pytorch 1.0-1.1介绍. 很多文章都是从Dataset等对象自下往上进行介绍,但是对于初学者而言,其实这并不好理解,因为有的时候会不自觉地陷入到一些细枝末节中去,而不能把握 ...
Stale branches 设置_一文弄懂！Word页眉页脚设置，So easy~
点击上方蓝字关注星标★不迷路论文排版,一直是同学们非常头疼的问题. 其中,最让人头疼的,就是页眉页脚的设置了. 毕竟,页眉页脚「牵一发而动全身」,稍微修改一点,其他的都会变动,很是麻烦. 为了帮助大 ...
jh锂电保护电路_一文弄懂，锂电池的充电电路，以及它的保护电路方案设计
锂电池特性首先,芯片哥问一句简单的问题,为什么很多电池都是锂电池? 锂电池,工程师对它都不会感到陌生.在电子产品项目开发的过程中,尤其是遇到电池供电的类别项目,工程师就会和锂电池打交道. 这是因为锂 ...
获取系统分辨率_一文弄懂高分辨率高速快门CMOS成像传感器技术应用现状
CMOS图像传感器是如何一步步占领市场的?ams面扫描成像传感器高级应用工程师Pieterjan Daeleman认为机器视觉行业对图像传感器的高分辨率.高速率性能的要求,带给CMOS图像传感器无限机 ...

.net vue漂亮登录界面_一文弄懂前端框架Vue 的核心——数据绑定，为升职涨薪加分

前言

单向数据绑定

双向数据绑定

总结

.net vue漂亮登录界面_一文弄懂前端框架Vue 的核心——数据绑定，为升职涨薪加分相关推荐

最新文章

热门文章