考虑一个问题:想要实现 两个文本框的内容改变,则全名的文本框中的值也跟着改变;(用以前的知识如何实现???)

  1. 监听data中属性的改变:

 <div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>
 ​
  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen',
        fullName: 'jack - chen'
      },
      methods: {},
      watch: {
        'firstName': function (newVal, oldVal) { // 第一个参数是新数据,第二个参数是旧数据
          this.fullName = newVal + ' - ' + this.lastName;
        },
        'lastName': function (newVal, oldVal) {
          this.fullName = this.firstName + ' - ' + newVal;
        }
      }
    });
  </script>
 ​
  1. 监听路由对象的改变:

 <div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
 ​
    <router-view></router-view>
  </div>
 ​
  <script>
    var login = Vue.extend({
      template: '<h1>登录组件</h1>'
    });
 ​
    var register = Vue.extend({
      template: '<h1>注册组件</h1>'
    });
 ​
    var router = new VueRouter({
      routes: [
        { path: "/login", component: login },
        { path: "/register", component: register }
      ]
    });
 ​
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: router,
      watch: {
        '$route': function (newVal, oldVal) {
          if (newVal.path === '/login') {
            console.log('这是登录组件');
          }
        }
      }
    });
  </script>
 ​

Vue学习笔记【30】——Vue路由(watch属性的使用)的更多相关文章

  1. 【Vue学习笔记】—— vue的基础语法 { }

    学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...

  2. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  3. vue学习笔记:vue的认识与特点与获取

    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...

  4. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  5. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  6. Vue学习笔记之Vue组件

    0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...

  7. Vue学习笔记之Vue指令系统介绍

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...

  8. Vue学习笔记之Vue的使用

    0x00 安装 对于新手来说,强烈建议大家使用<script>引入 0x01 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. ...

  9. Vue学习笔记之Vue学习前的准备工作

    0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...

  10. Vue学习笔记之Vue知识点补充

    0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...

随机推荐

  1. ConcurrentLinkedQueue和LinkedBlockingQueue区别

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11394436.html 线程安全队列类图 两者的区别在于 ConcurrentLinkedQueue基 ...

  2. Activity(工作流-1)

    1.activity自带数据表的含义(23张表) (1)资源库流程规则表 1)act_re_deployment 部署信息表 2)act_re_model  流程设计模型部署表 3)act_re_pr ...

  3. ApplicationContext.xml模板

      <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www. ...

  4. 01 spring security入门篇

    1. 环境搭建 使用SpringBoot搭建开发环境,只需在pom.xml添加如下依赖即可. <?xml version="1.0" encoding="UTF-8 ...

  5. JS中数据结构之列表

    列表是一组有序的数据.每个列表中的数据项称为元素.在 JavaScript 中,列表中的元素可以是任意数据类型.列表中可以保存多少元素并没有事先限定并可以不断壮大,实际使用时元素的数量受到程序内存的限 ...

  6. 10.17 linux 文件权限

    文件权限模拟练习 [root@wen ~]# groupadd incahome[root@wen ~]# usersdd oldboy -g incahome-bash: usersdd: comm ...

  7. Radical and array

    Radical and array 时间限制: 1 Sec  内存限制: 128 MB提交: 46  解决: 27[提交][状态] 题目描述 Radical has an array , he wan ...

  8. bugku | sql注入2

    http://123.206.87.240:8007/web2/ 全都tm过滤了绝望吗? 提示 !,!=,=,+,-,^,% uname=admin&passwd=1' and '1 : 一个 ...

  9. Cocos2d-x之定时器

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 每一个游戏程序都有一个循环在不断运行,它是由导演对象来管理与维护.如果需要场景中的精灵运动起来,可以在游戏循环中使用定时器对精灵等对象进行 ...

  10. VC6.0在Win8,10下的兼容性调整

    Microsoft Visual C++ 6.0,简称VC6.0,是微软推出的一款C++编译器,将“高级语言”翻译为“机器语言(低级语言)”的程 序.Visual C++是一个功能强大的可视化软件开发 ...