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，所以事实上并没进行过页面跳转。如果之前写前端你遇到过'#'，就会大概明白为什么网址上总会带‘#’了，当然，你觉得不美观想去掉也有办法，不是很麻烦。在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 } ] })
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
