Vue單文件組件怎么用

小編給大家分享一下Vue單文件組件怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在很多 vue項(xiàng)目中，我們使用 vue.component 來定義全局組件，緊接著用 new vue(el: ”)在每個(gè)頁面內(nèi)指定一個(gè)容器元素

這種方式在很多中小規(guī)模的項(xiàng)目中運(yùn)作的很好，在這些項(xiàng)目里 JavaScript 只被用來加強(qiáng)特定的視圖。

但擋在更復(fù)雜的項(xiàng)目中，或者你的前端完全由 javascript 驅(qū)動的時(shí)候，下面這些缺點(diǎn)將變得非常明顯：

1. 全局定義 （global definitions）強(qiáng)制要求每個(gè) component 中的命名不能重復(fù)

2. 字符串模板 (string templates)缺乏語法高亮，在 html 有多行的時(shí)候，需要用到丑陋的 \

3. 不支持 CSS （no css support）意味著當(dāng) html 和 javascript 組件化時(shí)，css 明顯被遺漏

4. 沒有構(gòu)建步驟 ( no build step)限制只能使用 html和 es5 javascript ，而不能使用預(yù)處理器，如 pug(formerly jade)和 babel
   

文件擴(kuò)展名為 .vue 的 sigle-file components(單文件組件）為以上所有問題提供了解決方法，并且還可以使用 webpack 或 browserify 等構(gòu)建工具

這是一個(gè)文件名為 hello.vue的簡單實(shí)例

<template>

  <p> {{ gretting}} world! </p>
</template>


<script>
  module.exports = {
    data: function(){
      return {
        greeting: 'hello'
      }
    }
  }
</script>

<style scoped>
p {
  font-size: 2em;
  text-algin: center
}

</style>

現(xiàn)在我們獲得：

• 完整語法高亮

• commonJs 模板

• 組件化的 css

正如我們說過的，我們可以使用預(yù)處理器來構(gòu)建簡潔和功能更豐富的組件，比如 pug,babel,和 stylus

<template lang="jade">
  div
    p {{greeting}} world!
    other-component 
</template>

<script>
  import default{
    data(){
      return{
        greeting:'hello'
      }
    },
    components: {
      OtherComponent
    }
  }
</script>

<style lang='stylus' scoped>
  p
   font-size: 2em;
   text-align: center  
</style>

這些特定的語言只是例子，你可以只是簡單地使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何能夠幫助你提高生產(chǎn)力的預(yù)處理器。如果搭配 vue-loader 使用 Webpack，它也是把 CSS Modules 當(dāng)作第一公民來對待的。

怎么看待關(guān)注點(diǎn)分離？

一個(gè)重要的事情值得注意，關(guān)注點(diǎn)分離不等于文件類型分離。

在現(xiàn)代 UI 開發(fā)中，我們已經(jīng)發(fā)現(xiàn)相比于把代碼庫分離成三個(gè)大的層次并將其相互交織起來，把它們劃分為松散耦合的組件再將其組合起來更合理一些。

在一個(gè)組件里，其模板、邏輯和樣式是內(nèi)部耦合的，并且把他們搭配在一起實(shí)際上使得組件更加內(nèi)聚且更可維護(hù)。
即便你不喜歡單文件組件，你仍然可以把 JavaScript、CSS 分離成獨(dú)立的文件然后做到熱重載和預(yù)編譯。

<!-- my-component.vue -->
<template>
 <div>This will be pre-compiled</div>
</template>

<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

以上是“Vue單文件組件怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！