Vue2.x 使用过程中常见问题

this.arr[index] = value;
this.$set(this.arr, index, this.arr[index]); // vue监听不到数组内的元素的值的变化，要手动通知触发,　或者用compute来得出新的view数组进行处理，或者使用watch来监听变化重新进行更新

this.$set(this.jsonObj, 'myKey', myValue); // 针对jsonObj

      this.arr[i] = null // 可以把元素设为null，使用时用compute进行过滤即可
      this.$set(this.arr, i, this.arr[i])
      // this.arr.splice(i, 1)  // 此方法有可能会导致视图更新错误

this.$router.go(-1) // 后退 类似 window.history.go(n)

// 字符串
router.push('/home')
 
// 对象
router.push({ path: '/home' })
 
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
 
// 带查询参数，变成 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' }})

this.$router.replace({ // 替换，但history不会记录一条新的记录
    path: '/mypath',
    query: {m: 'model'},
  })

路径：http://localhost:8081/#/test?name=1
<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数)

路径：http://localhost:8081/#/test/1
<router-link :to="'/test/'+id">跳转</router-link>(id是参数)

this.$route.params.id

this.$route.query.id

  watch: {
    obj: {
      handler: function (v, o) {
      },
      deep: true
    }
  }

<template>
  <article class="pageview">
    {{msg}}
  </article>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
export default {
  name: 'Home',
  mixins: [],
  components: {
  },
  data () {
    return {
      msg: 'Home',
    }
  },
  beforeCreate () {
  },
  created () {
  },
  mounted () {
  },
  beforeUpdate () {
  },
  updated () {
  },
  beforeDestroy () {
  },
  destroyed () {
  },
  methods: {
  },
  computed: {
  },
  filters: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style

router.beforeEach((to, from, next) => { 
  if (to.meta.title) {
    document.title = to.meta.title // 动态设置meta或者可以进行其他路由前的操作
  }
  NProgress.start() // NProgress进度条开始
  next()
})

router.afterEach((transition) => {
  NProgress.done() // NProgress进度条结束
})

axios.interceptors.request.use((headerConfig)=> {
    // 这里，发送请求之前可以设置request header
    return config
  },
  (error) => {
    // 请求错误处理
    return Promise.reject(error)
  })

// 添加响应拦截器
axios.interceptors.response.use((response) => {
  let {data} = response
  // 这里，请求完成后可以对数据进行拦截处理
  return data
}, (error) => {
  // 响应错误处理
  return Promise.reject(error)
})    

        proxyTable: {
         '**': {
            target: 'https://www.xxxx.com', // 要设置需跨域访问的接口的baseUrl，dev/qa/production
            changeOrigin: true,
            filter: function(pathname, req) {
              const isApiDev = pathname.indexOf('/api-dev/') == 0; 
              const isApiTest = pathname.indexOf('/api-qa/') == 0; 
              const isApiProduction = pathname.indexOf('/api-production/') == 0; 
              return isApiDev||isApiTest||isApiProduction ;
            }
          }
        }

    proxyTable: {
        '/api/resource': {
          target: 'https://xxx.xxx.xxx.xxx:7070',
          changeOrigin: true,
          secure: false,
          pathRewrite: {
            '^/api/resource'': '/resource'
          }
        },
    },

<template>
  <div id="app">
    <el-input v-model="text" class="text-box"></el-input>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      text: 'hello'
    };
  }
};
</script>

<style lang="less" scoped>
.text-box { // 样式可以作用于el-input 组件
  /deep/ input {
    width: 166px;
    text-align: center;
  }
}
</style>

import router from './router'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css' // Progress 进度条样式

