延續上一篇的templete內容

會想到要補充這段是因為朋友前陣子有問到XD

上一篇用到的template：

<template>
  <div>
    chat
  </div>
</template>

template內容就是包覆一段html，而且限制裡面的第一層只能有一個tag也就是說以下這段是不合法的，會直接死給你看唷^.<

<template>
  <div>
    chat
  </div>
  <h2>ABC</h2>
</template>

所以說無論你想要寫多少東西，最外都只能有一層，不一定要是div，任何真實的tag都可以。

<template>
  <div>
    <h2>ABC</h2>
    <div>
        <ul></ul>
        ......
    </div>
    chat
    ......隨便你加，有兩百個兄弟姊妹層，或兩千個子孫層級都沒人管你
  </div>
</template>

所謂真實的tag就是說，會被渲然到html上的tag，比如說div、span、h1這些大家所熟悉的會被渲染，不會被渲染的像是template，vue裡面會用這個元素去包一些需要判斷或是重複的東西，例如：

<template>
  <div>
    <h2 v-if="test==='show'">test等於show的時候出現</h2>
    <span v-if="test==='show'">我也是test等於show的時候出現</span>
  </div>
</template>

上面的h2跟span都會判斷test==='show'的時候才顯示，但這樣寫就要寫兩遍，在閱讀上不是很好看，那就可以利用template把兩個包在裡面，改寫成以下：

<template>
  <div>
    <template v-if="test==='show'">
        <h2>test等於show的時候出現</h2>
        <span>我也是test等於show的時候出現</span>
    </template>
  </div>
</template>

template最後不會被渲染在html上，h2跟span在判斷正確的狀態下，都會顯示出來

另外關於.vue檔

在建好nuxt後，pages > index.vue 這個檔案就有一個基本的頁面結構，大概像以下這段

<template>
  <div>
    chat
  </div>
</template>
<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  },
  data(){
    return {
      test: 'show' // 前面templete用的test參數判斷塞在這
    }
  }
}
</script>
<style>
...css
</style>

會把html、css、vue通通寫在同一支檔案，但在這種狀況下，內容只要寫得太長，之後在閱讀上也是有點小麻煩，所以說，他可以拆開成不同檔案來用

• index.vue只寫script的內容
• style.scss or .css
• template.html

在.vue中引入：

<script>
  export default {
    components: {
        Logo
      },
      data(){
        return {
          test: 'show' // 前面templete用的test參數判斷塞在這
        }
      }
  }
</script>

<template src="./template.html" />
<style lang="scss" src="./style.scss"></style>

但這個模式後來我覺得只有小專案比較適合，因為當檔案越來越多的時候，一定會迷失在找檔案的時候...，就算不拆成這樣，檔案一多也是很崩潰，找個檔案要挖超久Orz...