vue全家桶（一）

1.vue基本使用
2.vue模板语法

1.vue基本使用

实例参数分析

el：元素的挂载位置（值可以是css选择器，或者DOM元素）
data：模型数据（值是一个对象）

差值表达式的用法

将数据填充到HTML标签中
差值表达式支持基本的计算操作

vue代码运行原理分析

概述编译过程的概念（vue语法->原生语法）

2.vue模板语法

差值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构

1.差值表达式

<div>{
    
    {
    
    msg}}</div>
<div>{
    
    {
    
    1+2}}</div>

2.指令

1.什么是指令

指令的本质是自定义属性
指令的格式：以v-开始（比如v-bloak）

v-cloak指令的用法
1、提供样式
  [v-cloak]{
    
    
    display: none;
  }
2、在插值表达式所在的标签中添加v-cloak指令
背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

2.数据绑定指令

v-text填充纯文本
相比差值表达式更加简洁
v-html填充Html片段
存在安全问题，本网站内部数据可以使用，来自第三方的数据不可以用
v-pre填充原始信息
显示原始信息，跳过编译过程（分析编译过程）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{
    
    {
    
    msg}}</div>
    <div v-text='msg'></div>
    <div v-html='msg1'></div>
    <div v-pre>{
    
    {
    
    msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
      2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题
      3、v-pre用于显示原始信息
    */
    var vm = new Vue({
    
    
      el: '#app',
      data: {
    
    
        msg: 'Hello Vue',
        msg1: '<h1>HTML</h1>'
      }
    });
  </script>
</body>
</html>

3.双向数据绑定

MVVM设计思想

M(Model)
V(View)
VM(View-Model)

MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel
m model
- 数据层 Vue 中数据层都放在 data 里面
v view 视图
- Vue 中 view 即我们的HTML页面
vm （view-model）控制器将数据和视图层建立联系
- vm 即 Vue 的实例就是 vm
当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化

分而治之，把不同的业务代码放在不同的模块当中，再通过特定的逻辑把它们组织到一块
从视图到模型，用的是事件监听；从模型到视图用的是数据绑定

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>{
    
    {
    
    msg}}</div>
      <div>
        <input type="text" v-model='msg'>
      </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
        双向数据绑定
        1、从页面到数据
        2、从数据到页面
      */
      var vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
          msg: 'Hello Vue'
        }
      });
    </script>
  </body>
  </html>

4.事件绑定

4.1@click

//v-on:
<button v-on:click='num++'>点击</button>
//简写
<button @click='num++'>点击1</button>

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

<div>{
    
    {
    
    num}}</div>
//一、不传参，下面两种没有什么区别
//1.直接绑定函数名称
<el-button type="primary" @click="btnHandler1">+1</el-button>
//2.调用函数
<el-button type="primary" @click="btnHandler1()">+1</el-button>
//二、获取事件对象
//1.直接绑定函数名称，默认传事件对象
<el-button type="primary" @click="btnHandler2">+1</el-button>
//2.调用函数，需要在括号中传递$event,且是固定的
<el-button type="primary" @click="btnHandler2($event)">+1</el-button>
//三、普通参数和事件对象
<el-button type="primary" @click="btnHandler3(123,456,$event)">+1</el-button>
  data() {
    
    
    return {
    
    
      num: 0,
    }
  },
  // methods  中 主要是定义一些函数
  methods: {
    
    
    btnHandler1() {
    
    
       // 这里的this是Vue的实例对象+
      this.num++
      //   在函数中 想要使用data里面的数据 一定要加this 
    },
    btnHandler2(event) {
    
    
      this.num++
      console.log("p", event,event.target.innerHTML);
    },
    btnHandler3(p, p1, event) {
    
    
      this.num++
      console.log("p", p, p1, event,event.target.innerHTML);
    },
  }

4.2事件修饰符

vue官网api中所有的事件修饰符：
https://v2.cn.vuejs.org/v2/api/#v-on

.stop 阻止冒泡

    <div v-on:click='handle0'>
      <button v-on:click.stop='handle1'>点击1</button>
    </div>

.prevent阻止默认行为

//a标签默认会跳转
<div>
  <a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a>
