vue-侦听器

最新推荐文章于 2024-07-25 15:23:04 发布

shmilyzl

最新推荐文章于 2024-07-25 15:23:04 发布

阅读量115

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_44414452/article/details/128630960

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

- watch侦听器

允许开发者监视某些数据的变化

格式：

方法格式的侦听器

缺点：1.无法再刚进入页面的时候，自动转发

2.如果侦听的是一个对象，对象的属性发生变化，不会侦听到

对象格式的侦听器

好处：1.可以通过immediate选项，让侦听器自动转发

2.可以通过deep选项，可以让侦听器监听到每个属性的变化

<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:''
            },
            watch:{
                // username(newval,oldval){
                //     console.log(newval,oldval)
                // }
                // 对象格式的侦听器
                username:{
                    handler(newval,oldval){
                        console.log(newval,oldval)
                    },
                    immediate:false//控制侦听器是否自动触发一次
                }
            }
        })
    </script>
</body>

<body>
    <div id="app">
        <input type="text" v-model="info.username">
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                info:{
                    username:'admin'
                }
                
            },
            watch:{
                info:{
                    handler(newval,oldval){
                        console.log(newval,oldval)
                    },
                    deep:true//开启深度监听，只要对象的一个属性发生了变化，就会触发对象的监听器
                }

                 //'info.username'(newval){
                 //  console.log(newval)
                //}
            }
        })
    </script>
</body>

- 计算属性

指的是通过一系列计算之后，最终得到的一个属性值

这个值可以被模板结构或者methods方法中使用

定义的时候，要被定义为方法

好处：

实现了代码的复用

只要依赖的数据源变化，它也会发生变化

<body>
    <div id="app">
          <!-- 在属性上，冒号代表v-bind：属性绑定 -->
          <!-- ：style代表动态绑定一个样式对象，他的值是一个{}样式对象 -->
          <div>
            r:<input type="text" v-model="r">
             g:<input type="text" v-model="g">
              b:<input type="text" v-model="b">
          </div>
        <div class="box" :style="{backgroundColor : `rgb(${this.r},${this.g},${this.b})`}">
          
            {{rgb}}
        </div>
        <button @click="show()">按钮</button>
    </div>
      <script src="./lib/vue-2.6.12.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                r:0,
                g:0,
                b:0
            },
            methods: {
                show(){
                    console.log(`rgb(${this.r},${this.g},${this.b})`)
                }
            },
            // 所有的计算属性在此节点之下
            // 这个方法会返回一个rgb的一个字符串
            computed:{
                rgb(){
                    return `rgb(${this.r},${this.g},${this.b})`
                }
            }
        });
        console.log(vm)
    </script>
  
</body>

- axios

axios是一个专注于网络请求的库！

发起get请求

<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        // 调用axios的返回时Promise对象
       const result= axios({
            method:'GET',
            url:'http://www.liulongbin.top:3306/api/getbooks'
        }).then(function(books){
            console.log(books)
        })
    </script>
</body>

发起post请求

<body>
    <div id="app"></div>
    <button id="btnpost">发起post请求</button>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      document.querySelector('#btnpost').addEventListener(function(){
        axios({
            method:'POST',
            URL:'',
            data:{
                name:'',
                age:20
            }
        }).then(function(result){
            console.log(result)
        })
      })
    </script>
</body>