1.案例：名字合并(监听data数据的改变)

　　使用keyup事件监听data数据的改变

<!DOCTYPE html>

<html>

<head>

    <title>案例：名字合并</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- 导入vue的包 -->

    <script type="text/javascript" src="vue2.js"></script>

</head>

<body>

    <div id="app">

        <input type="text" v-model="firstname" @keyup="getFullName">+

        <input type="text" v-model="lastname" @keyup="getFullName">=

        <input type="text" v-model="fullname">

    </div>

    <script type="text/javascript">

        //创建一个vue实例

        var vm = new Vue({

            el: '#app',

            data: {

                firstname: '',

                lastname: '',

                fullname: ''

            },

            methods: {

                getFullName() {

                    this.fullname = this.firstname + "--" + this.lastname;

                }

            }

        });

    </script>

</body>

</html>

　　使用watch监听data数据的改变

<!DOCTYPE html>

<html>

<head>

    <title>案例：名字合并</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- 导入vue的包 -->

    <script type="text/javascript" src="vue2.js"></script>

</head>

<body>

    <div id="app">

        <input type="text" v-model="firstname">+

        <input type="text" v-model="lastname">=

        <input type="text" v-model="fullname">

    </div>

    <script type="text/javascript">

        //创建一个vue实例

        var vm = new Vue({

            el: '#app',

            data: {

                firstname: '',

                lastname: '',

                fullname: ''

            },

            methods: {

            },

            watch: {//监听data中指定数据的变化，然后触发对应的function处理函数

                //firstname可以加引号，也可以不加。当中间有-时必须加

                firstname: function(newVal, oldVal) {

                    // this.fullname = this.firstname + "--" + this.lastname;

                    this.fullname = newVal + "--" + this.lastname;

                },

                lastname: function(newVal, oldVal) {

                    this.fullname = this.firstname + "--" + newVal;

                }

            }

        });

    </script>

</body>

</html>

2.watch-监视路由地址的改变

<!DOCTYPE html>

<html>

<head>

    <title> watch监听路由的改变 </title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- 导入vue的包 -->

    <script type="text/javascript" src="vue2.js"></script>

    <!-- 安装 vue-router 路由模块 -->

    <script type="text/javascript" src="vue-router.js"></script>

</head>

<body>

    <div id="app">

        <p>

        <router-link to="/com1">Go to com1</router-link>

        <router-link to="/com2">Go to com2</router-link>

        </p>

        <!-- 路由出口, 路由匹配到的组件将渲染在这里 -->

        <router-view></router-view>

    </div>

    <script type="text/javascript">

        // 组件的模板对象

        var com1 = {

            template: "<h2>这是组件1</h2>"

        };

        var com2 = {

            template: "<h2>这是组件2</h2>"

        };

        // 创建一个路由对象

        var routerObj = new VueRouter({

            routes: [  // 路由匹配规则

                {path: '/com1', component: com1},

                {path: '/com2', component: com2}

            ]

        });

        //创建一个vue实例

        var vm = new Vue({

            el: '#app',

            data: {

            },

            methods: {

            },

            router: routerObj,

            watch: {

                '$route.path': function(newVal, oldVal) {

                    //alert(newVal + "------------" + oldVal);

                    if(newVal === '/com1'){

                        alert("进入到组件com1");

                    }else if(newVal === '/com2'){

                        alert("进入到组件com2");

                    }

                }

            }

        });

    </script>

</body>

</html>

3.computed-计算属性的使用和3个特点

<!DOCTYPE html>

<html>

<head>

    <title>案例：名字合并</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- 导入vue的包 -->

    <script type="text/javascript" src="vue2.js"></script>

</head>

<body>

    <div id="app">

        <input type="text" v-model="firstname">+

        <input type="text" v-model="lastname">=

        <input type="text" v-model="fullname">

    </div>

    <script type="text/javascript">

        //创建一个vue实例

        var vm = new Vue({

            el: '#app',

            data: {

                firstname: '',

                lastname: '',

            },

            methods: {

            },

            watch: {

            },

            //在computed中，可以定义一下属性，这些属性叫做计算属性；计算属性本质就是一个方法；

            computed: {

                //使用计算属性时，直接当做data属性来使用。

                //计算属性的结果会被缓存，下次使用该计算属性时，从缓存中取。

                //只要计算属性依赖的data数据发生了变化，该计算属性就会重新计算，并更新缓存。

                //注意：计算属性必须要有return结果，该结果就是计算属性的值。

                fullname: function() {

                    return this.firstname + "----" +this.lastname;

                }

            }

        });

    </script>

