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

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页面闪烁问题【VueJS开发10个常见知识点整理和问题解析合集】可以在CSS中使用VueJS的指令v-cloak，这个指令可以保持在元素上直到编译结束，这样就不会闪烁了：