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

最新推荐文章于 2024-05-16 16:29:39 发布
最新推荐文章于 2024-05-16 16:29:39 发布
阅读量394 收藏
点赞数
分类专栏： 重返学习 文章标签： 学习 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seetoyou/article/details/130119742
版权

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

    <!-- view视图  template模板代码 -->
    <!-- 使用小胡子语法，展示数据 -->
    <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: "<i>hello    你好</i>",
          num: 100,
          n: 200,
        },
      });
    </script>
  </body>
</html>

方法

在配置项中的methods中设置

  • 方法中this指代的是vm这个实例
  • 在模板代码中通过@事件类型="事件名"进行绑定
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>3</title>
    <style></style>
  </head>
  <body>
    <!-- view视图---模板代码 -->
    <div id="app">
      <h1>{{msg}}</h1>
      <button @click="toggle">切换</button>
      <h1 v-show="flag">内容1</h1>
      <h1 v-if="flag">内容2</h1>

      <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">111</h1>
    </div>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "<i>hello    你好</i>",
        },
      });
    </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">222</h1>
    </div>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "<i>hello    你好</i>",
        },
      });
    </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: "<i>hello    你好</i>",
        },
      });
    </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: "<i>hello    你好</i>",
        },
      });
    </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">11111</h1>
      <h1 v-show="num>6?true:false">2222</h1>
    </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;">11111</h1>
      <h1 v-show="num>6?true:false">2222</h1>
    </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;">11111</h1>
      <h1 v-show="num>6?true:false">2222</h1>
    </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">111</h1>
      <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">add</button>
      <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">add</button>
      <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. 说相关知识
  • 多面，一般面试主要就问重点，主要背重点

进阶参考

方朝端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记：理解Vue2如何解决数组和对象的响应式问题
月亮船
10-24 7104
目录前言基本的代码对复杂对象的处理对Array的处理完整代码仍存在的问题参考的资料 前言 Vue2是通过用Object…defineProperty来设置数据的getter和setter实现对数据和以及视图改变的监听的。对于数组和对象这种引用类型来说，getter和setter无法检测到它们内部的变化。那么Vue2是则么来解决这个问题的呢？ 通过一个简单的例子来理解Vue2中是如何解决数组和对象的响应式问题。 基本的代码 <html> <head> </head>
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
vue2.0 数组操作
GSL_566的博客
11-30 546
vue2.0 数组操作
【Vue2+数组】用两个案例熟悉Vue2的v-for语法和数组的常用方法
最新发布
m0_63241410的博客
05-16 340
主要用到的数组方法--->shift()删除第一位的元素和push()追加到最后一位元素的后面。 随机数方法Math.random()以及时间戳+new Date()的用法
vue2的数组方法整理归纳
Song_1210的博客
04-26 1208
数组基本操作可以归纳为 增、删、改、查，需要留意的是哪些⽅法会对原数组产⽣影响，哪些⽅法不会 增 下⾯前三种是对原数组产⽣影响的增添⽅法，第四种则不会对原数组产⽣影响 push() unshi!() splice() concat() 删 下⾯三种都会影响原数组，最后⼀项不影响原数组： pop() shi!() splice() slice() 改 即修改原来数组的内容，常⽤ splice splice() 传⼊三个参数，分别是开始位置，要删除元素的数量，要插⼊的任意多个元素，返回.
Vue数组方法
诚的博客
03-04 647
1.变异方法 push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。 pop()方法用于删除并返回数组的最后一个元素。 shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。 unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度。 splice()方法向/从数组中添加/删除项目，然后返回被删除的项目。 sort()方法用于对...
vue2 对数组、对象的响应式处理
Ella2016的博客
05-13 1016
需要注意的是，对于新增属性，Vue不能自动响应式地更新视图，因为 Vue 无法在运行时动态为对象添加 getter 和 setter 方法。如果需要动态添加属性，可以使用 Vue.set 或者 this.$set 方法，将新属性添加到对象中，并通知 Vue 进行响应式更新。在 Vue 2 中，数组的响应式处理采用了重写数组原型对象的方式，以拦截数组方法的调用，并在调用后通知依赖更新。，这样数组的所有方法就会被重写了。总的来说，Vue 2 通过重写数组原型对象来实现数组的响应式处理，而对于对象则采用了。
vue-mobx:Vuejs 2的Mobx绑定
05-16
安装使用npm安装pkg： npm install vue-mobx --save或纱线 yarn add vue-mobx或凉亭 bower install vue-mobx用法显然，它适用于Mobx和Vuejs，可通过NPM安装： npm i --save mobx vue vue-mobx ：1.安装vue-mobx插件...
vue-print-nb 兼容低版本浏览器
11-28
2. **传统DOM操作**：尽管Vue.js基于虚拟DOM，但为了保证在旧浏览器中的兼容性，`vue-print-nb` 可能会使用传统的DOM操作方法，如querySelector、innerHTML等，而非依赖于Vue的API。 3. **CSS前缀**：对于CSS3的新...
Vue-Router基础学习笔记(小结)
10-17
主要介绍了Vue-Router基础学习笔记(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue2-org-tree样式文件
11-27
Vue2-org-tree样式文件
Vue2.0开发之——数组中的方法(43)
我的博客
02-28 245
some循环every循环reduce的用法more。
Vue中数组常用操作函数/迭代器使用总结 -- 数组亦可称为集合
Zhaof_Notes
12-21 2322
Vue中数组常用操作函数/迭代器使用总结 -- 数组亦可称为集合
vue中数组的响应式
wlijun_0808的博客
11-06 6095
vue中数组的响应式
(vue)判断是否为字符串/数组
nyf_unknow的博客
03-28 1334
应用：如果this.formInline.dataY不是数组则转为数组。
vue2 基础知识点学习日记的总结（2）
dangYuHang_的博客
10-03 394
vue的其他指令： (注意：content 表示 vue 实例中 data 的数据) (1): v-bind v-bind 动态为属性绑定变量 例： <img v-bind:src="imgURL"> 语法糖（简写）：':' 一个冒号 例： <img :src="imgURL"> v-bind也可以绑定类名class等，class的值可以是数组或者是对象，大部分是对象，对象中包括一组组键值对，类名就是对应的样式，也就是键；后边的值就是对应着增加和移除该类，取值是t.
vue js判断一个变量是数组还是对象
撑起自己半边天
06-16 5035
vue js判断一个变量是数组还是对象
Vue必备知识-数组常用方法
qq_38210427的博客
04-10 1539
/ 弹出数组的最后一个元素,返回该元素。
【Vue源码解读】第1080~1910行
harmsworth的博客
06-14 241
【Vue源码解读】第1080~1910行
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值