用vue寫的頁面后綴名怎么表示

本篇內(nèi)容主要講解“用vue寫的頁面后綴名怎么表示”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“用vue寫的頁面后綴名怎么表示”吧!

用vue寫的頁面后綴名是“.vue”。“.vue”文件是一個(gè)自定義的文件類型，用類HTML語法描述一個(gè)Vue組件；一個(gè)vue文件就是一個(gè)組件。vue頁面有3個(gè)組成部分：1、模板（template），即template標(biāo)簽包裹的界面展示代碼（HTML代碼）；2、script標(biāo)簽包裹的業(yè)務(wù)實(shí)現(xiàn)代碼（js腳本代碼）；3、style標(biāo)簽包裹的界面樣式代碼（css樣式代碼）。

用vue寫的頁面后綴名是“.vue”。

.vue 文件是一個(gè)自定義的文件類型，用類 HTML 語法描述一個(gè) Vue 組件。每個(gè) .vue 文件包含三種類型的頂級語言塊 <template>、<script> 和 <style>，還允許添加可選的自定義塊：

<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>

組件結(jié)構(gòu)講解

• 把每個(gè)組件都放到一個(gè)獨(dú)立的.vue文件里，

• 文件的后綴是：.vue 文件

• 此文件三大部分： template 、 script 、 style

• template

• 寫html結(jié)構(gòu)的

• 注意這里的html部分必須用一個(gè)標(biāo)簽全包住

• script

• 寫邏輯的，data、methods、生命周期鉤子、計(jì)算屬性等等代碼都寫在這個(gè)部分

• 注意這里的data不再是一個(gè)對象，在組件里，data將會是一個(gè)函數(shù),return一個(gè)對象。

• style

• 在css中的導(dǎo)入(主體使用)：

• 寫樣式的

• 如何 導(dǎo)入外部css,

  
  

   @import url(./babel.css);
  

  
  

• 快捷鍵快速生成： <vue>

• 單文件組件的運(yùn)行

  在cmd窗口該vue文件根目錄下輸入vue serve index.vue 這里index.vue是需要運(yùn)行的單文件組件的路徑

  
  

  vue serve index.vue
  

  
  

  注意點(diǎn)

• template里面的html部分必須用一個(gè)標(biāo)簽全包住

• 組件里沒有el，組件是無需掛載到哪的，里面已經(jīng)有template是它的使用的html了

• data在組件里面是一個(gè)function,return 一個(gè)對象

