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. 说相关知识
  • 多面,一般面试主要就问重点,主要背重点

进阶参考

你可能感兴趣的:(重返学习,学习,javascript,vue.js)