个性化阅读
专注于IT技术分析

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>
赞(0) 打赏
未经允许不得转载:srcmini » VueJS开发10个常见知识点整理和问题解析合集
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