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. Vue-cli 鼠标监听事件之滚动条

    <template>   <div class="scroll">     <div class="scroll-div-outer&quo ...

  2. Studio 3T 破解教程

    亲测可用 ,且小编一直在使用 1.创建文件studio3t.bat 并将下面这段内容复制 @echo off ECHO 重置Studio 3T的使用日期...... FOR /f "toke ...

  3. 渗透测试环境搭建以及使用sqlmap获取mysql用户数据库密码

    通过sqlmap检测sql注入漏洞 安装SQLmap漏洞查看工具 安装渗透测试演练系统DVWA 使用SQLmap进行sql注入并获得后台管理员adnim帐号和密码 环境介绍 安装SQLmap:Rich ...

  4. ROS安装（国内源）

    1.添加源 1.1 USTC源 sudo sh -c '. /etc/lsb-release && echo "deb http://mirrors.ustc.edu.cn/ ...

  5. spring aop之父子容器

    需求;项目对外提供接口,要求每个对外接口都要进行token认证. 解决办法:写一个token认证的工具类,在每个需要认证的接口方法开始的地方,调用工具类中的token认证方法. 问题:因为要满足指定条 ...

  6. str 小列题

    name = " aleX leNb "#2.有变量 完成如下操作: 移除 name 变量对应的值两边的空格,并输出处理结果 name=name.strip() print(nam ...

  7. 剑指offer-顺时针打印矩阵-数组-python

    题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数 ...

  8. 【原创】Themida 2260 虚拟机 FISH 初探(一)

    标 题: [原创]Themida 2260 虚拟机 FISH 初探(一)作 者: xiaohang时 间: 2016-03-03,00:39:37链 接: http://bbs.pediy.com/s ...

  9. luogu P5341 [TJOI2019]甲苯先生和大中锋的字符串

    传送门 考虑子串以及出现个数,可以发现SAM可以快速知道每种子串的出现次数,即所在状态的\(endpos\)集合大小,然后一个状态对应的子串长度是一段连续区间,所以可以对每个状态差分一下,就能统计答案 ...

  10. java复习(3)继承

    一.继承为题的提出 ---------------------------------------------------- 我们知道面向对象的三大特性是:封装.继承和多态,可以知道继承在java应用 ...