Vue-数据监听

数据监听

基础信息

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数据监听</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .base{
            padding: 5px;
            height: 100px;
        }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>数据监听</h1>
      <div>
        <h3>姓名：{{boy.name}}</h3>
        <h3>年龄：{{boy.age}}</h3>
        <h3>爱好</h3>
        <ul>
            <li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li>
        </ul>
        <h3>朋友</h3>
        <ul>
            <li v-for="(item,index) in boy.friend" :key="item.id">{{item.name}} - {{item.age}}</li>
        </ul>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        boy:{
            name:'刘德华',
            age:30,
            hobby:['唱歌','演戏','耍帅'],
            friend:[
                {id:'001',name:'张学友',age:30},
                {id:'002',name:'郭富城',age:30},
                {id:'003',name:'黎明',age:30}
            ],
        }
      },
      
      methods:{
      },
    });
  </script>
</html>

运行效果

修改年龄

刘德华的 年龄 - 1

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数据监听</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>数据监听</h1>
      <div>
        <h3>姓名：{{boy.name}}</h3>
        <button @click="subtractOne">年龄-1</button>
        <h3>年龄：{{boy.age}}</h3>
        <h3>爱好</h3>
        <ul>
          <li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li>
        </ul>
        <h3>朋友</h3>
        <ul>
          <li v-for="(item,index) in boy.friend" :key="item.id">
            {{item.name}} - {{item.age}}
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        boy: {
          name: "刘德华",
          age: 30,
          hobby: ["唱歌", "演戏", "耍帅"],
          friend: [
            { id: "001", name: "张学友", age: 30 },
            { id: "002", name: "郭富城", age: 30 },
            { id: "003", name: "黎明", age: 30 },
          ],
        },
      },

      methods: {
        subtractOne() {
          console.log(this.boy.name + " 年龄 -1 了");
          this.boy.age--;
        },
      },
    });
  </script>
</html>

运行效果

在这里插入图片描述

点击按钮 年龄-1

在这里插入图片描述

添加性别

刘德华增加 性别属性 值为男 （基于 vue2）

Vue.set

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数据监听</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>数据监听</h1>
      <div>
        <h3>姓名：{{boy.name}}</h3>
        <button @click="subtractOne">年龄-1</button>
        <h3>年龄：{{boy.age}}</h3>
        <button @click="addSex">添加性别</button>
        <h3 v-if="boy.sex">性别：{{boy.sex}}</h3>
        <h3>爱好</h3>
        <ul>
          <li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li>
        </ul>
        <h3>朋友</h3>
        <ul>
          <li v-for="(item,index) in boy.friend" :key="item.id">
            {{item.name}} - {{item.age}}
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        boy: {
          name: "刘德华",
          age: 30,
          hobby: ["唱歌", "演戏", "耍帅"],
          friend: [
            { id: "001", name: "张学友", age: 30 },
            { id: "002", name: "郭富城", age: 30 },
            { id: "003", name: "黎明", age: 30 },
          ],
        },
      },

      methods: {
        subtractOne() {
          console.log(this.boy.name + " 年龄 -1 了");
          this.boy.age--;
        },
        addSex(){
            console.log("刘德华 有性别了 （Vue.set）")
            Vue.set(this.boy,'sex',"男")
        }
      },
    });
  </script>
</html>

运行效果

在这里插入图片描述

点击按钮 添加性别

在这里插入图片描述

vm.$set

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数据监听(vue2)</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>数据监听</h1>
      <div>
        <h3>姓名：{{boy.name}}</h3>
        <button @click="subtractOne">年龄-1</button>
        <h3>年龄：{{boy.age}}</h3>
        <button @click="addSex">添加性别</button>
        <h3 v-if="boy.sex">性别：{{boy.sex}}</h3>
        <h3>爱好</h3>
        <ul>
          <li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li>
        </ul>
        <h3>朋友</h3>
        <ul>
          <li v-for="(item,index) in boy.friend" :key="item.id">
            {{item.name}} - {{item.age}}
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        boy: {
          name: "刘德华",
          age: 30,
          hobby: ["唱歌", "演戏", "耍帅"],
          friend: [
            { id: "001", name: "张学友", age: 30 },
            { id: "002", name: "郭富城", age: 30 },
            { id: "003", name: "黎明", age: 30 },
          ],
        },
      },

      methods: {
        subtractOne() {
          console.log(this.boy.name + " 年龄 -1 了");
          this.boy.age--;
        },
        addSex() {
        //   console.log("刘德华 有性别了 （Vue.set）");
        //   Vue.set(this.boy, "sex", "男");
          console.log("刘德华 有性别了 Vm.$set）");
          this.$set(this.boy, "sex", "男");
        }
      },
    });
  </script>
