• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > Vue.js双向绑定操作技巧(初级入门)

Vue.js双向绑定操作技巧(初级入门)

作者:黄色闪光 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含vue.js双向绑定,vue.js双向绑定原理,vue.js事件绑定,vue.js 绑定id,vue.js 数据绑定等相关知识,黄色闪光 希望在学习及工作中可以帮助到您

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

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

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

下面是一个最基础的实例

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

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

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

下图为运行后的结果

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

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

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

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

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

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

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

以上所述是小编给大家介绍的Vue.js双向绑定操作技巧(初级入门),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

</div>

您可能想查找下面的文章:

  • vue.js双向数据绑定实现原理
  • Vue实现双向数据绑定
  • Vue.js双向绑定操作技巧(初级入门)
  • Vue.js双向绑定实现原理详解
  • vue双向绑定的简单实现
  • 深入理解vue.js双向绑定的实现原理
  • Vue.js每天必学之内部响应式原理探究

相关文章

  • 2017-05-30详解vue.js组件化开发实践
  • 2017-05-30Vue.js报错Failed to resolve filter问题的解决方法
  • 2017-05-30超全面的vue.js使用总结
  • 2017-05-30Vue制作Todo List网页
  • 2017-05-30vue实现简单表格组件实例详解
  • 2017-05-30Vue.js教程之axios与网络传输的学习实践
  • 2017-05-30vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
  • 2017-05-30Vue.js:使用Vue-Router 2实现路由功能介绍
  • 2017-05-30详解Vuejs2.0之异步跨域请求
  • 2017-05-30vue的Virtual Dom实现snabbdom解密

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Vue数据驱动模拟实现4
    • 详解vue-validator(vue验证器)
    • require.js 加载 vue组件 r.js 合并压缩的实例
    • Vue.JS入门教程之自定义指令
    • vue.js 1.x与2.0中js实时监听input值的变化
    • vue双向数据绑定原理探究(附demo)
    • vue+axios实现登录拦截的实例代码
    • vue如何引用其他组件(css和js)
    • bootstrap vue.js实现tab效果
    • Vue制作Todo List网页

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有