# 指令觀念介紹 (2-1)
###### tags: `Vue` 、 `2. 指令語法全介紹`
2022.3.1

### 在{{}}使用程式語言 : 在大括號中可以直接使用Javascripe語言，例如:(ex:反轉文字、if判斷)

//-----------反轉文字-----------
{{ text }} //結果:大中天
{{ text.split('').reverse().join('') }} //結果:天中大，原理:先將字串分割成單一文字陣列，然後反轉陣列順序，最後從新結合文字。
//-----------------------------

//-----------if判斷-------------
 {{judge?是:否}}
//-----------------------------

<script>
data(){
    return {
        text:'大中天',
        judge : true,
    }
}
</script>

### v-pre : 不要選染Vue程式，例如在網頁上呈現{{}}

<div v-pre> {{}} </div>

### v-test、{{}} : 文字渲染

<span v-text="text"></span> //結果:這是一串文字
{{text}} //結果:這是一串文字

<script>
data(){
    return {
        text:'這是一串文字';
    }
}
</script>

### v-html :當在script中寫html，使用{{}}渲染無法呈現HTML語法，因此要使用此語法(盡量少用動態語法渲染HTML語法，因為容易被XSS攻擊)。

{{ html }}  //結果:<p>這是有使用HTML語法</p>
<div v-html="html"></div> //結果:這是有使用HTML語法

<script>
     data(){
            return{
                    html:'<p>這是有使用HTML語法</p>'
                  }
            }
</script>

### v-once : 當資料有套用雙向連結(v-model)時，資料被更改時文字呈現也會同步更改，因此使用v-once能讓渲染只有一次。

<input type="text" v-model="text">
<div>{{text}}</div>
<div v-once>{{text}}</div>

<script>
data(){
        return{
                text:'123'
              }
},
</script>

### v-if : 判斷

<!------------------ 單Boolean判斷 ---------------------->
<p v-if = "isFull">小明 飽了</p>
<p v-else>小明 還沒吃飽</p>
<!------------------------------------------------------>

<!------------------- 多條件判斷 ------------------------>
<div v-if ="link ==='小明'">小明吃早餐</div>
    <div v-else-if = "link ==='小美'">小美去百貨公司</div>
    <div v-else-if = "link === '杰倫'">杰倫去幫助人</div>
<!------------------------------------------------------>

<!-------------- v-for 與 v-if 混用 --------------------->
<template v-for="(item, key) in products"  v-bind:key="item.name">
    <li v-if = "item.price === 30">
        {{ item.name}} / {{ item.price }} 元
    </li>
</template>
<!------------------------------------------------------>

<!------------- v-if 與 v-show 差異 -------------------->
<p v-show="isFull">小明 飽了</p>  //如果isFull等於false，只會用display: none; 隱藏，可以在F12上看到程式碼
  <p v-if="isFull">小明 飽了</p> //如果isFull等於false，F12整個看不到
  <button type="button" v-on:click="change('isFull')">狀態切換</button>
<!------------------------------------------------------>

### v-for : 迴圈，迴圈可以呼喚(陣列、物件)，正確寫法一定要綁定key值。
* 陣列迴圈
* 物件迴圈
* 純數值迴圈
* <template>標籤使用在 v-for

<div id="app">
<!------------------ 陣列迴圈 ---------------------->
<ul>
    <li v-for="(item,key) in products" :key = "item.name">
        {{ item.key }} - {{ item.name }} {{ item.price }}元
    </li>
</ul>
<!------------------------------------------------>

<!------------------ 物件迴圈 ---------------------->
<ul>
    <li v-for="(item,key) in productsObj" :key = "item.name">
        {{ item.key }} - {{ item.name }} {{ item.price }}元
    </li>
</ul>
<!------------------------------------------------>
    
<!----------------- 純數值迴圈 --------------------->
<ul>
    <li v-for="i in 5">{{ i }}</li>
</ul>    
<!------------------------------------------------>    
    
<!------------ <template>標籤使用在 v-for ---------->
  <table class="table">
    <tbody>
      <template v-for="(item,key) in products" :key="item.name">
        <tr >
          <th rowspan="2">{{ key+1 }}</th>
          <td colspan="2">
            {{ item.name }}
          </td>
        </tr>
        <tr>
          <td>
            {{ item.price }}元
          </td>
          <td>
            {{ item.vegan? '可':'不可' }}素食
          </td>
        </tr>
      </template>  
    </tbody>
  </table>    
<!------------------------------------------------>
<div>
     
<script>
data() {
    return {
      products: [
        {
          name: '蛋餅',
          price: 30,
          vegan: false
        },
        {
          name: '飯糰',
          price: 35,
          vegan: false
        },
  
      ],
      productsObj: {
        chineseOmelette: {
          name: '蛋餅',
          price: 30,
          vegan: false
        },
        riceBall: {
          name: '飯糰',
          price: 35,
          vegan: false
        },
      },
    }
</script>

### v-bine(縮寫＂：＂) : 屬性綁定，當HTML要使用vue語法時，在原語法前加"："即可附於傳喚Vue能力。

<!------------- 簡單試例1:圖片召喚src、滑鼠移到圖片出現文字titil ---------->
<img :src="breakfastShop.imgUrl" :title="breakfastShop.name" class="square-img" alt="">
<!-------------------------------------------------------------------->
    
<!---------------------- 簡單試例2:按鈕disabled ----------------------->
<button type="submit" :disabled="isFull">送出</button>
<!-------------------------------------------------------------------->
    
<!----------------- 簡單試例3:串接，拉滑桿挑整圖片大小 ------------------->
<input type="range" min="100" max="1000" v-model="imageSize"><br>
<img :src=`${breakfastShop.resizeImg}&w=${imageSize}` alt="">    
<!-------------------------------------------------------------------->

<!-- 簡單試例4:動態屬性綁定，文字切換模式(disabled=無效，readonly=只能讀) -->
<button type="button"
v-on:click="dynamic = dynamic === 'disabled' ? 'readonly':'disabled'">切換為 {{ dynamic }}</button>
<!-- //如果dnamic=readonly就改為disabled，反之亦然。 -->
<br>
<input type="text" :value="name" :[dynamic]>
<!-------------------------------------------------------------------->