</div>

      methods: {
    
    
        handle0: function(){
    
    
          this.num++;
        },
        handle1: function(event){
    
    
          // 阻止冒泡
          // event.stopPropagation();
        },
        handle2: function(event){
    
    
          // 阻止默认行为
          // event.preventDefault();
        }
      }

4.3按键修饰符

vue全局监听Esc，enter按键事件
1.自定义事件修饰符

  <div id="app">
    <input type="text" v-on:keyup.aaa='handle' v-model='info'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      事件绑定-自定义按键修饰符
      规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
    */
    Vue.config.keyCodes.aaa = 65
    var vm = new Vue({
    
    
      el: '#app',
      data: {
    
    
        info: ''
      },
      methods: {
    
    
        handle: function(event){
    
    
          console.log(event.keyCode)
        }
      }
    });
  </script>

2.监听按键，并进行操作

created() {
    
    
    window.addEventListener("keyup", this.enterSearch)
  },
  methods:{
    
    
    clearContent3() {
    
    
      // 按!键
      console.log("this.uname1");
    },
    enterSearch(e) {
    
    
    	//监听回车
      console.log("e.keyCode",e.keyCode);
        if (e.keyCode === 49) {
    
    
        	//在这里写你的操作逻辑
            this.clearContent3()
        }
    },
  },

4.4属性绑定

动态处理属性
v-bind指令用法

<a v-bind:href="url" >跳转</a>

缩写形式

<a :href="url" >跳转</a>

我们可以给v-bind:class 一个对象，以动态地切换class。
注意：v-bind:class指令可以与普通的class特性共存

<script type="text/javascript">
    /*
      属性绑定
    */
    var vm = new Vue({
    
    
      el: '#app',
      data: {
    
    
        url: 'http://www.baidu.com'
      },
      methods: {
    
    
        handle: function(){
    
    
          // 修改URL地址
          this.url = 'http://itcast.cn';
        }
      }
    });
  </script>

4.5-指令v-model的本质

v-bind去绑定value的值，用v-on去绑定input事件，使用输入域中的最新的数据覆盖原来的数据，完成了数据的双向绑定

 <div id="app">
    <div>{
    
    {
    
    msg}}</div>
    <input type="text" v-bind:value="msg" v-on:input='handle'>
    <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
    <input type="text" v-model='msg'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-model指令的本质
    */
    var vm = new Vue({
    
    
      el: '#app',
      data: {
    
    
        msg: 'hello'
      },
      methods: {
    
    
        handle: function(event){
    
    
          // 使用输入域中的最新的数据覆盖原来的数据
          this.msg = event.target.value;
        }
      }
    });
  </script>

4.6 样式绑定

4.6.1 class样式处理

1.class样式处理

对象语法

<div :class="{active:isActive}"> </div>

数组语法

<div :class="[activeClass,errorClass]"> </div>

绑定对象和绑定数组的区别

绑定对象的时候对象的属性即要渲染的类名对象的属性值对应的是 data 中的数据
绑定数组的时候数组里面存的是data 中的数据

<div style="margin:20px 0;">
    <!-- class样式绑定-对象 -->
    <div :class="{active:isActive,error:isError}"> 测试样式1</div>
    
    <!-- class样式绑定-数组 -->
    <div :class='[isActive?"active":"", isError?"error":""]'>测试样式</div>
    
    <!--:class='currentIndex==index?"active":""'-->
    
    <el-button type="primary" @click="btnHandler4">切换1</el-button>
</div>
<div style="margin:20px 0;">
   <!-- class对象和数组可以组合使用 -->
   <div :class="[activeclass,errorClass,{test:isTest}]"> 测试样式2</div>
   <!-- class简化操作-数组 -->
   <div :class="arrClass"> 测试样式3</div>
   <!-- class简化操作-对象 -->
   <div :class="objClass"> 测试样式4</div>
   <el-button type="primary" @click="btnHandler5">切换2</el-button>
