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

包括：

1、Missing space before function parentheses

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

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

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

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

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

7、如何为.vue引入自定义js文件

8、如何为全部界面引入如：jquery等js

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.onload=function(){
    document.getElementById('xx').addEventListener('click',function(){
    
    });
}
<style scoped>

</style>

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

<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>
    @import '../static/home/css/cube.css';/*引入css文件*/
</style>

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

　　vue-cli创建的是单页应用，所有的网页操作都是基于index.html，所以事实上并没进行过页面跳转。如果之前写前端你遇到过'#'，就会大概明白为什么网址上总会带‘#’了，当然，你觉得不美观想去掉也有办法，不是很麻烦。在routerindex.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

7、如何为.vue引入自定义js文件

　　自己写的js文件函数如果要在某个.vue模块中使用，需要在js文件中抛出，再在使用该j函数的模块中导入，如

　　js文件中：

function showit () {
  alert('ok')
}
export {
  showit
}

在.vue文件中：

import {showit} from '../static/home/home'
  export default {
    name: 'Home',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted(){//****在这里绑定监听器
      $('.home').on('click',showit)
      //this.getPagedata();
    },
    methods: {
      getPagedata () {
        alert("ssss")
      }
    }

  }

8、如何为全部界面引入如：jquery等js

https://www.cnblogs.com/eyed/p/7850946.html

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