vue2.x-day02

最新推荐文章于 2024-08-03 20:57:01 发布

小火柴127

最新推荐文章于 2024-08-03 20:57:01 发布

阅读量147

点赞数

分类专栏： vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Java721/article/details/121131465

版权

文章目录

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

最低0.47元/天解锁文章

小火柴127

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue2.x-day02

文章目录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"> <!--在双花括
复制链接

扫一扫