</html>

运行效果

在这里插入图片描述

点击按钮 添加性别

在这里插入图片描述

修改性别

刘德华修改性别 男 => 猛男

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数据监听(vue2)</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>数据监听</h1>
      <div>
        <h3>姓名：{{boy.name}}</h3>
        <button @click="subtractOne">年龄-1</button>
        <h3>年龄：{{boy.age}}</h3>
        <button @click="addSex">添加性别</button>
        <button @click="updateSex">修改性别</button>
        <h3 v-if="boy.sex">性别：{{boy.sex}}</h3>
        <h3>爱好</h3>
        <ul>
          <li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li>
        </ul>
        <h3>朋友</h3>
        <ul>
          <li v-for="(item,index) in boy.friend" :key="item.id">
            {{item.name}} - {{item.age}}
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        boy: {
          name: "刘德华",
          age: 30,
          hobby: ["唱歌", "演戏", "耍帅"],
          friend: [
            { id: "001", name: "张学友", age: 30 },
            { id: "002", name: "郭富城", age: 30 },
            { id: "003", name: "黎明", age: 30 },
          ],
        },
      },

      methods: {
        subtractOne() {
          console.log(this.boy.name + " 年龄 -1 了");
          this.boy.age--;
        },
        addSex() {
        //   console.log("刘德华 有性别了 （Vue.set）");
        //   Vue.set(this.boy, "sex", "男");
          console.log("刘德华 有性别了 Vm.$set）");
          this.$set(this.boy, "sex", "男");
        },
        updateSex(){
            console.log("刘德华 改变性别了 ");
            this.boy.sex = '猛男'
        }
      },
    });
  </script>
</html>

运行效果

刘德华添加 性别男

在这里插入图片描述

点击按钮 修改性别

在这里插入图片描述

修改朋友姓名

修改第一个朋友姓名为 张学良

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数据监听(vue2)</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>数据监听</h1>
      <div>
        <h3>姓名：{{boy.name}}</h3>
        <button @click="subtractOne">年龄-1</button>
        <h3>年龄：{{boy.age}}</h3>
        <button @click="addSex">添加性别</button>
        <button @click="updateSex">修改性别</button>
        <h3 v-if="boy.sex">性别：{{boy.sex}}</h3>
        <h3>爱好</h3>
        <ul>
          <li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li>
        </ul>
        <h3>朋友</h3>
        <button @click="updateFriendName">修改朋友姓名</button>
        <ul>
          <li v-for="(item,index) in boy.friend" :key="item.id">
            {{item.name}} - {{item.age}}
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        boy: {
          name: "刘德华",
          age: 30,
          hobby: ["唱歌", "演戏", "耍帅"],
          friend: [
            { id: "001", name: "张学友", age: 30 },
            { id: "002", name: "郭富城", age: 30 },
            { id: "003", name: "黎明", age: 30 },
          ],
        },
      },

      methods: {
        subtractOne() {
          console.log(this.boy.name + " 年龄 -1 了");
          this.boy.age--;
        },
        addSex() {
        //   console.log("刘德华 有性别了 （Vue.set）");
        //   Vue.set(this.boy, "sex", "男");
          console.log("刘德华 有性别了 Vm.$set）");
          this.$set(this.boy, "sex", "男");
        },
        updateSex(){
            console.log("刘德华 改变性别了 ");
            this.boy.sex = '猛男'
        },
        updateFriendName(){
            console.log("修改第一个朋友姓名了 ");
            this.boy.friend[0].name = "张学良"
        }
      },
    });
  </script>