</div>

  data() {
    
    
    return {
    
    
      isActive: true,
      isError:true,
      activeclass:"active",
      errorClass:"error",
      isTest:true,
      arrClass:["active","error"],
      objClass:{
    
    
        active:true,
        error:true,
      },
    }
  },
  methods:{
    
    
       // 切换class,展示不展示
    btnHandler4(){
    
    
      // 控制isActive的值在true和false之间进行切换
      this.isActive=!this.isActive
      this.isError=!this.isError
    },
    btnHandler5(){
    
    
        this.errorClass=this.errorClass?"":"error"
        this.isTest=!this.isTest
        this.objClass.error=!this.objClass.error
        this.arrClass[0] = this.arrClass[0]?"":"active"
        this.arrClass[1] = this.arrClass[1]?"":"error"
    },
  },

<style scoped>
.active {
    
    
  border: 3px solid pink;
  height: 100px;
  width: 100px;
}
.error {
    
    
  background-color: orangered;
}
.test {
    
    
  color:blue;
}
</style>

4.6.2 style样式处理

    <div style="margin:20px 0;">
      <!-- style对象 -->
      <!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来)    -->
      <div :style="{border:borderstyle,height:heightStyle,width:widthStyle}"> 测试样式5</div>
      <!-- style -对象 -->
      <div :style="objStyles"> 测试样式6</div>
      <!-- style -数组 -->
      <div :style="[objStyles,overrideStyles]"> 测试样式7</div>
      <el-button type="primary" @click="btnHandler6">切换3</el-button>
    </div>

  data() {
    
    
    return {
    
    
      // style
      borderstyle: "1px solid blue",
      heightStyle: "100px",
      widthStyle: "100px",
      objStyles: {
    
    
        border: "10px solid pink",
        height: "100px",
        width: '200px',
      },
      overrideStyles: {
    
    
        border: "5px solid blue",
        height: "200px",
        width: '100px',
        background: "green"
      }
    }
  },


    btnHandler6() {
    
    
      this.overrideStyles.height = "100px"
      this.objStyles.width = "100px"
    },

4.7 分支循环结构

4.7.1.分支结构

v-if
v-else-if
v-else
v-show

4.7.2.v-if和v-show的区别

v-if控制元素是否渲染到页面
v-show控制元素是否显示（已经渲染到了页面）
1- 多个元素通过条件判断展示或者隐藏某个元素。或者多个元素
2- 进行两个视图之间的切换

区别

v-show本质就是标签display设置为none，控制隐藏
- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
v-if是动态的向DOM树内添加或者删除DOM元素
- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

   <div>
      <div v-if='score>=90'>优秀</div>
      <!-- v-else-if紧跟在v-if或v-else-if之后   表示v-if条件不成立时执行-->
      <div v-else-if='score<90&&score>=80'>良好</div>
      <div v-else-if='score<80&&score>60'>一般</div>
      <!-- v-else紧跟在v-if或v-else-if之后-->
      <div v-else>比较差</div>
      <!-- v-show的原理：控制元素样式是否显示 display:none -->
      <div v-show='flag'>测试v-show</div>
      <el-button type="primary" @click='btnHandler7'>点击</el-button>
    </div>
  data() {
    
    
    return {
    
    
      score: 10,
      flag: false,
    }
   },

    btnHandler7() {
    
    
      this.flag = !this.flag;
    },

4.7.3.循环结构

    <!-- 分支循环结构-遍历数组 -->
    <ul>
      <!-- key的作用：帮助vue区分不同的元素，从而提高性能 -->
      <li v-for='item in fruits' :key='item.id'>{
    
    {
    
    item}}</li>
      <li v-for='(item, index) in fruits' :key='item.id'>{
    
    {
    
    item + '---' + index}}</li>
      <li :key='item.id' v-for='item in myFruits'>
        <span>{
    
    {
    
    item.ename}}</span>
        <span>-----</span>
        <span>{
    
    {
    
    item.cname}}</span>
      </li>
    </ul>
    <!-- 分支循环结构-遍历对象 -->
    <div v-for='(v,k,i) in obj' :key="k">{
    
    {
    
    v + '---' + k + '---' + i}}</div>

5.vue常用特性

自定义指令
计算属性
过滤器
侦听器
生命周期

5.1自定义指令

Vue实现el-dialog对话框拖拽位置、放大缩小
 https://blog.csdn.net/ingenuou_/article/details/123924160

5.2计算属性

使用计算属性可以使模板变的更加整洁

