一、vue基础（中）

于 2022-12-17 21:13:47 发布
阅读量88 收藏
点赞数
分类专栏： 前端学习笔记 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_G_T/article/details/128357276
版权

目录

09_监视属性（侦听属性）

10_绑定样式

11_条件渲染

12_列表渲染

  1. 09_监视属性（侦听属性）

    监视属性watch:

    1. 当被监视的属性变化时，回调函数自动调用，进行相关操作

    2. 监视的属性必须存在，才能进行监视。

    3. 监视的两种写法

      1. new Vue是传入watch配置

      2. 通过vm.$watch监视

    深度监视：

    1. Vue中的watch默认不监视对象内部值的改变（一层）

    2. 配置deep:true可以检测对象内部值改变（多层）

      备注：

      1. Vue自身可以检测对象内布置改变，但Vue提供的watch默认不可以

      2. 使用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>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>今天天气很{{info}}</h1>
      <button @click="changeWeather">切换天气</button>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#root',
      data: {
        isHot: true,
      },
      computed: {
        info() {
          return this.isHot ? '炎热' : '凉爽'
        },
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot
        },
      },
      //监视配置项 --监视属性
      /*  watch: {
        isHot: {
          handler(newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue)
          },
          immediate: true,
        },
      }, */
    })
    vm.$watch('isHot', {
      handler(newValue, oldValue) {
        console.log('isHot被修改了', newValue, oldValue)
      },
    })
  </script>
</html>

    computed和watch之间的区别：

    1. computed能完成的功能，watch都可以完成

    2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

    两个重要的小原则：

    1. 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象

    2. 所有不被Vue所管理的函数（定时器的回调函数、promise的回调函数ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象

  2. 10_绑定样式

    1. class样式

      写法：class=‘’xxx" xxx可以是字符串、对象、数组

      字符串写法适用于：类名不确定，要动态获取

      对象写法适用于：要绑定多个样式，格式不确定，名字也不确定

      数组写法适用于：要绑定多个样式，格式确定，名字也确定，但不确定不用

    2. style样式

      style = "{fontSize:xxx}"其中xxx是动态值

      style="{a,b}"其中a,b是样式对象

  3. 11_条件渲染

    1. v-if

      写法：1.v-if="表达式"

      2.v-else-if="表达式"

      3.v-else="表达式"

      适用于：切换频率较低的场景

      特点：不展示的DOM元素直接被移除

      注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”

    2. v-show

      写法：v-show="表达式"

      适用于：切换频率较高的场景

      特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏

    3. 备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以取到。

    <!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>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1 v-show="show">{{name}}</h1>
      <button @click="n++">点击={{n}}</button>
      <h3 v-show="n===1">李四</h3>
      <h4 v-show="n===2">王五</h4>
      <h5 v-show="n===3">赵六</h5>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false
    new Vue({
      el: '#root',
      data: {
        name: '张三',
        show: true,
        n: 0,
      },
    })
  </script>
</html>

  4. 12_列表渲染

    v-for指令：

    1. 用于展示列表数据

    2. 语法：v-for="(item,index) in xxx" :key="yyy"

    3. 可遍历：数组、对象、字符串（用的很少）、指定次数（用得很少）

    <!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>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>人员列表-遍历数组</h1>
      <ul>
        <li v-for="p in persons" :key="p.id">{{p.id}}-{{p.name}}-{{p.age}}</li>
        <br /><br />
        <li v-for="p of persons" :key="p.id">{{p.id}}-{{p.name}}-{{p.age}}</li>
      </ul>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false
    new Vue({
      el: '#root',
      data: {
        persons: [
          { id: '001', name: '张三', age: 18 },
          { id: '002', name: '李四', age: 19 },
          { id: '003', name: '王五', age: 25 },
        ],
      },
    })
  </script>
