Vue的模板語法（條件判斷、顯示列表）、組件嵌套

我們在上文的基礎上，繼續學習

條件判斷：v-if、v-show

>作用：用於控制元素的顯示

> 區別：

v-if:不渲染DOM，前端頁面看不到標簽，更節省性能（常用）
v-show:渲染DOM。將元素設置為display：none

我們看如下代碼，將他們都取值為true時，表示顯示

<template>
  <div id="app">
    <h1 v-if="true">你好，小藝</h1>
    <button v-show="true">請登錄</button>
  </div>
</template>

我們將取值設置為false就能看到他們的區別

<template>
  <div id="app">
    <h1 v-if="false">你好，小藝</h1>
    <button v-show="false">請登錄</button>
  </div>
</template>

可以看到 v-if的元素，標簽已經不在了，而v-show只改變了元素的css樣式

該語法一般我們用於登錄、註銷按鈕的顯示判斷
如：登錄後顯示用戶名，沒登錄顯示登錄按鈕

<template>
  <div id="app">
    <h1 v-if="isLogin">你好，小藝</h1>
    <button v-if="!isLogin">請登錄</button>
  </div>
</template>

<script>
export default {
  data() {
    return{
      isLogin:true
    }
  }
}
</script>

呈現的頁面：

顯示列表（v-for）

>格式：<li v-for="(item,index) of array" :key="index" >

key屬性的作用：確保列表的唯一性，將index值綁定要key屬性上

如我們data中有一個數組變數
fruits:["香蕉","蘋果","西瓜"]
我們想遍歷到頁面中顯示，就要將v-for放在要重覆的標簽中

<template>
  <div id="app">
    <ul>
      <li v-for="(fruit,index) of fruits" :key="index">
        <p>水果名稱：{{fruit}}</p>
        <p>水果序號：{{index}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return{
      fruits:["香蕉","蘋果","西瓜"]
    }
  }
}
</script>

呈現效果：

我們實際開發中，顯示的數據可能複雜一些，我們以學生信息表格為例，顯示在一個table標簽中：

我們需要重覆的是每一行，所以就在行內v-for，在具體的單元格裡面顯示遍歷的項目

<template>
  <div id="app">
    <table>
      <thead>
        <th>序號</th>
        <th>姓名</th>
        <th>年齡</th>
      </thead>
      <tbody>
        <tr v-for="(item,index) of student" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td> 
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return{
      student:[
        {name:"小曹",age:17},
        {name:"小曾",age:18},
        {name:"小力",age:19}
      ]
    }
  }
}
</script>

顯示效果：

組件嵌套

當前，我們都是寫在App.vue這個組件中。實際開發大型項目時，都是多頁面的，有許許多多的組件。
我們一般將自定義的組件都寫在 "components" 裡面

>組件命名規則

大寫字母，駝峰命名
小寫開頭，並且全是小寫可能會和本來的html標簽產生衝突

>引入外部組件

例如我們想將"components"中的組件引入到 "app.vue"中

• 首先我們已經在components中創建好了自定義組件(最好使用多個單詞，不然會報錯)
• 在app.vue中引入組件,並註冊組件

• 在script標簽中引入：import hello from "./components/HelloComp.Vue"
• 然後在export default中註冊：components : { HelloComp:HelloComp }
• 在ES6中，屬性名和屬性值相同時，可以只寫一個單詞，
  即components : { HelloComp }

• 引入並註入完成後，我們直接在上面的template標簽中使用
  <HelloComp></HelloComp>
• 由於駝峰命名法的規則，其實我們可以使用-分隔，也可以不區分大小寫，以下都可以
  <Hello-Comp></Hello-Comp>
<hello-comp></hello-comp>

下麵演示一段完整代碼：

HelloComp.vue (自定義組件)

<template>
  <div>
    <h1>I am hello components</h1>
  </div>
</template>
<script>
export default {
  data() {
  }
}
</script>
<style>
</style>

App.vue

<template>
  <div id="app">
   <hello-comp></hello-comp>
  </div>
</template>
<script>
import HelloComp from "@/components/HelloComp.vue"
export default {
  components:{
  HelloComp
  },
}
<style>
</style>

展示效果：

下一文，我們講組件傳值（同級組件、父子組件）