• web前端面试高频考点——Vue的基本使用（一文掌握Vue最基础的知识点）

    系列文章目录

    内容参考链接
    Vue基本使用Vue的基本使用（一文掌握Vue最基础的知识点）
    Vue通信和高级特性Vue组件间的通信及高级特性（多种组件间的通信、自定义v-model、nextTick、插槽）
    Vue高级特性Vue的高级特性（动态组件、异步加载、keep-alive、mixin、Vuex、Vue-Router）
    Vue原理1Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）
    Vue原理2Vue原理（diff算法、模板编译、组件渲染和更新、JS实现路由）
    Vue面试题web前端面试高频考点——Vue面试题

    文章目录

    一、vue基本使用

    1、插值，表达式，指令，动态属性

    • 插值、表达式
    • 指令、动态属性
    • v-html：会有 xss 风险，会覆盖子组件
    <template>
  <div>
    <p>文本插值 {{message}}</p>
    <p>JS 表达式 {{flag ? 'yes' : 'no'}}</p>
    <p :id="dynamicId">动态属性 id</p>
    <hr/>
    <p v-html="rawHtml">
        <span>有 xss 风险</span>
        <span>使用 v-html 之后，将会覆盖子元素</span>
    </p>
  </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'hello vue',
            flag: true,
            rawHtml: '指令 - 原始 html 加粗 斜体',
            dynamicId: `id-${Date.now()}`
        }
    }
};
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在这里插入图片描述

    2、computed 计算属性

    • computed 有缓存，data 不变则不会重新计算
    <template>
  <div>
    <p>num {{ num }}</p>
    <p>double1 {{ double1 }}</p>
    <input v-model="double2" />
  </div>
</template>

<script>
export default {
    data() {
        return {
          num: 20
        }
    },
    computed: {
        double1() {
            return this.num * 2
        },
        double2: {
            get() {
                return this.num * 3
            },  
            set(val) {
                this.num = val / 2
            }
        }
    }
};
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    输入框输入4：
    在这里插入图片描述

    3、watch 监听

    • 值类型，可正常拿到 oldVal 和 val
    • watch 如何深度监听（监听引用类型）
    • watch 监听引用类型，拿不到 oldVal，因为指针相同，此时已经指向了新的 val
    <template>
  <div>
    <input v-model="name"/>
    <input v-model="info.city">
  </div>
</template>

<script>
export default {
    data() {
        return {
          name: '杂货铺',
          info: {
            city: '北京'
          }
        }
    },
    watch: {
        name(oldVal, val) {
            console.log('watch name', oldVal, val); // 值类型，可正常拿到 oldVal 和 val
        },
        info: {
            handler(oldVal, val) {
                console.log('watch info', oldVal, val); // 引用类型，拿不到  oldVal。因为指针相同，此时已经指向了新的 val
            },
            deep: true // 深度监听
        }
    }
};
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    监听前：

    在这里插入图片描述

    监听后：

    在这里插入图片描述

    4、class 和 style

    • 使用动态属性
    • 使用驼峰式写法
    • 对象写法（:class 绑定对象，在 data 函数中定义 true/false）
    • 数组写法（键和值都写在 data 中函数，:class 中直接使用键）
    • style：直接在 data 函数中定义样式，:style 中直接使用该样式
    <template>
  <div>
    <p :class="{black: isBlack, orange: isOrange}">使用 class</p>
    <p :class="[black, orange]">使用 class</p>
    <p :style="styleData">使用 style</p>
  </div>
</template>

<script>
export default {
    data() {
        return {
          isBlack: true,
          isOrange: true,

          black: 'black',
          orange: 'orange',

          styleData: {
            fontSize: '40px', // 转换为驼峰式
            color: 'red',
            backgroundColor: "#ccc"
          }
        }
    }
};
</script>

<style>
  .black {
    border: 1px solid black;
  }
  .orange {
    color: orange;
  }
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    在这里插入图片描述

    5、条件渲染

    • v-if v-else 的用法，可使用变量，也可以使用 === 表达式
    • v-if 和 v-show 的区别

    （1）手段：v-if 是动态的向 DOM 树内添加或者删除 DOM 元素；v-show 是通过设置 DOM 元素的 display 样式属性控制显隐；
    （2）编译过程：v-if 是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则 v-if 不会去渲染标签。v-show 则无论初始条件是否成立，都会渲染标签；
    （3）性能消耗：v-if 有更高的切换消耗；v-show 有更高的初始渲染消耗；
    （4）使用场景：v-if 适合运营条件不大可能改变；v-show 适合频繁切换。

    • v-if 和 v-show 的使用场景（更新 不频繁 的时候选 v-if，更新 频繁 的时候选 v-show）
    <template>
  <div>
    <p v-if="type === 'a'">A</p>
    <p v-else-if="type === b">B</p>
    <p v-else>other</p>
    <p v-if="showInfo">show info</p>

    <p v-show="type === 'a'">A by v-show</p>
    <p v-show="type === 'b'">B by v-show</p>
  </div>
</template>

