20230412----重返学习-数组方法-vue2基础

day-048-forty-eight-20230412-数组方法-vue2基础

数组方法

数组的静态方法

• 在Array()构造函数身上的方法

  console.dir(Array);//ƒ Array()
  

  • Array.from() 将类数组转为数组

    Array.from({0:'item0',1:'item1',2:'item2',length:3})//['item0', 'item1', 'item2']
    Array.from({length:3})//[undefined, undefined, undefined]
    Array.from({0:0,a:'itema',length:3})//[0, undefined, undefined]
    

  • Array.isArray() 判断是不是数组 是true 不是false

    let num = 100;
    let arr1 = new Array();
    let arr2 = [5];
    console.log(arr1);//[]
    console.log(Array.isArray(arr1));//true
    console.log(Array.isArray(arr2));//true
    console.log(Array.isArray(num));//false
    

  • Array.of()

    console.log(Array.of(1, 23, [12, 34]));//[1, 23, [12, 34]]
    

  • new Array() 构造函数

    • 传入一个数字，返回的是一个空槽数组，也叫稀疏数组。

      let arr = [6];
      console.log(arr);//[6]
      let arr1 = new Array(6,7);
      console.log(arr1);//[6,7]
      let arr2 = new Array(6);
      console.log(arr2);//[空属性 × 6]
      

      • 空槽数组中的空槽不进行遍历，所以一般得要填充值之后才能

        let arr2 = new Array(6);
        console.log(arr2);//[空属性 × 6]
        //空属性数组不能循环，填充后数组可以循环
        arr2.forEach((item) => {
          console.log("2222");
        });
        console.log(arr2.fill("a", 3, 6));//[空属性 × 3, 'a', 'a', 'a']
        
        //原来数组不能循环，填充后数组可以循环
        //不写 默认填充 undefined
        arr2.fill().forEach((item) => {
          console.log("111");
        });
        

数组的静态属性

• Array.length: 值为1，表示构造函数Array()的入参只有一个。
• Array.name: 值为"Array"，表示构造函数Array()的名称为"Array"。

数组的私有属性

• [].length 表示当前数组实例上有多少个元素
  • 索引下标，这个是数组实例上的元素才有，用它可以表示当前元素位于数组集合中的角标。

数组的公有方法

• [].fill(value,startIndex,end) 数组填充

  • 形式参数默认值 [].fill(value=undefined,startIndex=0,end=this.length)

    • value: 要填充的值
    • startIndex: 开始填充的索引下标
    • end: 结束填充的位置，不包含自身

    let arr2 = new Array(6);
    console.log(arr2);//[空属性 × 6]
    console.log(arr2.fill("a", 3, 6));//[空属性 × 3, 'a', 'a', 'a']
    console.log(arr2);//[空属性 × 6]
    
    //原来数组不能循环，填充后数组可以循环
    //不写 默认填充 undefined
    arr2.fill().forEach((item,index) => {
      console.log("111",item,index);
    });
    

数组的公有迭代器公有方法

