一：监视

1.使用keyup

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <!-- 分析： -->

    <!-- 1. 我们要监听到 文本框数据的改变，这样才能知道 什么时候去拼接 出一个 fullname -->

    <!-- 2. 如何监听到 文本框的数据改变呢？？？ -->

    <input type="text" v-model="firstname" @keyup="getFullname"> +

    <input type="text" v-model="lastname" @keyup="getFullname"> =

    <input type="text" v-model="fullname">

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        firstname: '',

        lastname: '',

        fullname: ''

      },

      methods: {

        getFullname() {

          this.fullname = this.firstname + '-' + this.lastname

        }

      }

    });

  </script>

</body>

</html>

　　

2.使用watch监视文本框的变化

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.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>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        firstname: '',

        lastname: '',

        fullname: ''

      },

      methods: {},

      watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数

        'firstname': function (newVal, oldVal) {

          // console.log('监视到了 firstname 的变化')

          // this.fullname = this.firstname + '-' + this.lastname

          // console.log(newVal + ' --- ' + oldVal)

          this.fullname = newVal + '-' + this.lastname

        },

        'lastname': function (newVal) {

          this.fullname = this.firstname + '-' + newVal

        }

      }

    });

  </script>

</body>

</html>

　　

3.watch监视路由地址的改变

　　监视非dom。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

  <!-- 1. 导入包 -->

  <script src="./lib/vue-router-3.0.1.js"></script>

</head>

<body>

  <div id="app">

    <router-link to="/login">登录</router-link>

    <router-link to="/register">注册</router-link>

    <!-- 容器 -->

    <router-view></router-view>

  </div>

  <script>

    // 2. 创建子组件

    var login = {

      template: '<h3>这是登录子组件，这个组件是 奔波霸 开发的。</h3>'

    }

    var register = {

      template: '<h3>这是注册子组件，这个组件是 霸波奔 开发的。</h3>'

    }

    // 3. 创建一个路由对象

    var router = new VueRouter({

      routes: [ // 路由规则数组

        { path: '/', redirect: '/login' },

        { path: '/login', component: login },

        { path: '/register', component: register }

      ],

      linkActiveClass: 'myactive' // 和激活相关的类

    })

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {},

      methods: {},

      // router: router

      router,

      watch: {

        //  this.$route.path

        '$route.path': function (newVal, oldVal) {

          // console.log(newVal + ' --- ' + oldVal)

          if (newVal === '/login') {

            console.log('欢迎进入登录页面')

          } else if (newVal === '/register') {

            console.log('欢迎进入注册页面')

          }

        }

      }

    });

  </script>

</body>

</html>

　　

4.计算属性监控

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <input type="text" v-model="firstname"> +

    <input type="text" v-model="middlename"> +

    <input type="text" v-model="lastname"> =

    <input type="text" v-model="fullname">

    <p>{{ fullname }}</p>

    <p>{{ fullname }}</p>

    <p>{{ fullname }}</p>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        firstname: '',

        lastname: '',

        middlename: ''

      },

      methods: {},

      computed: { // 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把 计算属性，当作方法去调用；

        // 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；

        // 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值

        // 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；

        'fullname': function () {

          console.log('ok')

          return this.firstname + '-' + this.middlename + '-' + this.lastname

        }

      }

    });

  </script>

</body>

</html>

　　

006 vue监控的更多相关文章

  1. 006服务监控看板Hystrix Dashboard

    1.POM配置 和普通Spring Boot工程相比,仅仅添加了Hystrix Dashboard和Spring Boot Starter Actuator依赖 <dependencies> ...

  2. 006——VUE中的内容与属性中使用javascript表达式的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. (尚006)Vue计算属性之set与get

    test004.html <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...

  4. vue 前端框架 (三)

    VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. vue中修改了数据但视图无法更新的情况

    数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...

  6. vue中修改了数据但视图无法更新的情况[转载]

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...

  7. vue 知识点

    Vue 中的 slot: 概念:槽/slot是组件在模板中为调用者预留的位置,使用<slot>元素声明一个 槽.在最终的视图中,调用者模板中被调用组件的内容,将填充<slot> ...

  8. 从后端到前端之Vue（二）写个tab试试水

    上一篇写了一下table,然后要写什么呢?当然是tab了.动态创建一个tab,里面放一个table,这样一个后台管理的基本功能(之一)就出来了. 好吧,这里其实只是试试水,感受一下vue的数据驱动可以 ...

  9. Vue的属性、事件、插槽

    属性 自定义属性props ->组件的propos中声明的属性 原生属性attrs ->没有声明属性,默认自动挂载在组件的根元素上,inheritAttrs可以关闭自动挂载 特殊属性cla ...

随机推荐

  1. Redis相关知识整理

    Redis相关知识整理 1. Redis和MySQL的区别?a).mysql是关系型数据库,而redis是NOSQL,非关系型数据库.mysql将数据持久化到硬盘,读取数据慢,而redis数据先存储在 ...

  2. Kubernetes网络之Flannel工作原理

    目录 1.Docker网络模式 1.1 bridge网络的构建过程 1.2 外部访问 2.Kubernetes网络模式 2.1 同一个Pod中容器之间的通信 2.2 不同Pod中容器之间的通信 2.3 ...

  3. Tensorflow简单实践系列（一）：安装和运行

    TensorFlow 是谷歌开发的机器学习框架. 安装 TensorFlow 直接使用 pip 安装即可,添加豆瓣镜像可以加快速度: pip install tensorflow -i https:/ ...

  4. class Pagination(object)分页源码

    class Pagination(object): def init(self, current_page, all_count, per_page_num=10, pager_count=11): ...

  5. MySQL 日期格式化，取年月日等相关操作

    日期取年.月.日 select id, phone,time,year(time),month(time), DAY(time),TIME(time) from user where phone='x ...

  6. 做勇敢女孩 https://www.bilibili.com/video/av14346123?from=search&seid=14078047355739050009

    So a few years ago, I did something really brave, or some would say really stupid. I ran for congres ...

  7. js 符号转换 html代码

    S转换HTML转义符 //去掉html标签 function removeHtmlTab(tab) { return tab.replace(/<[^<>]+?>/g,''); ...

  8. Java基础教程（全代码解析）

    字面量: 整数字面量为整型(int) 小数字面量为双精度浮点型(double) 数据类型: byte short int long float double 接下来代码展示理解 public clas ...

  9. C语言博客06-结构体

    1.本章学习总结 1.1 学习内容总结 结构体如何定义.成员如何赋值 1.结构体的一般形式为: struct 结构体名 { 数据类型 成员名1: 数据类型 成员名2: : 数据类型 成员名n: }: ...

  10. ranger整合kerberos

    一.生成主体 在kerberos服务器生成用于ranger的用户主体: # kadmin.local addprinc -randkey HTTP/manager1@HADOOP.COM addpri ...