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

Love The Way You Lie 2023-09-28 21:02 14阅读 0赞

## 系列文章目录 ##

<table> 
 <thead> 
  <tr> 
   <th>内容</th> 
   <th>参考链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Vue基本使用</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126415651?spm=1001.2014.3001.5501" rel="nofollow">Vue的基本使用（一文掌握Vue最基础的知识点）</a></td> 
  </tr> 
  <tr> 
   <td>Vue通信和高级特性</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126453192?spm=1001.2014.3001.5501" rel="nofollow">Vue组件间的通信及高级特性（多种组件间的通信、自定义v-model、nextTick、插槽）</a></td> 
  </tr> 
  <tr> 
   <td>Vue高级特性</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126478821?spm=1001.2014.3001.5501" rel="nofollow">Vue的高级特性（动态组件、异步加载、keep-alive、mixin、Vuex、Vue-Router）</a></td> 
  </tr> 
  <tr> 
   <td>Vue原理1</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126516912?spm=1001.2014.3001.5501" rel="nofollow">Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）</a></td> 
  </tr> 
  <tr> 
   <td>Vue原理2</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126565768?spm=1001.2014.3001.5501" rel="nofollow">Vue原理（diff算法、模板编译、组件渲染和更新、JS实现路由）</a></td> 
  </tr> 
  <tr> 
   <td>Vue面试题</td> 
   <td><a href="https://blog.csdn.net/qq_45902692/article/details/126588149?spm=1001.2014.3001.5502" rel="nofollow">web前端面试高频考点——Vue面试题</a></td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### 文章目录 ####

*  系列文章目录
 *   *  一、vue基本使用
     *   *  1、插值，表达式，指令，动态属性
         *  2、computed 计算属性
         *  3、watch 监听
         *  4、class 和 style
         *  5、条件渲染
     *  二、Vue的基本使用 2
     *   *  1、循环（列表）渲染
         *  2、事件
         *  3、事件修饰符
         *  4、按键修饰符
         *  5、表单

--------------------

### 一、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 <b>加粗</b> <i>斜体</i>',
                dynamicId: `id-${
          Date.now()}`
            }
        }
    };
    </script>

![在这里插入图片描述][f27d86ad62d14794950ac7b2e68b9f0f.png]

#### 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>

输入框输入4：  
![在这里插入图片描述][bfff0f3257eb4e93a6cd8b4d6f36ec2d.png]

#### 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>

监听前：

![在这里插入图片描述][6e41d27c5d6e45d2965c07dd0a054736.png]

监听后：

![在这里插入图片描述][5df136a554bd4bef992dba0d3e749f7e.png]

#### 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>

![在这里插入图片描述][6910e6e7136d4989b64c6f6ccb9fe6e1.png]

#### 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>

![在这里插入图片描述][25f963a34aa64ffbab29ea984e2fa87a.png]

### 二、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>

![在这里插入图片描述][65a98d57e28047bb9ff410dd055f7374.png]  
示例：v-if 和 v-for 同时使用，会报错

![在这里插入图片描述][2ba0786598d5475aaccf71f83e49c142.png]

#### 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>

![在这里插入图片描述][ee268e85c6bc450bb9b82867265a89fe.png]

#### 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>

#### 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>

![在这里插入图片描述][fe2710b35d7e455bb3d39cc8439af665.png]

#### 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>
        
    
        <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>

表单效果

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

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

[f27d86ad62d14794950ac7b2e68b9f0f.png]: https://img-blog.csdnimg.cn/f27d86ad62d14794950ac7b2e68b9f0f.png
[bfff0f3257eb4e93a6cd8b4d6f36ec2d.png]: https://img-blog.csdnimg.cn/bfff0f3257eb4e93a6cd8b4d6f36ec2d.png
[6e41d27c5d6e45d2965c07dd0a054736.png]: https://img-blog.csdnimg.cn/6e41d27c5d6e45d2965c07dd0a054736.png
[5df136a554bd4bef992dba0d3e749f7e.png]: https://img-blog.csdnimg.cn/5df136a554bd4bef992dba0d3e749f7e.png
[6910e6e7136d4989b64c6f6ccb9fe6e1.png]: https://img-blog.csdnimg.cn/6910e6e7136d4989b64c6f6ccb9fe6e1.png
[25f963a34aa64ffbab29ea984e2fa87a.png]: https://img-blog.csdnimg.cn/25f963a34aa64ffbab29ea984e2fa87a.png
[65a98d57e28047bb9ff410dd055f7374.png]: https://img-blog.csdnimg.cn/65a98d57e28047bb9ff410dd055f7374.png
[2ba0786598d5475aaccf71f83e49c142.png]: https://img-blog.csdnimg.cn/2ba0786598d5475aaccf71f83e49c142.png
[ee268e85c6bc450bb9b82867265a89fe.png]: https://img-blog.csdnimg.cn/ee268e85c6bc450bb9b82867265a89fe.png
[fe2710b35d7e455bb3d39cc8439af665.png]: https://img-blog.csdnimg.cn/fe2710b35d7e455bb3d39cc8439af665.png