【郑州校区】前端与移动开发之vue-day4（4） - 黑马程序员技术交流社区

考虑一个问题：想要实现名和姓两个文本框的内容改变，则全名的文本框中的值也跟着改变；（用以前的知识如何实现？？？）

监听data中属性的改变：

[AppleScript] 纯文本查看 复制代码

<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>

[AppleScript] 纯文本查看 复制代码

<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>