• 迭代器方法，循环，共有9个

  • [].forEach(callback) 遍历数组

    • callback，默认为(item,index,array)=>{}
      • 被回调时的形参意义
        • item 当前循环到的数组元素
        • index 当前循环到的索引下标
        • array 当前处于循环的数组本身
      • 预期返回值: 未定义undefined，不需要返回值
    • 被回调时的返回值: 未定义undefined
    • 只有forEach没有return

  • [].map(callback) 遍历数组，返回一个回调函数返回值组成的新数组

    • callback，默认为(item,index,array)=>{}
      • 被回调时的形参意义
        • item 当前循环到的数组元素
        • index 当前循环到的索引下标
        • array 当前处于循环的数组本身
      • 被回调时的预期返回值: 任意类型的值
    • 返回值: 回调函数的预期返回值组成的新数组

  • [].filter(callback) 筛选，将满足条件的内容筛选出来，返回一个 新数组

    • callback，默认为(item,index,array)=>{}
      • 被回调时的形参意义
        • item 当前循环到的数组元素
        • index 当前循环到的索引下标
        • array 当前处于循环的数组本身
      • 被回调时的预期返回值: 布尔值
    • 返回值:

      • 回调函数的预期返回值为true时循环到的item值组成的新数组

      • 没有回调函数的预期返回值为true时，返回值是false

        let arr=[12,34,2,4,56,7,9];
        let resultarr=arr.filter((item,index,arr)=>{
            return item>10;//条件
        })
        console.log(resultarr);//[12, 34, 56]
        

  • [].find(callback) 查找，将满足条件的第一个内容查找出来，返回结果 第一个内容

    • callback，默认为(item,index,array)=>{}
      • 被回调时的形参意义
        • item 当前循环到的数组元素
        • index 当前循环到的索引下标
        • array 当前处于循环的数组本身
      • 被回调时的预期返回值: 布尔值
    • 返回值:

      • 第一个回调函数的预期返回值为true时循环到的item值

      • 没有一个回调函数的预期返回值为true时就是undefined

        let arr = [12, 34, 2, 4, 56, 7, 9];
        let resultarr = arr.find((item, index, arr) => {
          return item > 10; //条件
        });
        console.log(resultarr); //12
        

  • [].findIndex(callback) 查找，将满足条件的第一个内容索引下标查找出来，返回结果 (有)第一个内容索引下标, 没有就是-1

    • callback，默认为(item,index,array)=>{}
      • 被回调时的形参意义
        • item 当前循环到的数组元素
        • index 当前循环到的索引下标
        • array 当前处于循环的数组本身
      • 被回调时的预期返回值: 布尔值
    • 返回值:

      • 第一个回调函数的预期返回值为true时循环到的index索引下标

      • 没有一个回调函数的预期返回值为true时就是-1

        let arr=[12,34,2,4,56,7,9];
        let resultarr=arr.findIndex((item,index,arr)=>{
            return item>10;//条件
        })
        console.log(resultarr);//0
        

  • [].every(callback) 必须每一个都满足条件，满足true，不满足false

    • callback，默认为(item,index,array)=>{}

      • 被回调时的形参意义
        • item 当前循环到的数组元素
        • index 当前循环到的索引下标
        • array 当前处于循环的数组本身
      • 被回调时的预期返回值: 布尔值

    • 返回值: 布尔值

      • 每一个被回调时的预期返回值都为true，就是true
      • 有一个被回调时的预期返回值为false，就是false

      let arr = [12, 34, 2, 4, 56, 7, 9];
      let result = arr.every((item, index, arr) => {
        return item > 10; //条件
      });
      console.log(result);//false
      

  • [].some(callback) 只要有一个都满足条件，有一个满足就是true，所有都不满足就是false

    • callback，默认为(item,index,array)=>{}

      • 被回调时的形参意义
        • item 当前循环到的数组元素
        • index 当前循环到的索引下标
        • array 当前处于循环的数组本身
      • 被回调时的预期返回值: 布尔值

    • 返回值: 布尔值

      • 有一个被回调时的预期返回值为true，就是true
      • 每一个被回调时的预期返回值都为false，就是false

      let arr = [12, 34, 2, 4, 56, 7, 9];
      let result = arr.some((item, index, arr) => {
        return item > 10; //条件
      });
      console.log(result);//true
      

  • [].reduce(callback,initialResult) 累加 从左向右计算，初始值initialResult可有可无

    • callback，默认为(result,item,index,arr)=>{}

      • 被回调时的形参意义
        • result 上一次循环的return值，即上一步运算的结果
          • 如果有初始值，result第一次的结果就是初始值,后面循环的结果，就是return运算的内容
          • 如果没有初始值，result第一次的结果就是数组的第一项(item就变成数组第二项,索引下标将从1开始),后面循环的结果，就是return运算的内容
        • item 当前循环到的数组元素
        • index 当前循环到的索引下标
        • array 当前处于循环的数组本身
      • 被回调时的预期返回值: 下一次运算的结果或函数最终的返回值

    • initialResult 初始值，视情况而定可有可无

    • 返回值：累计计算后的最终结果值，即最后一次循环的返回值

    • 一般用于实现累加，从左向右计算

      let arr = [1, 2, 3, 4, 5];
      let result = arr.reduce((result, item, index) => {
        console.log(result, item, index);
        // 100,1,0
        // 101,2,1
        // 103,3,2
        // 106,4,3
        // 110,5,4
        // 115
        return result + item; //上一步的结果
      }, 100);
      console.log(result); //115
      

      let arr = [1, 2, 3, 4, 5];
      let result = arr.reduce((result, item, index) => {
        console.log(result, item, index);
        //1,2,1
        //3,3,2
        //6,4,3
        //10,5,4
        //15
        return result + item;
      });
      console.log(result); //15
      

  • [].reduceRight(callback,initialResult) 累加 从左向右计算，初始值initialResult可有可无

    • callback，默认为(result,item,index,arr)=>{}

      • 被回调时的形参意义
        • result 上一次循环的return值，即上一步运算的结果
          • 如果有初始值，result倒数第一次的结果就是初始值,后面循环的结果，就是return运算的内容
          • 如果没有初始值，result倒数第一次的结果就是数组的倒数第一项(item就变成数组倒数第二项,索引下标将从this.length-1-1开始),后面循环的结果，就是return运算的内容
        • item 当前循环到的数组元素
        • index 当前循环到的索引下标
        • array 当前处于循环的数组本身
      • 被回调时的预期返回值: 下一次运算的结果或函数最终的返回值

    • initialResult 初始值，视情况而定可有可无

    • 返回值：累计计算后的最终结果值，即最后一次循环的返回值

    • 一般用于实现累加，从右向左计算

      let arr = [1, 2, 3, 4, 5];
      let result = arr.reduceRight((result, item, index) => {
        console.log(result, item, index);
        //0,5,4
        return result + item;
      }, 0);
      console.log(result); //15
      

      let arr=[1,2,3,4,5];
      let result=arr.reduceRight((result,item,index)=>{
          console.log(result,item,index);
          //5,4,3
          return  result+item;
      })
      console.log(result);//15
      

