vue框架入门基础-02

最新推荐文章于 2024-06-07 16:03:08 发布

欧_root

最新推荐文章于 2024-06-07 16:03:08 发布

阅读量54

点赞数

本文链接：https://blog.csdn.net/m0_56736996/article/details/122340914

版权

vue基础02

上一节讲到了vue基本使用规则，以及设计思路，下面我们来介绍vue实例中的相关属性

属性1

methods：

该属性主要用于处理事件时所调用的方法

比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id="app">
        此处为vue动态绑定的数据： {{info}}
        <br>
        <button @click="click1">点击添加</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                info:''
            },
            methods:{
                click1(){
                    this.info='这是添加的信息'
                }
            }
        })
    </script>
</body>
</html>

属性2

watch：

该实例主要用于监听data中数据变化，如果变化将发生watch中的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id="app">
       <input type="text" v-model="info">
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                info:''
            },
            methods:{
                click1(){
                    this.info='这是添加的信息'
                }
            },
            watch:{
                info(newVal,oldVal){
                    //info代表要监听的数据
                  console.log("变化后的数据：",oldVal)
                  console.log("变化前的数据：",newVal)
                }
            }
        })
    </script>
</body>
</html>