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

包括：

一、Missing space before function parentheses

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

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

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

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

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

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

八、如何为所有界面引入如：jquery等js

 

一、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规范

二、如何给.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>

 

三、如何给.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>

 

四、如何为每个页面引入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>

 

五、如何去掉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
    }
  ]
})

 

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

七、如何为.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")
      }
    }

  }

View Code

 

八、如何为所有界面引入如：jquery等js

http://www.javashuo.com/article/p-gxklajow-hv.html

 

 

 

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