</html>

运行效果

在这里插入图片描述

点击按钮 修改朋友姓名

在这里插入图片描述

首位新增朋友

刘德华朋友列表 首位新增朋友周杰伦

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数据监听(vue2)</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>数据监听</h1>
      <div>
        <h3>姓名：{{boy.name}}</h3>
        <button @click="subtractOne">年龄-1</button>
        <h3>年龄：{{boy.age}}</h3>
        <button @click="addSex">添加性别</button>
        <button @click="updateSex">修改性别</button>
        <h3 v-if="boy.sex">性别：{{boy.sex}}</h3>
        <h3>爱好</h3>
        <ul>
          <li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li>
        </ul>
        <h3>朋友</h3>
        <button @click="updateFriendName">修改朋友姓名</button><button @click="addFriend">首位新增朋友</button>
        <ul>
          <li v-for="(item,index) in boy.friend" :key="item.id">
            {{item.id}} - {{item.name}} - {{item.age}}
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        boy: {
          name: "刘德华",
          age: 30,
          hobby: ["唱歌", "演戏", "耍帅"],
          friend: [
            { id: "001", name: "张学友", age: 30 },
            { id: "002", name: "郭富城", age: 30 },
            { id: "003", name: "黎明", age: 30 },
          ],
        },
      },

      methods: {
        subtractOne() {
          console.log(this.boy.name + " 年龄 -1 了");
          this.boy.age--;
        },
        addSex() {
        //   console.log("刘德华 有性别了 （Vue.set）");
        //   Vue.set(this.boy, "sex", "男");
          console.log("刘德华 有性别了 Vm.$set）");
          this.$set(this.boy, "sex", "男");
        },
        updateSex(){
            console.log("刘德华 改变性别了 ");
            this.boy.sex = '猛男'
        },
        updateFriendName(){
            console.log("修改第一个朋友姓名了 ");
            this.boy.friend[0].name = "张学良"
        },
        addFriend(){
            console.log("首位新增一个朋友 ");
            this.boy.friend.unshift({ id: "004", name: "周杰伦", age: 26 })
        }
      },
    });
  </script>
</html>

运行效果

在这里插入图片描述

点击按钮 首位新增朋友

在这里插入图片描述

增加爱好

刘德华爱好增加 首位增加一个喝酒 末位增加一个健身

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数据监听(vue2)</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>数据监听</h1>
      <div>
        <h3>姓名：{{boy.name}}</h3>
        <button @click="subtractOne">年龄-1</button>
        <h3>年龄：{{boy.age}}</h3>
        <button @click="addSex">添加性别</button>
        <button @click="updateSex">修改性别</button>
        <h3 v-if="boy.sex">性别：{{boy.sex}}</h3>
        <h3>爱好</h3>
        <button @click="addHobby">增加爱好</button>
        <ul>
          <li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li>
        </ul>
        <h3>朋友</h3>
        <button @click="updateFriendName">修改朋友姓名</button><button @click="addFriend">首位新增朋友</button>
        <ul>
          <li v-for="(item,index) in boy.friend" :key="item.id">
            {{item.id}} - {{item.name}} - {{item.age}}
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        boy: {
          name: "刘德华",
          age: 30,
          hobby: ["唱歌", "演戏", "耍帅"],
          friend: [
            { id: "001", name: "张学友", age: 30 },
            { id: "002", name: "郭富城", age: 30 },
            { id: "003", name: "黎明", age: 30 },
          ],
        },
      },

      methods: {
        subtractOne() {
          console.log(this.boy.name + " 年龄 -1 了");
          this.boy.age--;
        },
        addSex() {
        //   console.log("刘德华 有性别了 （Vue.set）");
        //   Vue.set(this.boy, "sex", "男");
          console.log("刘德华 有性别了 Vm.$set）");
          this.$set(this.boy, "sex", "男");
        },
        updateSex(){
            console.log("刘德华 改变性别了 ");
            this.boy.sex = '猛男'
        },
        updateFriendName(){
            console.log("修改第一个朋友姓名了 ");
            this.boy.friend[0].name = "张学良"
        },
        addFriend(){
            console.log("首位新增一个朋友 ");
            this.boy.friend.unshift({ id: "004", name: "周杰伦", age: 26 })
        },
        addHobby(){
            console.log("首位新增一个爱好 <喝酒>");
            this.boy.hobby.unshift("喝酒")
            console.log("末位新增一个爱好 <健身>");
            this.boy.hobby.push("健身")
        }
      },
    });
  </script>
