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 相关文章推荐
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
页面使用密码保护代码
Apr 10 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python实现随机梯度下降法
2020/03/24 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
python字典的遍历3种方法详解
2019/08/10 Python
python字符串反转的四种方法详解
2019/12/02 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
Weblogc domain问题
2014/01/27 面试题
艺术应用与设计个人的自我评价
2013/11/23 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
优秀语文教师事迹
2014/05/18 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
员工辞退通知书
2015/04/17 职场文书
不同意离婚答辩状
2015/05/22 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
理解python中装饰器的作用
2021/07/21 Python