Vue的學習--遇到的一些問題和解決方法（一）

時間 2019-11-20

標籤 vue 學習遇到一些問題解決方法简体版

原文原文鏈接

包括：css

一、Missing space before function parentheseshtml

二、如何給.vue文件的頁面添加css前端

三、如何給.vue文件頁面裏的元素添加監聽器vue

四、如何爲每個頁面引入css文件python

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

六、如何與後臺進行數據交互anxiosios

七、如何爲.vue引入自定義js文件vue-router

八、如何爲所有界面引入如：jquery等jsvue-cli

一、Missing space before function parentheseside

　　一開始全選默認配置，當你開始寫代碼的時候就會被這個錯誤弄得一頭霧水，由於它默認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")
      }
    }

  }