添加一个新的属性computed，通过函数的方式来定义计算属性，使用的时候，直接访问函数名（不需要添加括号），函数体中，具体来实现计算逻辑，return是必须要加的，只有return之后才能获取到计算属性的结果，计算属性是基于data中的数据进行处理的

    <!-- computed的用法，基于data中的数据 -->
    <div>
      <div>{
    
    {
    
    msg}}</div>
      <div>{
    
    {
    
    reverseString}}</div>
      <el-button type="primary" @click='btnHandler8'>更改data中的msg数据</el-button>
      <!-- 只要msg中的数据变化，computed呈现的数据也跟着变化 -->
    </div>

   msg:"hello",

   computed: {
    
    
    reverseString() {
    
    
      return this.msg.split('').reverse().join('');
    }
   },
   methods: {
    
    
    btnHandler8(){
    
    
      this.msg=this.msg=='happy'?'hello':'happy'
    },
   }

1.计算属性与方法的区别

计算属性是基于它们的依赖进行缓存，节省一定的
方法不存在缓存

    <!-- 计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存 -->
    <div>
      <div>{
    
    {
    
    reverseString}}</div>
      <div>{
    
    {
    
    reverseString}}</div>
      <div>{
    
    {
    
    reverseMessage()}}</div>
      <div>{
    
    {
    
    reverseMessage()}}</div>
    </div>

  computed: {
    
    
    reverseString() {
    
    
      // 基于data中依赖的数据不变，computed只会调用一次，再调用的用缓存的数据；发生变化才会再次调用
      return this.msg.split('').reverse().join('');
    }
  },

methods: {
    
    
    reverseMessage() {
    
    
      // 每调用一次，就会调一次
      console.log('methods')
      return this.msg.split('').reverse().join('');
    }
}

5.3侦听器

应用场景：数据变化时执行异步或者开销比较大的操作
在这里插入图片描述

<el-input type="text" v-model='username' />

username: ""

  watch: {
    
    
    // 优点：可以通过 immediate 控制侦听器自动触发一次
    username: {
    
    
      // 可以控制侦听器自动触发一次 ,默认为false
      immediate: true,
      // 开启深度监听，只要对象中任何一个属性变化了，都会触发对象的侦听器
      deep: true,
      handler(newval, oldval) {
    
    
        console.log(newval, oldval);
      },
    },
  },

5.4watch和computed的区别

watch和computed各自处理的数据关系场景不同

1.watch擅长处理的场景：一个数据影响多个数据
2.computed擅长处理的场景：一个数据受多个数据影响

computed支持缓存，相依赖的数据发生改变才会重新计算；watch不支持缓存，只要监听的数据变化就会触发相应操作
computed不支持异步，当computed内有异步操作时是无法监听数据变化的；watch支持异步操作
computed属性的属性值是一函数，函数返回值为属性的属性值，computed中每个属性都可以设置set与get方法。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器

5.5过滤器

在这里插入图片描述

5.6生命周期

   /*
      Vue实例的生命周期
      
    */
    var vm = new Vue({
    
    
      el: '#app',
      data: {
    
    
        msg: '生命周期'
      },
      methods: {
    
    
        update: function(){
    
    
          this.msg = 'hello';
        },
        destroy: function(){
    
    
          this.$destroy();
        }
      },
      beforeCreate: function(){
    
    
        console.log('beforeCreate');
      },
      created: function(){
    
    
        console.log('created');
      },
      beforeMount: function(){
    
    
        console.log('beforeMount');
      },
      mounted: function(){
    
    
        console.log('mounted');
      },
      beforeUpdate: function(){
    
    
        console.log('beforeUpdate');
      },
      updated: function(){
    
    
        console.log('updated');
      },
      beforeDestroy: function(){
    
    
        console.log('beforeDestroy');
      },
      destroyed: function(){
    
    
        console.log('destroyed');
      }
    });

6.数组相关的api

变异方法（修改原有数据）
- push()
- unshift()
- pop()
- shift()
- splice()
- sort()
- reverse()
替换数组（生成新的数组）

filter()
concat()
slice()

1.变异方法（修改原有数据）

4.1 push

1、定义和用法：
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
注意：新元素将添加在数组的末尾。
注意：此方法改变数组的长度。
提示：在数组起始位置添加元素请使用 unshift() 方法。