<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è)對象
  //data:function(){return {}}
  data() {
    return {
      msg: "hello"
    };
  },
  methods: {
    alertEvent(value) {
      alert(value);
    }
  },
  created() {
      //這里面語法檢測比較嚴(yán)格，直接寫console會報(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>

如何在組件中引入其它組件

如何在一個(gè)組件中引入其它組件,實(shí)現(xiàn)一個(gè)組裝。

組件的使用三步

• 1：導(dǎo)入組件

• import 自定義的一個(gè)組件名 from "組件路徑";

• 注意點(diǎn)，這里組件路徑就算是當(dāng)前同一目錄也最好加上"./組件名"，不然會報(bào)錯(cuò)

• 2：注冊組件

• 組件的使用是需要注冊的，注冊方式為：

  
  

  export default {
    components: {
      組件名,     //注冊的組件都寫在components對象下。
    }
  }
  

  
  

• 3：使用組件(寫到相應(yīng)html位置即可)

  
  

      <組件名></組件名>   //該組件名來自于在組件注冊時(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組件，這里是沒創(chuàng)建的
  import top from "./top.vue";
  import middle from "./middle.vue";
  import bottom from "./bottom.vue";
  
  export default {
    // 組件注冊
    components: {
      top, //相當(dāng)于top:top
      middle,
      bottom
    }
  };
  </script>
  <style>
  .main {
    width: 100%;
  }
  .main img {
    width: 100%;
  }
  </style>
  

  
  

組件中如何使用外部插件

以axios為例

使用外部插件分為三步

• 裝包（安裝外部插件）

  
  

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

  
  

• 導(dǎo)包（在單文件組件中導(dǎo)入外部插件）

  
  

  import axios from "axios"
  

  
  

• 用包（在相應(yīng)代碼位置使用）

  使用和以前一樣，該怎么用還是怎么用

  
  

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

  
  

  DEMO

  
  

  <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>
  

  
  

組件間的傳值

如果A組件中引入了B組件 ，這樣我們稱A組件為父組件，B為子組件

父組件傳值給子組件

• 在子組件標(biāo)簽上定義一個(gè)ref屬性

  
  

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

  
  

• 在需要給子組件傳值的地方寫入：

  
  

  this.$refs.xxx   //這就代表了子組件xxx的vue實(shí)例
  //這里xxx代碼標(biāo)簽中定義的ref屬性名這里就可訪問到子組件里面的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)包，注冊，使用
//1：導(dǎo)包
import axios from "axios";
import son from "./son.vue";
export default {
  data() {
    return {
      songs: [],
      localSong: ""
    };
  },
    //2：注冊
  components: {
    son
  },
  methods: {
    btnClick() {
      window.console.log("ref訪問：", this.$refs.son.$el);
      window.console.log("原生訪問:", document.getElementById("son"));
      //要調(diào)接口，是不是要使用axios
      //裝包，導(dǎo)包，用包
      axios({
        url:
          "https://autumnfish.cn/search?keywords=神話&_t=" + Math.random() * 100
      }).then(res => {
        //   父組件傳遞子組件值，在子組件上定義一個(gè)ref,通過this.$refs.名字，我們就能訪問子組件的實(shí)例，也就是可訪問子組件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>
// 子組件訪問父組件里的data與methods更簡單，只需要this.$parent就夠了
export default {
  data() {
    return {
      songs: []
    };
  },
  methods: {
    liCLick(name) {
      this.$parent.localSong = name;
      window.console.log("訪問父組件：", name, this.$parent);
    },
    alertEvent() {
      alert(123);
    }
  }
};
</script>
<style>
</style>

Vue-cli項(xiàng)目創(chuàng)建

直通車

什么是腳手架

• 腳手架就是個(gè)項(xiàng)目模板 ， 相當(dāng)于把整個(gè)文件基本目錄結(jié)構(gòu)搭好了，把必要的文件也建好 了，讓我們省了很多事情。

創(chuàng)建項(xiàng)目：

• 創(chuàng)建時(shí)路徑不要選錯(cuò)，就是命令的路徑要是需要?jiǎng)?chuàng)建項(xiàng)目的文件夾下

• 完美選擇不出錯(cuò)路徑方法：在文件夾相應(yīng)路徑下的地址欄輸入cmd ---再 回車

• 運(yùn)行創(chuàng)建命令

  
  

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

  
  

• 彈出的對話框先選擇默認(rèn)的選項(xiàng)（如下圖）

• 稍等一會，等進(jìn)度條走完 提示如下畫面說明成功了,如下圖：

• 進(jìn)入項(xiàng)目文件夾(就是項(xiàng)目名的文件夾)

• 
  

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

  
  

• 運(yùn)行項(xiàng)目(根目錄,readme同級目錄)

• 
  

  npm run serve
  

  
  

• 稍等片刻 ，出現(xiàn)如下效果說明成功了

Vue-cli項(xiàng)目結(jié)構(gòu)

項(xiàng)目結(jié)構(gòu)說明：

• node_modules 第三方模塊包，也就是項(xiàng)目所需要用到的依賴包

• public

• favicon.ico 運(yùn)行項(xiàng)目時(shí)在網(wǎng)頁上顯示 的小圖標(biāo)

• index.html 項(xiàng)目的頁面模板 ，也就是項(xiàng)目運(yùn)行最開始，是先執(zhí)行這個(gè)模板html的

• src 項(xiàng)目開發(fā)主體就是在這個(gè)src目錄下面

• assets 項(xiàng)目所需要的靜態(tài)資源，如css,圖片等文件

• components 項(xiàng)目中的單文件組件都放這里

• App.vue 入口組件 ，可以理解為一個(gè)項(xiàng)目就是一個(gè)app.vue的單文件組件，只不過里面包括了很多小組件

• main.js 入口js文件，進(jìn)入項(xiàng)目會優(yōu)先執(zhí)行main.js以此來運(yùn)行app.vue

• .gitignore 讓git忽略某些文件，文件夾

• babel.config.js js編譯的設(shè)置，比如把高版本的js轉(zhuǎn)為低版本的js,讓項(xiàng)目達(dá)到更好兼容性

• package-lock.json 項(xiàng)目模塊詳細(xì)信息，包括來源。

• package.json 項(xiàng)目基本信息

• README.md 項(xiàng)目說明

Vue-cli 入口文件main.js分析

• main.js中

  最后我們看到的整個(gè)網(wǎng)站其實(shí)就是App.vue

• 創(chuàng)建了最外層的Vue實(shí)例

• 把App.vue這個(gè)組件，當(dāng)做Vue實(shí)例內(nèi)部的最頂級組件并渲染到index.html上去

到此，相信大家對“用vue寫的頁面后綴名怎么表示”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！