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. 【CUDA】CUDA框架介绍

    引用 出自Bookc的博客,链接在此http://bookc.github.io/2014/05/08/my-summery-the-book-cuda-by-example-an-introduct ...

  2. yum源迁移（思路具体操作之后加）

    准备工作,有一台能联网的机器装有liunx系统 首先在联网机器下载yum系列包(yum命令如果不存在的话只能通过安装包的形式进行安装这里不考虑yum命令不存在情况) 修改配置文件使得yum命令只下载不 ...

  3. Spring（七）--Spring JDBC

    Spring JDBC 1.需要的实体类和数据库 2.需要的dao层 package com.xdf.dao; import com.xdf.bean.Student; import org.spri ...

  4. 洛谷 P3386 二分图匹配 题解

    题面 这道题虽然是练习匈牙利算法的,但可以用网络流来切掉它: 我们可以建立一个超级源和一个超级汇,超级源连接左部分点,超级汇连接右部分点: 然后在该图上跑最大流就可以了: PS:我设的超级源是2001 ...

  5. 第一课 初识Linux(一)

    Linux起源 创始人:李纳斯.托瓦兹 Linux简介: Linux是一套免费使用和自由传播的类UNIX操作系统:是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.Lin ...

  6. 网页嵌入pdf、在线预览pdf工具及插件（转）

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  7. Bug快到碗里来

    Bug快到碗里来 python错误--'list' object is not callable 原因及解决方法1 你定义了一个变量的变量名和系统自带的关键字冲突,调用变量时关键字被传到调用的位置,就 ...

  8. CSS 相对定位 绝对定位

    css中的相对定位和绝对定位. 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将 ...

  9. 运维LVS三种模式十种调度算法

    一.LVS简介 LVS(Linux Virtual Server)即Linux虚拟服务器,是由章文嵩博士主导的开源负载均衡项目,目前LVS已经被集成到Linux内核模块中.该项目在Linux内核中实现 ...

  10. 判断浏览器类型JS

    // 判断浏览器类型 getExplorer() { var explorer = window.navigator.userAgent, compare = function (s) { retur ...