累加的场景-购物车总价

let arr = [
  { price: 10, num: 3 },
  { price: 20, num: 2 },
  { price: 20, num: 1 },
];

let result = arr.reduceRight((result, item) => {
  return result + item.price * item.num;
}, 0);
console.log(result); //90

vue2基础

设计模式

mvc

• Model数据
• Controller控制器
• View视图
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O0lRobcZ-1681315099718)(./mvc软件架构模式.png)]

mvvm

• Model数据 vue实例对象中的data
• ViewModel视图模型 vue实例对象
• View视图 template模板或DOM元素
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QNwzrjLm-1681315099720)(./mvvm软件架构模式.png)]
  mvvm模式：双向数据绑定

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  head>
  <body>
    vue2 mvvm模式 双向数据绑定 渐近式框架 vue vue-router vuex ...

    
    
    <div id="app">
      <h1>{{msg}}h1>
    div>

    <script>
      // viewmodel
      var vm = new Vue({
        //el:"#app",//将数据和视图关联
        //model 数据
        data: {
          msg: "hello",
        },
      }).$mount("#app"); //将数据和视图关联
      console.log(vm);
      console.log(vm.msg);
    script>
  body>
html>

渐近式框架

• vue 核心，双向数据绑定
  • 基础模版，如div等
  • 围绕数据展开，操作数据，进而让vm去操作DOM元素
• vuex 官方组件，全局数据
• vue-router 官方组件，监控路由变动
• vue-框架 第三方UI框架，内置常用的组件和统一的UI设计

常用写法

1. {{}}可以做一些简单的逻辑运算
   • 刷新过快，网速慢的时候，会出现闪烁一下{{}}，再出数据的效果
     • 可以使用指令来处理

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  head>
  <body>
    <div id="app">
      <h1>{{msg}}h1>
      <h1>{{num.toFixed(2)}}h1>
      <h1>{{num+n}}h1>
      <h1>{{num>1000?"大数":"正常数"}}h1>
    div>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          val: "aaa",
          msg: "hello    你好",
          num: 100,
          n: 200,
        },
      });
    script>
  body>