</html>
    ​

    key的原理：

    面试题：react、vue中的key有什么作用？（key的内部原理）

    1. 虚拟DOM中key的作用：

      key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM

      随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下：

    2. 对比规则：

      1. 旧虚拟DOM中找到了与新虚拟DOM相同的key

        若虚拟DOM中内容没变，直接使用之前的真实DOM

        若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面之前的真实DOM

      2. 旧虚拟DOM中未找到与新虚拟DOM相同的key

        创建新的真实DOM，随后渲染到页面

    3. 用index作为key可能会引发的问题

      1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作

        会产生没有必要的真实DOM更新-->界面效果没问题，但效率低

      2. 如果结构中还包含输入类DOM

        会产生错误DOM更新-->界面有问题

    4. 开发中如何选择key?

      1. 最好使用每条数据的唯一标识作为key，比如id,手机号，身份证号等唯一值

      2. 如果不存在对数据的逆序添加，逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

    列表的过滤：

    <!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>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>人员列表</h1>
      <br />
      <input type="text" v-model:value="keyWord" />
      <ul>
        <li v-for="p in filPersons" :key="p.id">
          {{p.id}}-{{p.name}}-{{p.age}}-{{p.sex}}
        </li>
      </ul>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false
    //用watch实现
    /* new Vue({
      el: '#root',
​
      data: {
        keyWord: '',
        persons: [
          { id: '001', name: '张三', age: 18, sex: '女' },
          { id: '002', name: '李三', age: 19, sex: '女' },
          { id: '003', name: '王五', age: 25, sex: '男' },
          { id: '004', name: '说五', age: 25, sex: '男' },
        ],
        filPersons: [],
      },
      watch: {
        keyWord: {
          immediate: true,
          handler(val) {
            this.filPersons = this.persons.filter((p) => {
              return p.name.indexOf(val) !== -1
            })
          },
        },
      },
    }) */
    //用computed实现
    new Vue({
      el: '#root',
      data: {
        keyWord: '',
        persons: [
          { id: '001', name: '张三', age: 18, sex: '女' },
          { id: '002', name: '李三', age: 19, sex: '女' },
          { id: '003', name: '王五', age: 25, sex: '男' },
          { id: '004', name: '说五', age: 25, sex: '男' },
        ],
      },
      computed: {
        filPersons() {
          return this.persons.filter((p) => {
            return p.name.indexOf(this.keyWord) !== -1
          })
        },
      },
    })
  </script>
</html>
​

    列表的排序

    <!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>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>人员列表</h1>
      <br />
      <input type="text" v-model:value="keyWord" />
      <button @click="sortType = 2">年龄升序</button>
      <button @click="sortType = 1">年龄降序</button>
      <button @click="sortType = 0">原顺序</button>
      <ul>
        <li v-for="p in filPersons" :key="p.id">
          {{p.id}}-{{p.name}}-{{p.age}}-{{p.sex}}
        </li>
      </ul>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false
​
    new Vue({
      el: '#root',
      data: {
        keyWord: '',
        sortType: 0, //0原顺序 1年龄降序 2年龄升序
        persons: [
          { id: '001', name: '张三', age: 18, sex: '女' },
          { id: '002', name: '李三', age: 19, sex: '女' },
          { id: '003', name: '王五', age: 15, sex: '男' },
          { id: '004', name: '说五', age: 25, sex: '男' },
        ],
      },
      computed: {
        filPersons() {
          const arr = this.persons.filter((p) => {
            return p.name.indexOf(this.keyWord) !== -1
          })
          if (this.sortType) {
            arr.sort((p1, p2) => {
              return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
            })
          }
          return arr
        },
      },
    })
  </script>
</html>

    Vue监视数据的原理：

    1. vue会监视data中所有层次的数据

    2. 如何监测对象中的数据

      通过setter实现监视，且要在new Vue时就传入要监测的数据

      1. 对象中后追加的属性，Vue默认不做响应式处理

      2. 如需给后添加的属性做响应式，请使用如下API:

        Vue.set(target,propertyName/index,value)或

        vm.$set(target,propertyName/index,value)

    3. 如何监测数组中的数据？

      通过包裹数组更新元素的方法实现，本质就是做了两件事

      1. 调用原生对应的方法对数组进行更新

      2. 重新解析模板，进而更新页面

    4. 在Vue修改数组中的某个元素一定要用如下方法：

      1. 使用这些API:push(),shift(),unshift(),splice(),sort(),reverse()

      2. Vue.set()或vm.$set()

      特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象 添加属性。

互联网农民工001
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

互联网农民工001

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值