</body>

</html>

vue学习-day05 -- 案例：名字合并(监听data数据的改变)的更多相关文章

  1. vue里的watch 和 computed 监听的不同

    1.computed里是偏向于通过监听data里的值变化后,经过运算返回一个新的计算结果, 所以k不能与data里的k重名,并且必须有return, 能够缓存,依赖的值不变化不会进行重复计算: 而wa ...

  2. Httpd服务入门知识-Httpd服务常见配置案例之修改监听的IP和Port

    Httpd服务入门知识-Httpd服务常见配置案例之修改监听的IP和Port 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看默认配置 [root@node101.yinzh ...

  3. vue中给window添加滚动监听无效的解决方案

    原文链接: 点我 页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作.我相信不少网友查阅过类似的资料,网友给出的解决方案, ...

  4. 从Wireshark监听的数据中提取需要的数据

    最近,需要将wireshark监听的数据进行提取,分两步:首先,应该得出wireshark的数据包吧,在图形化界面中可以非常直观的将监听数据进行存储,但是这样需要手动操作非常麻烦,而且容易出错(随着处 ...

  5. 时时监听input内容的改变

    心得:我们都知道input有一个change事件,但是是在input元素失去焦点的时候发生,不能时时的监听input内容的改变. 刚开始的时候我是想用setInterval设置计时器的原理定时监听in ...

  6. vue中的数据监听以及数据交互

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...

  7. Oracle数据库中的几个名字及监听的配置问题

    学习数据库的时候,由于数据库只建了一个库,而且只是本机访问,所以没有对listener.ora与tnsname.ora这两个文件进行过多设置,但是实际中要区分客户端与服务器端,相互之间的访问就存在微妙 ...

  8. onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. Vue引用第三方datepicker插件无法监听datepicker输入框的值

    一.背景 在Vue项目中使用了第三方的datepicker插件,在选择日期后vue无法检测到datepicker输入框的变化 <label class="fl">日期: ...

随机推荐

  1. 1 Java基础知识

    1)面向对象的特性有哪些? 答:封装.继承和多态. 2)Java 中覆盖(Override)和重载(Overload)是什么意思? 答:覆盖是指子类对父类方法的一种重写,只能比父类抛出更少的异常,访问 ...

  2. 【FFMPEG】网络流媒体协议

    目录(?)[-] RTP RTCP SRTP SRTCP RTSP RTSP 和RTP的关系 SDP RTMPRTMPS mms HLS RTP           参考文档 RFC3550/RFC3 ...

  3. flask第一级

    #从flask这个包中导入Flask这个类 #Flask这个类是项目的核心,以后很多操作都是基于这个类的对象 #注册url.注册蓝图等都是基于这个类的对象 from flask import Flas ...

  4. 第十周java总结

    Java IO 1.file类 file类的构造方法: public Flie(String pathname) -->实例化Flie类的时候,必须设置好路径. 如:Flie f = new F ...

  5. HDU 1250 Hat's Fibonacci （递推、大数加法、string）

    Hat's Fibonacci Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  6. [转帖]达梦数据库（DM6)和ORACLE 10g的异同点

    达梦数据库(DM6)和ORACLE 10g的异同点    https://bbs.aliyun.com/detail/351337.html   花花浪子 级别: 小白 发帖 0 云币 -41 加关注 ...

  7. [转帖]2017年新闻: 中国CPU还在“群雄割据” ，印度已确定了国家指令集

    中国CPU还在“群雄割据” ,印度已确定了国家指令集 时间:2017-12-21 作者:观察者网 https://www.eet-china.com/news/201712210610.html   ...

  8. Spring Boot解决无法访问图片的问题

    找了很多Spring Boot项目访问图片的解决方式,发现都是配置的,有时配置了也没有用.然后自己研究了一种简单操作的方法. 1,在Spring Boot的static目录下创建一个新目录img(或者 ...

  9. mysql表优化

    一.定期分析表 ANALYZE [LOCAL | NO_WRITE_TO_BINLOG] TABLE tbl_name [, tbl_name] 二.定期检查表 CHECK TABLE tbl_nam ...

  10. 分位数回归及其Python源码

    分位数回归及其Python源码 天朗气清,惠风和畅.赋闲在家,正宜读书.前人文章,不得其解.代码开源,无人注释.你们不来,我行我上.废话少说,直入主题.o(￣︶￣)o 我们要探测自变量 与因变量 的关 ...