html>

方法

在配置项中的methods中设置

• 方法中this指代的是vm这个实例
• 在模板代码中通过@事件类型="事件名"进行绑定

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>3title>
    <style>style>
  head>
  <body>
    
    <div id="app">
      <h1>{{msg}}h1>
      <button @click="toggle">切换button>
      <h1 v-show="flag">内容1h1>
      <h1 v-if="flag">内容2h1>

      <h1 v-if="num>=90">优秀h1>
      <h1 v-else-if="num>=60">合格h1>
      <h1 v-else>不合格h1>
    div>
  body>
html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
  var vm = new Vue({
    el: "#app", //将数据和视图关联
    //model 数据
    data: {
      msg: "hello",
      flag: true,
      num: 10,
    },
    methods: {
      toggle() {
        // console.log(`this.flag-->`, this.flag);
        this.flag = !this.flag;//this指的是当前所配置的vue实例对象vm。
      },
    },
  });

  // console.log(`vm.msg-->`, vm.msg);//vm可以访问Vue构造函数在进行配置时对应的data生成的响应式数据。
script>

指令

• 指令要结合标签一起使用
  • 可以把指令当成一个属性

1. v-text 展示数据，不会出现闪烁的问题，会覆盖原来的内容

   • 渲染内容跟{{}}作用差不多

     DOCTYPE html>
     <html>
       <head>
         <meta charset="utf-8" />
         <title>title>
         <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
       head>
       <body>
         <div id="app">
           <h1 v-text="msg">111h1>
         div>
     
         <script>
           var vm = new Vue({
             el: "#app",
             data: {
               msg: "hello    你好",
             },
           });
         script>
       body>
     html>
     

2. v-html 展示数据，不会有闪烁问题，会覆盖原来的内容

   • 能识别标签，一定要慎用。防止有人放script代码。

     DOCTYPE html>
     <html>
       <head>
         <meta charset="utf-8" />
         <title>title>
         <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
       head>
       <body>
         <div id="app">
           <h1 v-html="msg">222h1>
         div>
     
         <script>
           var vm = new Vue({
             el: "#app",
             data: {
               msg: "hello    你好",
             },
           });
         script>
       body>
     html>
     

3. v-cloak 既能使用{{}}，也能解决闪烁问题，需要配合css

   [v-cloak]{
     display: none;
   }
   

   DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8" />
       <title>title>
       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
       <style>
         [v-cloak] {
           display: none;
         }
       style>
     head>
     <body>
       <div id="app">
         <h1 v-cloak>{{msg}}h1>
       div>
   
       <script>
         var vm = new Vue({
           el: "#app",
           data: {
             msg: "hello    你好",
           },
         });
       script>
     body>
   html>
   

4. v-pre 内容是怎样的，就展示什么样子，不会进行编译

   • 使用了v-pre的标签里，里面的内容及变量都不会被编译

   DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8" />
       <title>title>
       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
     head>
     <body>
       <div id="app">
         <h1 v-pre>{{msg}}h1>
       div>
   
       <script>
         var vm = new Vue({
           el: "#app",
           data: {
             msg: "hello    你好",
           },
         });
       script>
     body>
   html>
   

5. v-model 双向数据绑定

   • input标签中代替的是value
   • 一般与表单元素结合一块使用

   DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8" />
       <title>title>
       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
     head>
     <body>
       <div id="app">
         <input type="text" v-model="val" />
         <h1>{{val}}h1>
       div>
   
       <script>
         var vm = new Vue({
           el: "#app",
           data: {
             val: "aaa",
           },
         });
       script>
     body>
   html>
   

6. v-once 只执行一次

   DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8" />
       <title>title>
       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
     head>
     <body>
       <div id="app">
         <input type="text" v-model="val" />
         <h1 v-once>{{val}}h1>
       div>
   
       <script>
         var vm = new Vue({
           el: "#app",
           data: {
             val: "aaa",
           },
         });
       script>
     body>
   html>
   

