Vue.js 踩坑记之双向绑定


Posted in Javascript onMay 03, 2018

这篇体验一下VUE的双向绑定

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <div id="app">
    <input type="text" v-model="CurrentTime" placeholder="当前时刻">
    <h1>当前时刻{{ CurrentTime }}</h1>
  </div>
  <script>
  var app = new Vue({
    el:'#app',
    data:{
      CurrentTime: new Date()
    },
    mounted:function(){
      var _this = this;
      this.timer = setInterval(function(){
        _this.CurrentTime = new Date();
      },1000);
    },
    beforeDestroy:function(){
      if(this.timer){
        clearInterval(this.timer);
      }
    }
  });
  </script>
</body>
</html>

Vue.js 踩坑记之双向绑定 

{{ }} 是所谓的文本插值的方法,目的是显示双向绑定的数据

mounted 表示el挂载到实例上调用的事件

beforeDestory 是实例销毁以前调用

在上例中,在mounted事件中创建了一个定时器,每隔一秒就把当前时间写入文本框中,由于双向绑定的原因,H1标签的文本也会跟着变化,和文本框的文本保持一致。在beforeDestory事件里在Vue实例销毁前则会清除定时器

总结

以上所述是小编给大家介绍的Vue.js 踩坑记之双向绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
javascript数组去重方法分析
Dec 15 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
js实现双色球效果
Aug 02 Javascript
javascript之Object.assign()的痛点分析
Mar 03 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 #Javascript
Node.Js中实现端口重用原理详解
May 03 #Javascript
原生JS实现的雪花飘落动画效果
May 03 #Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 #Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 #Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 #Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 #Javascript
You might like
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
JS实现div模块的截图并下载功能
2017/10/17 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
解决vue移动端适配问题
2018/12/12 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
使用python统计文件行数示例分享
2014/02/21 Python
python基础教程之Hello World!
2014/08/29 Python
Python实现合并字典的方法
2015/07/07 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python3爬虫全国地址信息
2019/01/05 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
车间班长岗位职责
2013/11/30 职场文书
三方协议书范本
2014/04/22 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
师德标兵事迹材料
2014/12/19 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
创业计划书之废品回收
2019/09/26 职场文书
Android实现图片九宫格
2022/06/28 Java/Android
mysql sock 文件解析及作用讲解
2022/07/15 MySQL