<template>  <div class="example">{{ msg }}</div></template><script>export default {  data () {    return {      msg: "Hello world!"    }  }}</script><style>.example {  color: red;}</style><custom1>  This could be e.g. documentation for the component.</custom1>

@import url(./babel.css);

vue serve index.vue

<template>  <!-- 組件html區(qū)域   在組件里面的html都必須有一個(gè)獨(dú)立的標(biāo)簽包住所有標(biāo)簽  -->  <div>    <button>按鈕</button>    <button>{{msg}}</button>  </div></template><script>export default {  // 不再需要el去確定使用范圍  // 組件 里面的data將是一個(gè)函數(shù) return一個(gè)對(duì)象  //data:function(){return {}}  data() {    return {      msg: "hello"    };  },  methods: {    alertEvent(value) {      alert(value);    }  },  created() {      //這里面語(yǔ)法檢測(cè)比較嚴(yán)格，直接寫(xiě)console會(huì)報(bào)錯(cuò)    window.console.log(this);    // this.alertEvent(123);  }};</script><style>/* 如果需要引入 外部css 在css中的導(dǎo)入： @import url(./babel.css); 在js中的導(dǎo)入 import "./babel.css"*//* @import url(./babel.css); */@import "./babel.css";button {  width: 100px;}</style>

export default {  components: {    組件名,     //注冊(cè)的組件都寫(xiě)在components對(duì)象下。  }}

<組件名></組件名>   //該組件名來(lái)自于在組件注冊(cè)時(shí)的組件名

<template>  <div class="main">    <!-- 使用組件  -->    <!-- 在這index.vue是父組件，top，middle，bottom是子組件 -->    <!-- top與middle是兄弟組件 -->    <top></top>    <middle></middle>    <bottom></bottom>  </div></template><script>// 導(dǎo)入組件  這里面top,middle,bottom是需要另外創(chuàng)建的vue組件，這里是沒(méi)創(chuàng)建的import top from "./top.vue";import middle from "./middle.vue";import bottom from "./bottom.vue";export default {  // 組件注冊(cè)  components: {    top, //相當(dāng)于top:top    middle,    bottom  }};</script><style>.main {  width: 100%;}.main img {  width: 100%;}</style>

npm i axios //到相應(yīng)目錄下執(zhí)行該命令

import axios from "axios"

axios({url:"xxx"}).then(res=>{})

<template>  <div>    <input type="text" v-model="searchValue" />    <button @click="getMusic">點(diǎn)我</button>    <ul>      <li v-for="(item, index) in songs" :key="index">{{item.name}}</li>    </ul>  </div></template><script>// 使用axios   1:安裝axios，npm i axios   2:導(dǎo)包  import axios from "axios"  3:使用// 導(dǎo)包import axios from "axios";export default {  data() {    return {      searchValue: "", //input框的值      songs: []    };  },  methods: {    getMusic() {      // 使用，以前怎么用，現(xiàn)在還怎么用      axios({        url: "https://autumnfish.cn/search?keywords=" + this.searchValue,        method: "get"      }).then(res => {        this.songs = res.data.result.songs;        window.console.log(this.songs);      });    }  }};</script><style></style>

<組件名 ref="xxx"></組件名>

this.$refs.xxx   //這就代表了子組件xxx的vue實(shí)例//這里xxx代碼標(biāo)簽中定義的ref屬性名這里就可訪(fǎng)問(wèn)到子組件里面的data屬性與methods方法//如要修改子組件里面data里的某個(gè)值：          this.$refs.xxx.子組件里data屬性名//如果需要調(diào)用子組件里面methods里某個(gè)方法：   this.$refs.xxx.子組件里面methods里方法名

this.$parent    //這就代表父組件的vue實(shí)例    //如要修改父組件里面data里的某個(gè)值：         this.$parent.父組件里data屬性名    //如果需要調(diào)用父組件里面methods里某個(gè)方法：   this.$parent.父組件里面methods里方法名

//兩個(gè)組件，這個(gè)是father.vue<template>  <div>    <button @click="btnClick">點(diǎn)我獲取數(shù)據(jù)</button>    <div>你選中的當(dāng)前歌曲:{{localSong}}</div>    <son ref="son" id="son"></son>  </div></template><script>// 組件使用，導(dǎo)包，注冊(cè)，使用//1：導(dǎo)包import axios from "axios";import son from "./son.vue";export default {  data() {    return {      songs: [],      localSong: ""    };  },    //2：注冊(cè)  components: {    son  },  methods: {    btnClick() {      window.console.log("ref訪(fǎng)問(wèn)：", this.$refs.son.$el);      window.console.log("原生訪(fǎng)問(wèn):", document.getElementById("son"));      //要調(diào)接口，是不是要使用axios      //裝包，導(dǎo)包，用包      axios({        url:          "https://autumnfish.cn/search?keywords=神話(huà)&_t=" + Math.random() * 100      }).then(res => {        //   父組件傳遞子組件值，在子組件上定義一個(gè)ref,通過(guò)this.$refs.名字，我們就能訪(fǎng)問(wèn)子組件的實(shí)例，也就是可訪(fǎng)問(wèn)子組件data屬性與methods方法        this.$refs.son.songs = res.data.result.songs;        this.$refs.son.alertEvent();        window.console.log(res.data.result.songs);      });    }  }};</script><style></style>//son.vue<template>  <ul>    <li v-for="(item, index) in songs" :key="index" @click="liCLick(item.name)">{{item.name}}</li>  </ul></template><script>// 子組件訪(fǎng)問(wèn)父組件里的data與methods更簡(jiǎn)單，只需要this.$parent就夠了export default {  data() {    return {      songs: []    };  },  methods: {    liCLick(name) {      this.$parent.localSong = name;      window.console.log("訪(fǎng)問(wèn)父組件：", name, this.$parent);    },    alertEvent() {      alert(123);    }  }};</script><style></style>

vue create 項(xiàng)目名      //這里項(xiàng)目名不要有中文，不要有大寫(xiě)字母，不要搞特殊符號(hào)，盡可能有意義 ，像普通變量命名一樣

cd 項(xiàng)目名 直接根據(jù)提示即可

npm run serve