Vue中的数据监听和数据交互案例解析


Posted in Javascript onJuly 12, 2017

现在我们来看一下vue中的数据监听事件$watch,

js代码:

new Vue({
        el:"#div",
        data:{
          arr:[1,2,3]
        }
      }).$watch("arr",function () {
        alert("数据改变了")
      })

html代码:

<div id="div">
<input type="button" value="改变" @click="arr.push(5)">
<h1>
  {{arr}}
</h1>
</div>

这就是数组的监听,对于json我们也是一样的,但是我们得给他一个深度监听,$watch的第三个参数{deep:true}。

angular 中的数据交互有$http,同样对于vue我们也是有数据交互的,有post,get以及jsonp的方法。

我们在这里做一个简单的百度搜索功能

css代码:

a{
      text-decoration: none;
      color: black;
    }
    #div{
      text-align: center;
      padding-top: 50px;
    }
    input{
      height: 25px;
      width: 500px;
      border-radius: 5px;
      outline: none;
    }
    ul{
      margin-left:470px;
      margin-top: 0;
    }
    li{
      height: 25px;
      text-align: left;
      border:1px solid gray;
      list-style: none;
      width: 500px;
    }

js代码:

new Vue({
        el:"#div",
        data:{
          msg:" ",
          arr:[]
        },
        methods:{
          get:function () {
            this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?',{
              wd:this.msg
            },{
              jsonp: 'cb'
            }).then(function(res){
              this.arr=res.data.s
            },function(s){
              console.log(s);
            });
          }
        }
      })

html代码:

<div id="div">
<input type="text" v-model="msg" @keyup="get()">
<ul>
  <li v-for="item in arr"><a href="javascript:;" rel="external nofollow" >{{item}}</a></li>
</ul>
</div>

这样一个简单的小案例就做好了。

以上所述是小编给大家介绍的Vue中的数据监听和数据交互案例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
js 监控iframe URL的变化实例代码
Jul 12 #Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 #Javascript
基于zepto.js实现手机相册功能
Jul 11 #Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 #Javascript
详解Webpack DLL用法以及功能
Jul 11 #Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 #Javascript
You might like
PHP实现用户认证及管理完全源码
2007/03/11 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
Javascript this指针
2009/07/30 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
安全检查验收制度
2014/01/12 职场文书
机械工程师岗位职责
2014/06/16 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
股权投资协议书
2016/03/23 职场文书
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python