Vue使用中的小技巧与坑

使用vue有一段时间了，总结一下平时遇到的问题和使用的技巧，不一定是最优方案，欢迎大家提供意见指导补充

函数传参指定改变data里的变量值，这样把变量名传入到函数里面可以自由改变指定变量的值

data(){
    return{
        test : "bbb"
    }
}
function attrName(arrt){
    this[attr] = 'aaa';
}
attrName('test')

className做运算，{}里做运算，逗号分隔classname

:class="[{'line-last': index % 2 !==0}, 'index-board-' + item.id]"

属性需要字符串拼接变量用’+'号拼接

<router-link :to="'/newsDetail?id=' + item.id">

改变数组的值在模板中渲染无效
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
举个例子：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用 splice：

vm.items.splice(newLength)

每个页面独立背景图
一开始在app.vue里设置公共的背景颜色
然后每个页面templete里面增加一个背景div，有几个需要注意的场景
1.如果style为私有，在里面重置背景图，测试环境下可以，但打包出来后失败
2.如果style为公用，则覆盖成功（猜测未实行）

<template>
  <div class="bg">
</div>
</template>
<style scoped>
  .bg{
    height: 100vh;
    background: url("../assets/images/bg_circle.png") no-repeat 50% 5rem;
    background-size: cover;
  }

3.给需要特别设置的页面中添加className

mounted(){
  document.getElementsByTagName("body")[0].className="bg";
},
destroyed() {
  document.body.removeAttribute("class","bg");
}

css测试环境下起效，打包后不起效

使用的了框架css，并且是在main.js引入的，这个时候如果你在vue页面中用不同的class样式重写/覆盖原样式，将会失效，如bootstrap中的button，自身已有一个’btn’ className的情况下，'button-gradient’重写’btn’中已有的样式会失效

<b-button  class="button-gradient" variant="primary" @click="govote">开始投票</b-button>

解决方法：

1. 在css加important

.button-gradient{
	border:2px solid #ccc !important;
}

2. App、个人样式文件放在插件库之后引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import router from './router'

import $ from 'jquery'
import 'swiper/css/swiper.min.css'
import 'bootstrap/dist/js/bootstrap.min'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'animate.css';

import "vue-image-lightbox/dist/vue-image-lightbox.min.js"
import "vue-image-lightbox/dist/vue-image-lightbox.min.css"
import VueLazyload from "vue-lazyload";  //懒加载

import "./assets/css/style.css"
import App from './App'

vue 遮罩层阻止禁止默认滚动事件

<div class="dialog" @touchmove.prevent ></div>

假设需要里面的子元素可以滚动，添加冒泡事件

<main class="padPublic" id="ListMenu" @touchmove.stop></main>