VueJS开发10个常见知识点整理和问题解析合集

1、VueJS解决跨域请求

VueJS解决跨域请求可在config/index.js中设置，如下：

module.exports = {
    dev: {
      proxyTable: {
        '/api': {
          target: 'http://www.xxxx.com', // 代理目标
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        }
      },
    }
  }

2、v-for的使用

v-for指令可用于遍历数组、对象和数字等，在遍历数组或对象时，可以这样做：

<ul>
  <li v-for='(item, key) in items' :key='key'> {{ key }} - {{ item }}
</ul>

遍历数字时要注意，value是从索引1开始的，key从0开始，如下：

<ul>
  <li v-for='(v, k) in 3' :key='k'> {{ k }}-{{ v }} 
  <!-- output to be 0-1, 1-2, 2-3 -->
</ul>

3、VueJS组件样式的scoped属性解析

有scoped属性表示，只有当前组件可以使用style样式，无scoped属性表示会影响其它组件样式。

4、解决IE9报vuex requires a Promise polyfill in this brower的问题

产生这个问题的原因是：低版本的IE不支持ES6中的异步消息Promise，解决办法如下：

（1）安装babel-polyfill

npm install --save-dev babel-polyfill

（2）在webpack/browserify/node中使用

可以在webpack.config.js中配置为：

module.exports = {
    entry: {
        app: ["babel-polyfill", "./src/main.js"]
    }
};

还可以使用require和import引入：

require("babel-polyfill");
import "babel-polyfill";

5、vue-router在渲染显示前执行一些事件

使用vue-router可以实现在渲染显示前，执行某些事件，实现方法如下代码：

export default{
    data(){
        return{
            selected:0,
            currentView:'view_0'
        }
    },
    methods:{
        choose(index) {
            this.selected=index;
            this.currentView='view_'+index;
        }
    },
    route:{
        data() {
            /*每次切换路由，在渲染出页面前都会执行*/
        }
    }
}

6、解决resetFields重置表单报错Cannot read property ‘resetFields’ of undefined”

新手很容易遇到这个问题，报错的原因是因为，刚开始点击按钮时，对象还没生成，所以需要提前判定一下，如下：

addClick:function(formName) {  
    let _self = this;  
    if (_self.$refs[formName] != undefined) {
        _self.$refs[formName].resetFields();
    }
    this.editFormVisible = true;  
}, 

7、Vue引用sass的方法

首先安装sass相关支持：

npm i sass sass-loader node-sass --save-dev

然后在style中加上lang=”scss” rel=”stylesheet/sass”，然后引入文件@import “path/to/scss”。

8、解决VueJS缓存问题的方法

方法一：先把服务器重的文件全部删除，再删除。

方法二：在build/webpack.prod.conf.js中设置：

const webpackConfig = merge(baseWebpackConfig, {
    output: {
      path: config.build.assetsRoot,
      filename: utils.assetsPath('js/[name].[hash].js'),
      chunkFilename: utils.assetsPath('js/[id].[hash].js')
    },
  })

9、Vue.js混入（mixins）的使用

混入mixins是一个对象，该对象包含一些方法或计算属性，组件可以使用混入对象，当使用混入对象时，混入对象成为组件本身的选项，使用实例如下：

// 定义一个混入对象
var myMixin = {
    created: function () {
        this.startmixin()
    },
    methods: {
        startmixin: function () {
            document.write("混入实例");
        }
    }
};
var Component = Vue.extend({
    mixins: [myMixin]
})

10、解决VueJS页面闪烁问题

可以在CSS中使用VueJS的指令v-cloak，这个指令可以保持在元素上直到编译结束，这样就不会闪烁了：

[v-cloak]{    
    display:none;
}

<div v-cloak>{{message}}</div>