NProgress.inc(0.2)
NProgress.configure({
  easing: 'ease',
  speed: 500,
  showSpinner: false
})
router.beforeEach((to, from, next) => {
  const isLogin = false // 是否登录
  const isVip= false // 是否VIP会员
  NProgress.start()
  if (isLogin && isVip) {
    if (to.path.indexOf('/login') !== -1 || to.path.indexOf('/order-vip') !== -1) {
      next('/home')
      NProgress.done() 
    } else {
      if (to.meta.title) {
        document.title = to.meta.title
      }
      next()
    }
  } else if (isLogin && !isVip) {
    if (to.path.indexOf('/login') !== -1 || to.path.indexOf('/home') !== -1) {
      next('/order-vip')
      NProgress.done() 
    } else {
      if (to.meta.title) {
        document.title = to.meta.title
      }
      next()
    }
  } else {
    if (to.path.indexOf('/login') !== -1) {
      if (to.meta.title) {
        document.title = to.meta.title
      }
      next()
    } else {
      next('/login') // 否则全部重定向到登录页
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done() // 结束Progress
})

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '', // 修改这里由“/”改为“./”或者“”

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../' // 增加相对路径，主要是针对css背景图
      })

/**
 * 全局变量定义
 *
 */
global.USER_ID = null
global.USER_NAME = null 
global.USER_MOBILE = null

import axios from 'axios'
import {
  Toast,
  MessageBox,
  Indicator,
  DatetimePicker
} from 'mint-ui'

Vue.use(DatetimePicker)

Vue.prototype.SUCCESS_CODE = 0
Vue.prototype.$toast = Toast
Vue.prototype.$messagebox = MessageBox
Vue.prototype.$indicator = Indicator
Vue.prototype.axios = axios

import 'babel-polyfill'

background: url(https://www.xxx.com/xxx.jpg) center center / 100% 100% no-repeat;

// 服务端代码
app.get('/xxxx.js', (req, res) => {
  res.setHeader('Cache-Control', 'max-age=3600')
  // ...其他输出
})

watch: {
  '$route' (to, from) {
      // 针对变化进行相应的处理
  }
}

Node Sass could not find a binding for your current environment
This usually happens because your environment has changed since running `npm install`
Run `npm rebuild node-sass` to build the binding for your current environment

npm install --save babel-polyfill

import 'babel-polyfill' // 或者require('babel-polyfill')

            <my-component
                ref="myComponent"
            />

this.$refs.myComponent.fn() // 比如组件上有fn这个内置方法，直接调用

router.beforeEach((to, from, next) => {
    // 所有if else条件都必需提供next路由出口，不然会出现死询环（不停加载）或者路由失败（白屏的情况）
})

max-width: 10rem; /* 750px; */

axios({
            url: '/api',
            method: 'post',
            data: {
              param1:param1,
              param2:param2
            },
            transformRequest: [function (data) {
              let ret = ''
              for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
              }
              return ret
            }],
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          })

<div v-html="message">{{message}}</div>

export default {
  data () {
    return {
      message: "<h2>这里可以包含html标签<h2>"
    }
  }
}

  methods: {
    handleClick () {
      setTimeout(() => {
        this.$router.go(-1) // 或者其他关闭对话框事件等等
      }, 0)
    }
  }

let myUrl = './static/js/a.js' // build出来后是 相对于http://xxx/xx/index.html的，结果为 http://xxx/xx/static/js/a.js

// 如果要使用一张图片，可以先把img import进来再画到canvas上，
import myImg from '../../assets/my-img.png'
// ...
export default {
// ...
  data () {
    return {
      myImg: myImg
    }
  },
// ...
}

/* 解决element-ui的table表格控件表头与内容列不对齐问题 */
/deep/ .el-table th.gutter {
  display: table-cell !important;
}

// blob二进制方式
axios({
        method: 'post',
        url: '/api/exportExcel',
        headers: {
          'Content-Type': 'application/json'
        },
        data: {
          token: 'xxxx',
        }
      }).then((res) => {
        // console.log(res)
        const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }) // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = 'xxxx.xlsx' // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
      }).catch((error) => {
        console.log(error.message)
      })

<template> 
  <div>
    <label><input type="checkbox" :checked="value" @click="change" /> 勾选我吧</label>
  </div>
</template>
<script>
export default {
  data() {
  },
  model:{
    prop:'value', 
    event:'valueChange' 
  },
  props:{
    value: Number
  },
  methods:{
    change(e) { 
      let number = 0
      if(e.target.checked) { 
          number = 1
      }
      this.$emit('valueChange', number)
    }
  }
}

</script>