</html>

运行效果

在这里插入图片描述

点击按钮 增加爱好

在这里插入图片描述

修改爱好

修改刘德华的第一个爱好 唱歌 => 爬山

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数据监听(vue2)</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
      .base {
        padding: 5px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h1>数据监听</h1>
      <div>
        <h3>姓名：{{boy.name}}</h3>
        <button @click="subtractOne">年龄-1</button>
        <h3>年龄：{{boy.age}}</h3>
        <button @click="addSex">添加性别</button>
        <button @click="updateSex">修改性别</button>
        <h3 v-if="boy.sex">性别：{{boy.sex}}</h3>
        <h3>爱好</h3>
        <button @click="addHobby">增加爱好</button>
        <button @click="updateHobby">修改爱好</button>
        <ul>
          <li v-for="(value,index) in boy.hobby" :key="index">{{value}}</li>
        </ul>
        <h3>朋友</h3>
        <button @click="updateFriendName">修改朋友姓名</button><button @click="addFriend">首位新增朋友</button>
        <ul>
          <li v-for="(item,index) in boy.friend" :key="item.id">
            {{item.id}} - {{item.name}} - {{item.age}}
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示
    const vm = new Vue({
      el: "#root",
      data: {
        name: "Vue 扛把子",
        boy: {
          name: "刘德华",
          age: 30,
          hobby: ["唱歌", "演戏", "耍帅"],
          friend: [
            { id: "001", name: "张学友", age: 30 },
            { id: "002", name: "郭富城", age: 30 },
            { id: "003", name: "黎明", age: 30 },
          ],
        },
      },

      methods: {
        subtractOne() {
          console.log(this.boy.name + " 年龄 -1 了");
          this.boy.age--;
        },
        addSex() {
        //   console.log("刘德华 有性别了 （Vue.set）");
        //   Vue.set(this.boy, "sex", "男");
          console.log("刘德华 有性别了 Vm.$set）");
          this.$set(this.boy, "sex", "男");
        },
        updateSex(){
            console.log("刘德华 改变性别了 ");
            this.boy.sex = '猛男'
        },
        updateFriendName(){
            console.log("修改第一个朋友姓名了 ");
            this.boy.friend[0].name = "张学良"
        },
        addFriend(){
            console.log("首位新增一个朋友 ");
            this.boy.friend.unshift({ id: "004", name: "周杰伦", age: 26 })
        },
        addHobby(){
            console.log("首位新增一个爱好 <喝酒>");
            this.boy.hobby.unshift("喝酒")
            console.log("末位新增一个爱好 <健身>");
            this.boy.hobby.push("健身")
        },
        updateHobby(){
            console.log("修改 刘德华的第一个爱好了 ");
            // Vue.set(this.boy.hobby, 0, '爬山');
            // this.$set(this.boy.hobby, 0, '爬山');
            // 必须得用 push、pop、shift、unshift、splice、sort、reverse修改才能响应式，直接通过数组下标修改元素无法响应式
            this.boy.hobby.splice(0,1,'爬山')
        }
      },
    });
  </script>
</html>

运行效果

在这里插入图片描述

点击按钮 修改爱好

总结

vue 会监听data中所有层级的数据

通过 setter实现监听且是在初始化vue实例就定义好的数据 data

对象后追加的属性，默认vue不做响应式处理
如后追加的属性想要响应式处理，使用特定的API进行增加属性
- Vue.set(target, propertyName/index, value )
- vm.$set(target, propertyName/index, value )