VUE指令合集（更新中）-有解無憂

前言：學習前端的都知道，vue框架的地位和重要性，而學會vue指令便是基礎，但是vue指令很多，一個全面的指令合集可以讓你在需要時輕松找到，由于本人還在學習中，所以vue指令還在更新中，以下便是我目前學過的指令，

1.vue指令v-bind

目標: 給標簽屬性設定vue變數的值

語法：v-bind:屬性名="vue變數"

簡寫：:屬性名="vue變數"

<!-- vue指令-v-bind屬性動態賦值 -->
<a v-bind:href="url">我是a標簽</a>
<img :src="imgSrc">

總結: 把vue變數的值, 賦予給dom屬性上, 影響標簽顯示效果

2.vue指令v-on

目標: 給標簽系結事件

語法：

v-on:事件名="要執行的少量代碼"
v-on:事件名="methods中的函式"
v-on:事件名="methods中的函式(實參)"

簡寫: @事件名="methods中的函式"

<!-- vue指令:   v-on事件系結-->
<p>你要買商品的數量: {{count}}</p>
<button v-on:click="count = count + 1">增加1</button>
<button v-on:click="addFn">增加1個</button>
<button v-on:click="addCountFn(5)">一次加5件</button>
<button @click="subFn">減少</button>
<script>
    export default {
        // ...其他省略
        methods: {
            addFn(){ // this代表export default后面的組件物件(下屬有data里return出來的屬性)
                this.count++
            },
            addCountFn(num){
                this.count += num
            },
            subFn(){
                this.count--
            }
        }
    }
</script>

3.vue指令v-on事件物件

目標: vue事件處理函式中, 拿到事件物件

語法:

無傳參, 通過形參e直接接收
有傳參, 通過$event指代事件物件傳給事件處理函式

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

4.vue指令v-on修飾符

目的: 在事件后面.修飾符名 - 給事件帶來更強大的功能

語法:@事件名.修飾符="methods里函式"

.stop - 阻止事件冒泡
.prevent - 阻止默認行為
.once - 程式運行期間, 只觸發一次事件處理函式

<template>
  <div @click="fatherFn">
    <!-- vue對事件進行了修飾符設定, 在事件后面.修飾符名即可使用更多的功能 -->
    <button @click.stop="btn">.stop阻止事件冒泡</button>
    <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默認行為</a>
    <button @click.once="btn">.once程式運行期間, 只觸發一次事件處理函式</button>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn(){
      console.log("father被觸發");
    },
    btn(){
      console.log(1);
    }
  }
}
</script>

5.vue指令v-on按鍵修飾符

目標: 給鍵盤事件, 添加修飾符, 增強能力

語法:

@keyup.enter - 監測回車按鍵
@keyup.esc - 監測回傳按鍵
更多修飾符事件處理 — Vue.js

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回車按鍵了");
   },
   escFn(){
     console.log("esc按鍵了");
   }
 }
}
</script>

6.vue指令v-model

目標: 把value屬性和vue資料變數, 雙向系結到一起

語法: v-model="vue資料變數"

雙向資料系結

資料變化 -> 視圖自動同步
視圖變化 -> 資料自動同步

<template>
  <div>
    <!-- 
    	v-model:是實作vuejs變數和表單標簽value屬性, 雙向系結的指令
    -->
    <div>
      <span>用戶名:</span>
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密碼:</span>
      <input type="password" v-model="pass" />
    </div>
    <div>
      <span>來自于: </span>
      <!-- 下拉選單要系結在select上 -->
      <select v-model="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
    <div>
      <!-- (重要)
      遇到復選框, v-model的變數值
      非陣列 - 關聯的是復選框的checked屬性
      陣列   - 關聯的是復選框的value屬性
       -->
      <span>愛好: </span>
      <input type="checkbox" v-model="hobby" value="抽煙">抽煙
      <input type="checkbox" v-model="hobby" value="喝酒">喝酒
      <input type="checkbox" v-model="hobby" value="寫代碼">寫代碼
    </div>
    <div>
      <span>性別: </span>
      <input type="radio" value="男" name="sex" v-model="gender">男
      <input type="radio" value="女" name="sex" v-model="gender">女
    </div>
    <div>
      <span>自我介紹</span>
      <textarea v-model="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      pass: "",
      from: "",
      hobby: [], 
      sex: "",
      intro: "",
    };
    // 總結:
    // 特別注意: v-model, 在input[checkbox]的多選框狀態
    // 變數為非陣列, 則系結的是checked的屬性(true/false) - 常用于: 單個系結使用
    // 變數為陣列, 則系結的是他們的value屬性里的值 - 常用于: 收集勾選了哪些值
  }
};
</script>

7.vue指令v-model的修飾符

目標: 讓v-model擁有更強大的功能

語法:v-model.修飾符="vue資料變數"

.number 以parseFloat轉成數字型別
.trim 去除首尾空白字符
.lazy 在change時觸發而非inupt時

<template>
  <div>
    <div>
      <span>年齡:</span>
      <input type="text" v-model.number="age">
    </div>
    <div>
      <span>人生格言:</span>
      <input type="text" v-model.trim="motto">
    </div>
    <div>
      <span>自我介紹:</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      motto: "",
      intro: ""
    }
  }
}
</script>

8.vue指令v-text和v-html

目的: 更新DOM物件的innerText/innerHTML

語法:

v-text="vue資料變數"
v-html="vue資料變數"

