watch属性的使用

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

• 监听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>

  
  

watch属性的使用

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

• 监听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>