Vue的学习--遇到的一些问题和解决方法

包括：

1、Missing space before function parentheses

2、如何给.vue文件的页面添加css

3、如何给.vue文件页面里的元素添加监听器

4、如何为每一个页面引入js文件和css文件

5、如何去掉127.0.0.1:8080/#/中的‘#’

6、如何与后台进行数据交互anxios

 

1、Missing space before function parentheses

　　一开始全选默认配置，当你开始写代码的时候就会被这个错误弄得一头雾水，因为它默认eslint选择true，即规范js代码，出现不规范的情况就会报错，我也没有弄清楚这个js的规范是什么，有点像python连空格换行注释方式都有规范。但感觉不影响开发，一开始在创建时

　　Use ESLint to lint your code? (Y/n) 这一步选no

　　或者更改项目的配置文件config/index.js里更改这一个值，并重新运行项目。

useEslint: false,//不使用js规范

2、如何给.vue文件的页面添加css

<template>
  <div class="hello">
    ……
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
<!--里面写的样式只作用于组件，不会影响其他组件如（App.vue）的同名元素-->
<style scoped>

</style>
<!--当访问这个页面的时候-->
<style>
html{
    background:black;/*整个index.html的html背景设为黑色*/
}
</style>

 

3、如何给.vue文件页面里的元素添加监听器

方法一：规范点的写法

<template>
  <div class="hello">
    ……
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
        data:[]
    }
  },
   mounted(){//****在这里绑定监听器
        document.getElementById('xx').addEventListener('click',function(){
    
        });
        this.getPagedata();
   },
   methods:{
    getPagedata() {
    },
    
  }
}
</script>

<style scoped>

</style>

 

方法二：不规范的写法，我记得我这样写过也能用。

<template>
  <div class="hello">
    ……
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
window.οnlοad=function(){
    document.getElementById('xx').addEventListener('click',function(){
    
    });
}
<style scoped>

</style>

 

4、如何为每一个页面引入js文件和css文件

<template>
  <div class="hello">
    ……
  </div>
</template>

<script>
import '../static/home/js/js.css';/*引入js文件*/
export default {
  name: 'HelloWorld',
  data () {
    return {
        data:[]
    }
  },
   mounted(){//****在这里绑定监听器
        document.getElementById('xx').addEventListener('click',function(){
    
        });
        this.getPagedata();
   },
   methods:{
    getPagedata() {
    },
    
  }
}
</script>

<style scoped>
    @import '../static/home/css/cube.css';/*引入css文件*/
</style>

 

5、如何去掉127.0.0.1:8080/#/中的‘#’

　　vue-cli创建的是单页应用，所有的网页操作都是基于index.html，所以事实上并没进行过页面跳转。如果之前写前端你遇到过'#'，就会大概明白为什么网址上总会带‘#’了，当然，你觉得不美观想去掉也有办法，不是很麻烦。在router\index.js中进行更改。如果发现报了Missing space before function parentheses的错误，参考第一条，并重新运行项目

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  mode:'history',/*去掉'#'*/
  routes: [
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

 

6、如何与后台进行数据交互anxios

 

参考：https://blog.csdn.net/gongxunqiang005/article/details/78953533

转载于:https://www.cnblogs.com/liwxmyself/p/10346007.html