<script>
export default {
    data() {
        return {
          type: 'a',
          showInfo: true
        }
    }
};
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

    二、Vue的基本使用 2

    1、循环（列表）渲染

    • 如何遍历对象 —— 也可以使用 v-for
    • key 的重要性，key 不能乱写（要确保其唯一性）
    • v-for 和 v-if 不能一起使用

    示例：v-for 遍历数组（item，index）和对象（val，key，index）

    <template>
  <div>
    <p>遍历数组</p>
    <ul>
      <li v-for="(item, index) in listArr" :key="item.id">
        {{index}} - {{item.id}} - {{item.title}}
      </li>
    </ul>

    <p>遍历对象</p>
    <ul>
      <li v-for="(val, key, index) in listObj" :key="key">
        {{index}} - {{key}} - {{val.title}}
       </li>
    </ul>

  </div>
</template>

<script>
export default {
    data() {
        return {
          listArr: [
            {id: 'a', title: '标题1'},
            {id: 'b', title: '标题2'},
            {id: 'c', title: '标题3'},
          ],
          listObj: {
            a: { title: '标题1' },
            b: { title: '标题2' },
            c: { title: '标题3' },
          }
        }
    }
};
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    在这里插入图片描述
    示例：v-if 和 v-for 同时使用，会报错

    在这里插入图片描述

    2、事件

    • event 参数，自定义参数
    • 事件修饰符，按键修饰符
    • 【观察】事件被绑定到哪里？—— event 是原生的，事件被绑到当前元素

    示例：event 及其传参

    <template>
  <div>
    <p>{{ num }}</p>
    <button @click="increment1">+1</button>
    <button @click="increment2(2, $event)">+2</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    increment1(event) {
      console.log("event##", event, event.__proto__.constructor); // 是原生的 event 对象
      console.log(event.target); // 触发事件的元素
      console.log(event.currentTarget); // 监听事件绑定的元素
      this.num++;
    },
    increment2(val, event) {
      console.log(event.target);
      this.num = this.num + val;
    },
  },
};
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    在这里插入图片描述

    3、事件修饰符

    // 阻止单击事件继续传播
<a v-on:click.stop="doThis"></a>
// 提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
// 修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
// 只有修饰符
<form v-on:submit.prevent></form>
// 添加事件监听器时使用事件捕获模式
// 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
<div v-on:click.capture="doThis">...</div>
// 只当在 event.target 是当前元素自身时触发处理函数
// 即事件不是从内部元素触发的
<div v-on:click.self="doThat">...</div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    4、按键修饰符

    • 按住修饰符再点击才会触发效果
    • exact 修饰符允许控制由精确的系统修饰符组合触发的事件
    <template>
  <div>
    <button @click.ctrl="onClick">A</button>
    <button @click.ctrl.exact="onCtrlClick">A</button>
    <button @click.exact="onNullClick">A</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      console.log('按住Ctrl，点击按钮触发 or 同时按住Ctrl+Alt/Shift 点击按钮也能触发');
    },
    onCtrlClick() {
      console.log('只有按住Ctrl，点击按钮才能触发');
    },
    onNullClick() {
      console.log('没有任何系统修饰符被按下的时候才触发');
    }
  },
};
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    在这里插入图片描述

    5、表单

    • 使用双向数据绑定：v-model
    • 常见表单项 textarea checkbox radio select
    • 修饰符 lazy（类似防抖的效果） number（只允许输入数字） trim（去除空格）
    <template>
  <div>
    <p>输入框：{{name}} - {{lazyName}} - {{age}}</p>
    <input type="text" v-model.trim="name">
    <input type="text" v-model.lazy="lazyName">
    <input type="text" v-model.number="age">

    <p>多行文本：{{desc}}</p>
    <textarea type="text" v-model="desc"></textarea>
    <!-- 注意，<textarea>{{desc}}</textarea> 是不允许的！ -->

    <p>复选框：{{checked}}</p>
    <input type="checkbox" v-model="checked">

    <p>多选复选框：{{mchecked}}</p>
    <input type="checkbox" id="jack" value="jack" v-model="mchecked">
    <label for="jack">Jack</label>
    <input type="checkbox" id="mike" value="mike" v-model="mchecked">
    <label for="mike">Mike</label>
    <input type="checkbox" id="john" value="john" v-model="mchecked">
    <label for="john">John</label>

    <p>单选框：{{gender}}</p>
    <input type="radio" id="male" value="male" v-model="gender" />
    <label for="male">男</label>
    <input type="radio" id="female" value="female" v-model="gender" />
    <label for="female">女</label>

    <p>下拉列表选择：{{selected}}</p>
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>

    <p>下拉列表选择（多选）{{selectedList}}</p>
    <select v-model="selectedList" multiple>
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '杂货铺',
      lazyName: '杂货铺老板',
      age: 20,
      desc: '自我介绍',

      checked: true,
      mchecked: true,
      checkedNames: [],

      gender: 'male',

      selected: '',
      selectedList: []
    };
  }
};
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67

    表单效果

    不积跬步无以至千里 不积小流无以成江海

    点个关注不迷路，持续更新中…

  • 相关阅读:
    计算机网络——三种交换方式（电路交换、分组交换、报文交换以及优缺点）
    加密软件VMProtect教程：使用脚本-功能
    JADE盲分离算法仿真
    我对React原理的理解
    RHCE. Stratis 管理分层存储
    基于web的医疗设备销售业务系统的设计与实现
    golang gin ShouldBindUri数据绑定: `uri:“id“ binding:“required,uuid“`
    Qt的简易日志库实现及封装
    开发者配置项、开发者选项自定义
    C++‘s most vexing parse
  • 原文地址：https://blog.csdn.net/qq_45902692/article/details/126415651