注意: 會覆寫插值運算式

<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "<span>我是一個span標簽</span>"
    }
  }
}
</script>

總結: v-text把值當成普通字串顯示, v-html把值當做html決議

9.vue指令v-show和v-if

目標: 控制標簽的隱藏或出現

語法:

v-show="vue變數"
v-if="vue變數"

原理：

v-show 用的display:none隱藏 (頻繁切換使用)
v-if 直接從DOM樹上移除

高級：v-else使用

<template>
  <div>
    <h1 v-show="isOk">v-show的盒子</h1>
    <h1 v-if="isOk">v-if的盒子</h1>

    <div>
      <p v-if="age > 18">我成年了</p>
      <p v-else>還得多吃飯</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOk: true,
      age: 15
    }
  }
}
</script>

10.vue指令v-for

目標: 串列渲染, 所在標簽結構, 按照資料數量, 回圈生成

語法：

v-for="(值, 索引) in 目標結構"
v-for="值 in 目標結構"

目標結構:可以遍歷陣列 / 物件 / 數字 / 字串 (可遍歷結構)

注意：v-for的臨時變數名不能用到v-for范圍外

<template>
  <div id="app">
    <div id="app">
      <!-- v-for 把一組資料, 渲染成一組DOM -->
      <!-- 口訣: 讓誰回圈生成, v-for就寫誰身上 -->
      <p>學生姓名</p>
      <ul>
        <li v-for="(item, index) in arr" :key="item">
          {{ index }} - {{ item }}
        </li>
      </ul>

      <p>學生詳細資訊</p>
      <ul>
        <li v-for="obj in stuArr" :key="obj.id">
          <span>{{ obj.name }}</span>
          <span>{{ obj.sex }}</span>
          <span>{{ obj.hobby }}</span>
        </li>
      </ul>

      <!-- v-for遍歷物件(了解) -->
      <p>老師資訊</p>
      <div v-for="(value, key) in tObj" :key="value">
        {{ key }} -- {{ value }}
      </div>

      <!-- v-for遍歷整數(了解) - 從1開始 -->
      <p>序號</p>
      <div v-for="i in count" :key="i">{{ i }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小明", "小歡歡", "大黃"],
      stuArr: [
        {
          id: 1001,
          name: "孫悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "豬八戒",
          sex: "男",
          hobby: "背媳婦",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
      count: 10,
    };
  },
};
</script>

11.vue指令v-for更新檢測

目標: 當v-for遍歷的目標結構改變, Vue觸發v-for的更新

情況1: 陣列翻轉

情況2: 陣列截取

情況3: 更新值

口訣:

1.使原陣列發生改變的方法，就會導致v-for更新, 頁面更新

2.使原陣列不發生改變的方法，回傳新陣列, 就不會導致v-for更新，頁面重繪

3.需要更新情況二可使用新陣列覆寫原陣列的方式，需要更新情況三使用this.$set(引數1，引數2，引數3) 引數1是目標陣列，引數2是陣列的索引，引數3是修改的值

<template>
  <div>
    <ul>
      <li v-for="(val, index) in arr" :key="index">
        {{ val }}
      </li>
    </ul>
    <button @click="revBtn">陣列翻轉</button>
    <button @click="sliceBtn">截取前3個</button>
    <button @click="updateBtn">更新第一個元素值</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr: [5, 3, 9, 2, 1]
    }
  },
  methods: {
    revBtn(){
      // 1. 陣列翻轉可以讓v-for更新
      this.arr.reverse()
    },
    sliceBtn(){
      // 2. 陣列slice方法不會造成v-for更新
      // slice不會改變原始陣列
      // this.arr.slice(0, 3)

      // 解決v-for更新 - 覆寫原始陣列
      let newArr = this.arr.slice(0, 3)
      this.arr = newArr
    },
    updateBtn(){
      // 3. 更新某個值的時候, v-for是監測不到的
      // this.arr[0] = 1000;

      // 解決-this.$set()
      // 引數1: 更新目標結構
      // 引數2: 更新位置
      // 引數3: 更新值
      this.$set(this.arr, 0, 1000)
    }
  }
}
</script>

<style>

</style>

以下方法會觸發陣列改變, v-for會監測到并更新頁面：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

以下方法不會觸發v-for更新

slice()
filter()
concat()

12.vue動態class

目標: 用v-bind給標簽class設定動態的值

語法::class="{類名: 布林值}"

<template>
  <div>
    <!-- 語法:
      :class="{類名: 布林值}"
      使用場景: vue變數控制標簽是否應該有類名
     -->
    <p :class="{red_str: bool}">動態class</p>
  </div>
</template>

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

<style scoped>
  .red_str{
    color: red;
  }
</style>

總結: 就是把類名保存在vue變數中賦予給標簽

13.vue動態style

目標: 給標簽動態設定style的值

語法::style="{css屬性: 值}"

<template>
  <div>
    <!-- 動態style語法
      :style="{css屬性名: 值}"
     -->
    <p :style="{backgroundColor: colorStr}">動態style</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      colorStr: 'red'
    }
  }
}
</script>

<style>

</style>

總結: 動態style的key都是css屬性名

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/328016.html

標籤：其他

上一篇：Vue指令大全(不定時更新)

下一篇：Java專案:寵物醫院預約掛號系統(java+JSP+Spring+SpringBoot+MyBatis+html+layui+maven+Mysql)