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. 意想不到的JavaScript（每日一题2）

    问题一: 答案: 解析:

  2. 应用安全 - 中间件 - Tomcat - 漏洞 - 汇总

    管理后台弱口令 CVE-2019-0232 Date 类型 任意代码执行 影响版本 Apache Tomcat .M1 to Apache Tomcat to Apache Tomcat to 前置条 ...

  3. USACO1.6 回文质数 Prime Palindromes

    题目传送门 题目的提示已经非常明显了,可以先生成回文数再判断质数,因为生成回文数的复杂度较小.判断质数用了之前学到的那种做法. 其实可以用一些比较优秀的筛质数的方法,再判断回文数. /* ID: St ...

  4. SPOJ 4003 Phone List 题解

    题面 啊~,很水的一道trie树模板题: 当两个串存在关系时情况有两种: 若当前串插入后没有任何新建节点,则该串肯定是之前插入的某个串的前缀: 若在插入的时候,有某个经过的节点带有某串结尾的标记,则之 ...

  5. HDU-5201 The Monkey King

    题目描述 \(m\)个猴子分\(n\)个桃,要求第一个猴子的桃数严格大于其他猴子,问有多少种分法对\(1e9+7取模(\%1e9+7)\) Input \(1≤T≤25 ,1≤n,m≤100000\) ...

  6. 如何输出opencv编译信息

    本文链接:https://mangoroom.cn/opencv/how-to-print-compile-info-of-opencv.html opencv提供了一个函数,利用这个函数可以输出当前 ...

  7. Forsaken给学生分组

    链接:https://ac.nowcoder.com/acm/contest/1221/C来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言5242 ...

  8. php开发环境推荐使用

    万丈高楼平地起,好用得环境才能建立宏伟大厦,php开发环境推荐使用 1,自己安装 lamp 环境 linux+apache+mysql+php 2,自己安装 lnmp 环境 linux+nginx+m ...

  9. gym102215题解

    A Rooms and Passages 题意 给n个数,从起点出发,一直往右走,遇到一个前面出现过其相反数的正数就停下,问对于每个起点都能走多少步. 分析 倒着递推,如果起点是正数,那么肯定可以走, ...

  10. javascript高级程序设计读书笔记-事件（一）

    读书笔记,写的很乱   事件处理程序   事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别  没有DOM1 同样的事件 DOM0会顶掉html事件   因为他们都是属性  而 ...