7. v-show 后面跟一个最终结果是boolean布尔类型的值，true显示，false隐藏

   • 底层原理是通过css中的display:none

     • 显示：移除display:none或者什么也不添加。

     • 隐藏：给该元素添加display:none。

       DOCTYPE html>
       <html>
         <head>
           <meta charset="utf-8" />
           <title>title>
           <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
         head>
         <body>
           <div id="app">
             <button @click="toggle">点击切换button>
             <h1 v-show="flag">11111h1>
             <h1 v-show="num>6?true:false">2222h1>
           div>
           <script>
             var vm = new Vue({
               el: "#app",
               data: {
                 flag: false,
                 num: 10,
               },
               methods: {
                 //方法
                 toggle() {
                   this.flag = !this.flag;
                 },
               },
             });
           script>
         body>
       html>
       

       DOCTYPE html>
       <html>
         <head>
           <meta charset="utf-8" />
           <title>title>
           <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
         head>
         <body>
           <div id="app">
             <button @click="toggle">点击切换button>
             <h1 v-show="flag" style="display:flex;">11111h1>
             <h1 v-show="num>6?true:false">2222h1>
           div>
           <script>
             var vm = new Vue({
               el: "#app",
               data: {
                 flag: false,
                 num: 10,
               },
               methods: {
                 //方法
                 toggle() {
                   this.flag = !this.flag;
                 },
               },
             });
           script>
         body>
       html>
       

   • 后方的值可以是指的是最终结果

     • 一个具体的值，非布尔值就转成布尔值

     • 表达式，如三元表达式或全等===之类的，运算结果转成布尔值

       DOCTYPE html>
       <html>
         <head>
           <meta charset="utf-8" />
           <title>title>
           <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
           <style>
             .fang{
               display: flex !important;
             }
           style>
         head>
         <body>
           <div id="app">
             <button @click="toggle">点击切换button>
             <h1 v-show="flag" class="fang" style="display:flex;">11111h1>
             <h1 v-show="num>6?true:false">2222h1>
           div>
           <script>
             var vm = new Vue({
               el: "#app",
               data: {
                 flag: false,
                 num: 10,
               },
               methods: {
                 //方法
                 toggle() {
                   this.flag = !this.flag;
                 },
               },
             });
           script>
         body>
       html>
       

8. v-if v-else-if v-else 与js中的if、else-if、else效果一样，可以做显示与隐藏

   • 底层原理是用来做删除与创建DOM元素

     • true显示创建标签

     • false隐藏删除标签

       DOCTYPE html>
       <html>
         <head>
           <meta charset="utf-8" />
           <title>title>
           <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
         head>
         <body>
           <div id="app">
             <h1 v-if="flag">111h1>
             <button @click="toggle">点击切换button>
           div>
           <script>
             var vm = new Vue({
               el: "#app",
               data: {
                 flag: false,
               },
               methods: {
                 toggle() {
                   this.flag = !this.flag;
                 },
               },
             });
           script>
         body>
       html>
       

   • 常用场景

     • 可以用来做比较复杂的判断，比v-show更灵活

       DOCTYPE html>
       <html>
         <head>
           <meta charset="utf-8" />
           <title>title>
           <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
         head>
         <body>
           <div id="app">
             <h1 v-if="num>=90">优秀h1>
             <h1 v-else-if="num>=60">合格h1>
             <h1 v-else>不合格h1>
           div>
           <script>
             var vm = new Vue({
               el: "#app",
               data: {
                 num: 18,
               },
             });
           script>
         body>
       html>
       

     • 也可以用来做权限

       • 如果没权限，就没那个dom，用户就不能通过改css来让元素显示了

   • 与v-show的对比

     • v-show 适合频繁做显示与隐藏效果的时候，性能消耗小
     • v-if 适合只显示一次就不在改变效果的显示与隐藏，性能消耗小
       • 比如说一开始就显示，之后就一直隐藏了
       • 或者是一开始隐藏，之后就一直显示而不再隐藏

