Vue基础系列：数据绑定与数据监听

最新推荐文章于 2022-11-13 16:58:43 发布

天然玩家

最新推荐文章于 2022-11-13 16:58:43 发布

阅读量400

点赞数 1

分类专栏： # Vue ABC 文章标签： Vue 数据绑定命令

本文链接：https://blog.csdn.net/Xin_101/article/details/114212522

版权

Vue ABC 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1 数据绑定

数据绑定即数据联动，分为单向联动和双向联动，详细描述如表1所示。

序号	属性	命令	描述
1	单向绑定（联动）	v-bind:value	内存数据改变，直接改变页面值，页面数据改变，无法改变内存数据，内存数据及代码中定义的变量存储的数据
2	双向绑定（联动）	v-model	内存和页面数据实时互通，即内存数据改变，页面数据同时改变；页面数据改变，同时改变内存数据

1.0 单向绑定

效果：页面修改数据，无法改变内存数据，实现代码如下：

<!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>Vue学习</title>
</head>
<body>
    <div>我是第一行数据</div>
    <div id="app"></div>
    
    <script src="vue.js"></script>
    <script>
        new Vue({
          el: "#app",
          template: `
          <div>
            {{ msg }}
            <div>单向数据绑定</div>
            <input type="text" v-bind:value="msg">
          </div>
          `,
          data() {
              return {
                  msg: "我是消息"
              } 
          }
        })
    </script>
</body>
</html>

1.2 双向绑定

效果：双向数据绑定，页面修改数据后，数据实时传输到内存，结合单向绑定，可看到单向绑定的输入框数据发生改变，实现代码如下：

<!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>Vue学习</title>
</head>
<body>
    <div>我是第一行数据</div>
    <div id="app"></div>
    
    <script src="vue.js"></script>
    <script>
        new Vue({
          el: "#app",
          template: `
          <div>
            {{ msg }}
            <div>单向数据绑定</div>
            <input type="text" v-bind:value="msg">
            <div>双向数据绑定</div>
            <input type="text" v-model="msg">
          </div>
          `,
          data() {
              return {
                  msg: "我是消息"
              } 
          },
          watch:{
              msg(v1, v2) {
                  console.log("新值：" + v1, "旧值：" + v2)
              }
          }
        })
    </script>
</body>
</html>

2 数据监听

实时监听数据变化，并根据数据变化进一步操作，数据监听分为两种，一种是简单数据（一层数据）监听，一种是多层数据监听。

2.1 单层监听

单层数据监听只需使用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>Vue学习</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            template:`
            <div>
              <div>
                <p>单层Watch</p>
                <div>我是信号值：{{ signal }}</div>
                修改信号值：
                <input v-model="signal"></input>
              </div> 
            </div>
            `,
            data: function() {
                return {
                    signal: ""
                }
            },
            watch: {
                signal: {
                    handler(val) {
                        if(val == "signal") {
                            alert("Signal")
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

2.2 多层监听

多层数据监听开启深度监听，实现代码如下：

<!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>Vue学习</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            template:`
            <div>
              <div>
                <p>多层Watch</p>
                <div>我是信号值：{{ signal.data }}</div>
                修改信号值：
                <input v-model="signal.data"></input>
              </div> 
            </div>
            `,
            data: function() {
                return {
                    signal: {data:"", total: 1}
                }
            },
            watch: {
                signal: {
                    handler(val) {
                        if(val.data == "signal") {
                            alert("Signal")
                        }
                    },
                    deep: true
                }
            }
        })
    </script>
</body>
</html>

3 数据计算

使用computed完成数据计算，同时结合双向绑定完成实时数据计算。

<!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"></div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            template: `
            <div>
                <div>
                    <p>计算Computed</p>
                    <input v-model="num1"></input> +
                    <input v-model="num2"></input> -
                    <input v-model="num3"></input> =
                    {{ result }}
                    
                </div>
                    
            </div>
            `,
            data: function() {
                return {
                    num1: 1,
                    num2: 3,
                    num3: 3
                }
            },
            computed: {
                result: function() {
                    return this.num1 + this.num2 - this.num3
                }
            } 
        })
    </script>
</body>
</html>