vue实用技巧整理（持续更新）

更新于：2021/3/29

数组过滤器--filter

filter()是一个数组方法，它会创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，且它不会对空数组进行检测，也不会改变原始数组。
在vue中的使用

    methods: {
        //筛选方法调用
        mySearch() {
             //这里调用方法时不能用括号调用
            this.arrShwo = this.arrList.filter(this.searchCondition);
        },
        // 筛选条件(将筛选逻辑写在这里)
        searchCondition(arr) {
              //arr是接收的参数，也就是调用函数的数组即 this.arrList
             return arr.keyWord == this.word;
        },
    },

vue组件中引入模拟数据

在开发过程中我们需要模拟后台请数据，这样会产生跨域请求问题，这里我们暂时不讲跨域。有时候我们会将模拟数据写在data中，这样就不会产生问题，相当于在js中定义了一个变量。那么问题来了，当我们的模拟数据很长的时候，写在组建里是不易阅读的，但有不想产生跨域问题，那么我们可以采取引用.js文件的方式来解决。
也就是说，在一个.js文件中定义一个变量，可以是数组，也可以是对象。再将它引入到组件内使用。
.js文件写法

export const test_data = [{
  name:'小明'，
  age:'18'
}]

组件内写法

//引入data.js文件
import {test_data} from '@/assets/js/data.js'
// 定义长量来代替.js文件内的数据使用
const dataList = {
    test_data
}

数据使用

console.log(dataList.test_data);

子组件引用父组件数据，并改变时，导致父组件数据发生改变

let son =  JSON.parse(JSON.stringify(father));

vux的简单使用

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        activeIndex:'/' 
    },
    mutations: {

    },
    actions: {

    }
})

组件内

this.$store.state.activeIndex = "/home"

v-bind 绑定属性

v-bind用于绑定html标签属性，可简写为:属性名，这里我们重点书一下class和style

:class

1.当使用v-bind绑定class时，如果标签原本就是class时，它并不会改变原本的class，而是会添加进去。
2.绑定或添加多个类名，可使用数组的方式，

可在data中定义classN的值,classIf是布尔类型，三元表达式，也可以使用 &&等逻辑表达式。
3.以对象形式绑定，当对象的value值为真时，则将对象的key值绑定在class上。对象可以写在数组里

如果用v-bind绑定多个class ,只会识别第一个。

:style

v-bind绑定style的方式和:class类似。

锚点跳转

 methods:{
    returnTop(){
      document.querySelector("#id").scrollIntoView(true); //id自己填
    }
  }

scrollIntoView()参数如果是true或为空，那么跳转到的div会在顶部显示。如果是false，则跳转的div会出现的视线内，不一定在顶部。这样写可达到效果，但无过度效果。
锚点跳转过度效果——scrollIntoView()参数详解：

{
  behavior: "auto" | "instant" | "smooth", 
  block: "start" | "center" | "end" | "nearest", 
  inline: "start" | "center" | "end" | "nearest",
}

behavior ：滚动方式，auto （默认）表示使用当前元素的 scroll-behavior 样式；instant表示 直接滚到底；smooth表示使用平滑滚动。
block： 块级元素排列方向要滚动到的位置（垂直方向），start 表示将视口的顶部和元素顶部对齐；center 表示将视口的中间和元素的中间对齐；end表示将视口的底部和元素底部对齐；nearest 表示就近对齐。
inline：行内元素排列方向要滚动到的位置（水平方向），值同上。
简单的过渡滚动

methods:{
    returnTop(){
      document.querySelector("#id").scrollIntoView({behavior:'smooth'}); //id自己填
    }
  }

请求本地图片

方法一（推荐）：
在生产环境下（无后台服务器支持），想要通过测试接口请本地图片，需要面临跨域问题，可通过配置vue.config.js文件来解决，但对很多小伙伴来说vue.config.js配置起来会感觉到有些麻烦，而且总会遇到意想不到的问题，现在就说一个不进行配置的方法：

方法二：
在当前组件内全局import图片，这种方法看上去很直接，但是当图片资源过多时，代码就会显得很乱

//引入图片
import img1 from './img/img1.png'
import img2 from './img/img2.png'
 //将图片转存
export default {
    data() {
        return {
            imgList:[
                {
                    id: 0,
                    imgUrl: img1
                },{
                    id: 1,
                    imgUrl: img2
                }
            ]
        }
    }
}
//在组件内使用