9. v-for 循环数据

   • 可以循环
     • 数值：
       • 一项：item 数值item从1开始算起
       • 两项：(item,index) 数值item从1开始算起，索引下标index从0开始算起
     • 数组
     • 对象
   • 与key配合

     • v-for本身就有一个问题：就地复用同样结构的同名标签

       DOCTYPE html>
       <html lang="en">
         <head>
           <meta charset="UTF-8" />
           <title>添加title>
         head>
         <body>
           <div id="app">
             <input type="text" v-model="val" /><button @click="add">addbutton>
             <ul>
               <li v-for="item in arrdata">
                 <input type="checkbox" />{{item.name}}
               li>
             ul>
           div>
         body>
       html>
       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
       <script>
         var vm = new Vue({
           el: "#app",
           data: {
             val: "",
             arrdata: [{ id: "001", name: "黎明" }],
           },
           methods: {
             add() {
               let obj = {
                 id: +new Date(),
                 name: this.val,
               };
               this.arrdata.unshift(obj);
               console.log(`this.arrdata-->`, this.arrdata);
               this.val = "";
             },
           },
         });
       script>
       

       • 解决方案：添加一个唯一的key属性

         <li v-for="item in arrdata">
           <input type="checkbox" />{{item.name}}
         li>
         

         <li v-for="item in arrdata" :key="item.id">
           <input type="checkbox" />{{item.name}}
         li>
         

         DOCTYPE html>
         <html lang="en">
           <head>
             <meta charset="UTF-8" />
             <title>添加title>
           head>
           <body>
             <div id="app">
               <input type="text" v-model="val" /><button @click="add">addbutton>
               <ul>
                 <li v-for="item in arrdata" :key="item.id">
                   <input type="checkbox" />{{item.name}}
                 li>
               ul>
             div>
           body>
         html>
         <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
         <script>
           var vm = new Vue({
             el: "#app",
             data: {
               val: "",
               arrdata: [{ id: "001", name: "黎明" }],
             },
             methods: {
               add() {
                 let obj = {
                   id: +new Date(),
                   name: this.val,
                 };
                 this.arrdata.unshift(obj);
                 console.log(`this.arrdata-->`, this.arrdata);
                 this.val = "";
               },
             },
           });
         script>
         

         • 组件使用 v-for必须使用key，为了防止更新的问题

10. v-bind: 绑定属性

    • 简写为:
    • 特殊属性

      • class

        1. :class=“a” 如果a(引号里面又有引号)不加引号----》data

        2. :class=“[a,b]” 多个值，必须用数组

        3. :class=“true?b:‘’” 可以写三元运算

           data:{
             a:"one",
             b:"two",
           }
           

        4. :class=“{‘one’:true,‘two’:false}” 对象的key必须是类名，不能查找data

             .one{
                 color:red;
             }
             .two{
                 background-color: aquamarine;
             }
           

      • style

        1. :style=“{color:‘pink’,backgroundColor:‘blue’}” 是对象

        2. :style=“stya”

           data:{
             stya:{
                 color:'pink',
                 backgroundColor:'blue'
             }
           }
           

        3. :style=“[stya,styb]”

           data:{
             stya:{
                 color:'pink',
                 backgroundColor:'blue'
             },
             styb:{
                 border:"10px solid yellow"
             }
           }
           

vue插件

1. Vetur
2. Vue Language Features (Volar)
3. VueHelper – vue代码提示插件，vue2所有api和vue-router2和vuex2的代码提示，2023年作者转行不更了
4. Vue 3 Snippets – vue代码提示插件，依然更新，替代VueHelper

面试技巧

• 把知识整理，背好，提前说知识
• 把底层知识如源码说一下
• 比相关的东西放一起，每一个懂的知识多回答多点，让面试者出题的题少一点
• 一个题答案流程
  1. 说结果
  2. 说原因
  3. 说底层源码知识
  4. 说相关知识
• 多面，一般面试主要就问重点，主要背重点

进阶参考