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

    }

  ]

})

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

巴特西

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

最新文章

热门文章