学习vue中的一些问题及解决方案一

1.vue报错Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 原因及解决办法：vue模板只支持一个元素，不能并列包含两个及以上。一个组件渲染过程中包含了另外一个组件，如果需要，需要在外面套一层比如div即可。如下图

去掉外层的div就会报错了，加上就正常。

2.vue中引入jquery方式，步骤如下：第一步：在package.json中加入

dependencies:{
 "jquery" : "^2.2.3"
}

然后在命令行中执行npm install,安装jquery 第二步：在webpack.base.conf.js里加入

var webpack = require("webpack")

第三步：在module.exports的最后加入

plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery"
 })
]

第四步：在main.js中引入import $ from 'jquery'。第五步：重新进行编译执行 npm run dev 在项目中就可以使用了

3.vue中组件所引用的样式文件是以本身组件所在路径引用的，不是以最终调用组件的路径引用的，切记。当初因为这个问题搞了好久。
4.在父子组件传值的时候，子组件绑定img标签src值。示例：子组件接收值

<template>
    <img :src="getImage" />
</template>
<script>
export default {
  name:'myChart',
  props:['chartInfo'],
  computed:{
      getImage(){
        return require(`../assets/images/${this.chartInfo.chartImg}`)
      }
  }
}
</script>

5.vue data数据从本地json文件中获取。先安装axios

npm install --save axios vue-axios

在main.js文件中引入

import axios from 'axios'
Vue.prototype.$http = axios

之后在vue方法中就可以进行请求数据

var self = this;
this.$http.get(url).then(response => {
    console.log('数据加载成功');
}, response => {
    console.log('数据加载失败')
})

仅记录日常练习和项目中用到的一些问题