2、语法：
array.push(item1, item2, …, itemX)

3、实例：
添加一个以上元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var len = fruits2.push("Kiwi","Lemon","Pineapple")
consloe.log('len2 ',len2 )//7
consloe.log('fruits',fruits)//["Banana", "Orange", "Apple", "Mango", "Kiwi", "Lemon", "Pineapple"]

以上实例将输出
[“Banana”, “Orange”, “Apple”, “Mango”, “Kiwi”, “Lemon”, “Pineapple”]

4.2 unshift

1、定义和用法：
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
注意： unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素1，以此类推。
注意，unshift() 方法不创建新的创建，而是直接修改原有的数组。
注意：此方法改变数组的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var len = fruits.unshift("Kiwi","Lemon","Pineapple");
console.log('len ',len )//7
console.log('fruits',fruits)//["Kiwi", "Lemon", "Pineapple", "Banana", "Orange", "Apple", "Mango"]

4.3 pop()

1、定义和用法：
pop() 方法用于删除并返回数组的最后一个元素。
注意：返回值array 的最后一个元素。
注意：此方法改变数组的长度。

pop() 方法将删除 array 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Lemon", "Pineapple"];
let current = fruits.pop()
console.log('current ',current )//Pineapple
console.log('fruits',fruits)
// ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Lemon"]

4.4 shift()

1.定义和用法
删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Lemon", "Pineapple"];
let current= fruits.shift()
console.log('current',current)//Banana
console.log('fruits ',fruits)
// ["Orange", "Apple", "Mango", "Kiwi", "Lemon", "Pineapple"]

4.5 splice()

splice 方法用于数组或伪数组，根据参数个数和形式的不同，可以在数组中删除指定元素或者插入元素、替换元素。

用于删除并返回删除的数组

删除，插入，替换

1.一个参数

arr.splice(i)

当 splice 方法的参数只有 1 个的时候（i），表示删除数组中索引为 i 及 i 之后的所有元素。返回删除的元素，数组原地修改。其中，参数 i 是整数。
对于 i 分情况：

i 为非负整数：删除数组中索引为 i 及 i 之后位置上所有的元素
i 为负整数：索引从后往前计算，最后一位索引是 -1，倒数第二位是 -2，依次类推。删除 i 及 i 之后的所有元素。
i表示索引，删除时，从左往右删除

let fruits3=[
    {
    
    name:"张三1",id:"1"},
    {
    
    name:"张三2",id:"2"},
    {
    
    name:"张三3",id:"3"},
    {
    
    name:"张三4",id:"4"},
]
let delData=fruits3.splice(-2)
//删除倒数第二个数到最后一个数，也就是下标[2,3]
console.log('delData',delData)
//[{name: "张三3", id: "3"},{name: "张三4", id: "4"}]
console.log('fruits3',fruits3)
//[{name: "张三1", id: "1"},{name: "张三2", id: "2"}]  
fruits3.splice(0)//清空数组
console.log('fruits3',fruits3)//[]

2.两个参数

arr.splice(i, j)

当 splice 方法有两个参数时，两个参数必须均为整数。表示从数组中索引为 i 开始删除，一共删除 j 个元素。

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Lemon", "Pineapple"];
fruits.splice(0,fruits.length)//["Banana", "Orange", "Apple", "Mango", "Kiwi", "Lemon", "Pineapple"]
fruits//[]

var fruits =  ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Lemon", "Pineapple"]
fruits.splice(-2,2)// ["Lemon", "Pineapple"]
console.log(fruits.splice(1, -10)) //[],没有删除数据，第二项为删除的数量，小于等于0，都不会删除

3. 3 或 3 个以上参数

语法

a.splice(i, j, e1, e2, ...)

i：整数，表示索引的起始位置
j：整数，表示删除的个数
e1、e2、…：删除相应元素之后要添加的元素

当 splice 方法有 3 个参数时，表示从索引为 i 位置开始删除 j 个元素，然后在从 i 位置添加 e1,e2,…，返回删除的元素，原地修改。

若 j 为 0，则表示一个元素也不删除，则元素从 i 前一个位置开始插入
若 j > 0，则表示从 i 位置开始（包括 i 位置）删除 j 个元素，然后从 i 后面开始插入。

