vue2.x day02

wuchangjian2021-11-03 21:51:45编程学习

文章目录

    • 01.过滤器的使用
    • 02.私有过滤器和全局过滤器
    • 03.watch侦听器
    • 04.对象格式的侦听器
    • 05.深度侦听

01.过滤器的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <!--在双花括号中通过“管道符”调用capitalize过滤器,对message的值进行格式化-->
  <p>{{message | capitalize}}</p>


</div>
<script src="../day01/js/vue.js"></script>
<script>
  const vm =new Vue({
    el:'#app',
    data:{
      message:'hello vue'
    },
    //过滤器函数,必须被定义到filters节点之下
    filters:{
      //注意:过滤器函数形参中的val,永远都是管道符前面的那个值
      capitalize(val){
        //过滤器中,一定要有一个返回值
        const  first =val.charAt(0).toUpperCase()
        //字符串的slice方法,可以截取字符串,从指定索引往后进行截取
        const  other =val.slice(1).toUpperCase()
        return first+other
      }
    },
    methods:{}

  })
</script>
</body>
</html>

02.私有过滤器和全局过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <p>{{ message | capitalize}}</p>
</div>

<div id="app2">
    <p>{{message | capitalize}}</p>
</div>
<script src="lib/vue-2.6.12.js"></script>
<script>
  //使用Vue.filter()定义全局过滤器
  Vue.filter('capitalize',function (str) {
      const first=str.charAt(0).toUpperCase()
      const other=str.slice(1)
      return first+other
  })
  const  vm =new Vue({
    el:'#app',
    filters:{
        capitalize(val){
            const first=val.charAt(0).toUpperCase()
            const other=val.slice(1)
            return first+other
        }
    },
    data:{
      message:'hello vue.js'
    }
  })
  const vm2=new Vue({
      el:'#app2',
      data:{
          message:'vm2'
      }
  })
</script>
</body>
</html>

03.watch侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="username">
</div>
<script src="lib/vue-2.6.12.js"></script>
<script src="lib/jquery-v3.6.0.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{
      message:'hello vue',
      username:'admin'
    },
      // 所有的侦听器,都应该被定义到 watch 节点下
    watch:{
        // 侦听器本质上是一个函数,要监视哪个数据的变化,就把数据名作为方法名即可,新值在前,旧值在后
      username(newVal,oldVal){
        console.log('监听到了username的变化',newVal,oldVal)
          if (newVal==='') return
          //调用jQuery中的ajax发起请求,判断是newVal否被占用
          $.get('https://www.escook.cn/api/finduser/'+newVal,function (res) {
                console.log(res)
          })
        }
    },
  })

</script>
</body>
</html>

04.对象格式的侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" v-model="username">
</div>
<script src="lib/vue-2.6.12.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{
      username:'admin'
    },
    //所有的监听器,都应该被定义在watch节点下
    watch:{
      //定义对象格式的监听器
      username:{
        //监听器的处理函数
        handler(newVal,oldVal){
          console.log(newVal,oldVal)
        },
        //immediate的默认属性是false
        //immediate 的作用是:控制侦听器是否自动触发一次!
        immediate:true
      }
    }
  })
</script>
</body>
</html>

05.深度侦听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="info.username">
    <input type="text" v-model="info.address.city">
</div>
<script src="lib/vue-2.6.12.js"></script>
<script>
  const  vm=new Vue({
    el:'#app',
    data:{
      //用户的信息对象
      info:{
        username:'admin',
        address:{
          city:'北京'
        }
      }
    },
    // 所有的侦听器,都应该被定义到 watch 节点下
    watch:{
      info: {
        handler(newVal) {
          console.log(newVal)
        },
        // 开启深度监听,只要对象中任何一个属性变化了,都会触发“对象的侦听器”
        deep: true
        },
        // 如果要侦听的是对象的子属性的变化,则必须包裹一层单引号
        'info.username'(newVal){
        console.log(newVal)
      }
    }
  })
</script>
</body>
</html>

相关文章

Java的搜索引擎框架

1、Java 全文搜索引擎框架 Lucene Lucene是目前最受欢迎的Java全文...

Hystrix断路器

分布式系统面临的问题: 首先先了解下分布式系统面临的问题:...

oracle中新增数据但是查不到

在oracle中新建一张表之后新增了几条数据,查询的时候可以查到ÿ...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。