let list=[1,2,4,4,2,1,3,1]
list.splice(2, 2,5,5,5)// [4, 4]
list// [1, 2, 5, 5, 5, 2, 1, 3, 1]

j为0时，不删除，但是会添加

let list1=[1,2,4,4,2,1,3,1]
list1.splice(2,0,6,6,6)
list1 //[1, 2, 6, 6, 6, 4, 4, 2, 1, 3, 1]

4.6 sort()

sort() 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。
会改变原数组

1.没有参数

var list = ['General','Tom','Bob','John','Army'];
list.sort()// ["Army", "Bob", "General", "John", "Tom"]
list// ["Army", "Bob", "General", "John", "Tom"]

2.升序，降序

//升序
var list1 = [3,2,1,4,6,2,3,4,1,3,5];
list1.sort((a,b)=>{
    
    
return a - b;
})
// [1, 1, 2, 2, 3, 3, 3, 4, 4, 5, 6]
list1
//  [1, 1, 2, 2, 3, 3, 3, 4, 4, 5, 6]

//降序
var list1 = [3,2,1,4,6,2,3,4,1,3,5];
list1.sort((a,b)=>{
    
    
return b - a;
})
(11) [6, 5, 4, 4, 3, 3, 3, 2, 2, 1, 1]
list1
(11) [6, 5, 4, 4, 3, 3, 3, 2, 2, 1, 1]

4.6 reverse()

reverse() 方法用于颠倒数组中元素的顺序。返回颠倒后的数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();//["Mango", "Apple", "Orange", "Banana"]
fruits//["Mango", "Apple", "Orange", "Banana"]

2.替换数组（生成新的数组）

4.7 filter()

filter用于对数组进行过滤。
它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意：filter()不会对空数组进行检测、不会改变原始数组

必须有return

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res1 = nums.filter((num) => {
    
    
    return num > 5;
});
console.log('res1', res1);//[6, 7, 8, 9, 10]
console.log('nums', nums);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

let list = [{
    
    
    name: "张三",
    number: 1,
}, {
    
    
    name: "李四",
    number: 2,
}, {
    
    
    name: "王五",
    number: 3,
}, ]
let res = list.filter((item) => {
    
    
    console.log('item', item);
    return item.number > 2
})
console.log('res111', res);//[{name: "王五",number: 3}]
console.log('list111', list);
//  [{name: "张三",number: 1,}, {name: "李四",number: 2,}, {name: "王五",number: 3,}, ]

4.8 concat()

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而是返回一个新的数组。

array1.concat(array2, array3,…, arrayX)

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2)
array3 // ["a", "b", "c", "d", "e", "f"]
const array4 = array1.concat(array2,array3)
array4 //["a", "b", "c", "d", "e", "f", "a", "b", "c", "d", "e", "f"]

4.8 concat()

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
array3 //["a", "b", "c", "d", "e", "f"]
const array4 = array1.concat(array2, array3);
array4 // ["a", "b", "c", "d", "e", "f", "a", "b", "c", "d", "e", "f"]

vue全家桶（一）基础知识

vue全家桶（一）

1.vue基本使用

2.vue模板语法

1.差值表达式

2.指令

1.什么是指令

2.数据绑定指令

3.双向数据绑定

4.事件绑定

4.1@click

4.2事件修饰符

4.3按键修饰符

4.4属性绑定

4.5-指令v-model的本质

4.6 样式绑定

4.6.1 class样式处理

4.6.2 style样式处理

4.7 分支循环结构

4.7.1.分支结构

4.7.2.v-if和v-show的区别

4.7.3.循环结构

5.vue常用特性

5.1自定义指令

5.2计算属性

1.计算属性与方法的区别

5.3侦听器

5.4watch和computed的区别

5.5过滤器

5.6生命周期

6.数组相关的api

1.变异方法（修改原有数据）

4.1 push

4.2 unshift

4.3 pop()

4.4 shift()

4.5 splice()

1.一个参数

2.两个参数

3. 3 或 3 个以上参数

4.6 sort()

4.6 reverse()

2.替换数组（生成新的数组）

4.7 filter()

4.8 concat()

4.8 concat()

猜你喜欢