腳本之家服務器常用軟件

快捷導航

Vue2?特殊符號讓人傻傻分不清?“:”、“.”、“@”、“#”?、“{{}}“?、“$“,‘$bus‘,‘$event‘

更新時間：2024年08月06日 10:11:25 作者：Lan.W

:”是指令?“v-bind”的縮寫“.”是修飾符?“@”是指令“v-on”的縮寫?,它用于監(jiān)聽?DOM?事件?“#”是v-slot的縮寫,這篇文章主要介紹了Vue2?新手上路無處不在的特殊符號讓人傻傻分不清“:”、“.”、“@”、“#”?、“{{}}“?、“$“,$bus,$event,需要的朋友可以參考下

背景

剛剛學vue沒多久，經常分不清情況什么時候用什么符號：

“:” 是指令 “v-bind”的縮寫 “.”是修飾符 “@”是指令“v-on”的縮寫，它用于監(jiān)聽 DOM 事件 “#”是v-slot的縮寫；

"{{}}" 插值語法

"$" ：Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $ 。

簡寫

Vue中有很多的指令，且形式都是 v-xxx。

v- 前綴作為一種視覺提示，用來識別模板中 Vue 特定的特性。當你在使用 Vue.js 為現有標簽添加動態(tài)行為 (dynamic behavior) 時，v- 前綴很有幫助，然而，對于一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構建由 Vue.js 管理所有模板的單頁面應用程序 (SPA - single page application) 時，v- 前綴也變得沒那么重要了。因此，Vue.js 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫

1 “:” 是指令 “v-bind”的縮寫

<a v-bind:href="xxx">或簡寫為<a :href="xxx">，xxx 同樣要寫 js 表達式，可以直接讀取到 data 中的所有屬性

如果屬性沒有加v-bind指令，那么屬性中""里的值就是普通字符串，如果加了v-bind指令，就會把""里的值解析為JS表達式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>模板語法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>插值語法</h2>
      <h4>你好，{{ name }}</h4>
      <hr />
      <h2>指令語法</h2>
      <a v-bind:href="tencent.url.toUpperCase()" rel="external nofollow"  x="hello">點我去看{{ tencent.name }}1</a>
      <a :href="tencent.url" rel="external nofollow"  x="hello">點我去看{{ tencent.name }}2</a>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
    new Vue({
      el: '#root',
      data: {
        name: 'jack',
        tencent: {
          name: '開端',
          url: 'https://www.baidu.com',
        }
      }
    })
  </script>
</html>

冒號":" （v-bind) 區(qū)分與v-model

Vue中有2種數據綁定的方式

單向綁定v-bind數據只能從 data 流向頁面
雙向綁定v-model數據不僅能從 data 流向頁面，還可以從頁面流向 data

備注

雙向綁定一般都應用在表單類元素上，如 <input> <select> <textarea> 等
v-model:value可以簡寫為v-model，因為v-model默認收集的就是value值

2 @ 符號示例：

v-on 給標簽綁定事件, 一般是點擊事件綁定： (v-on:click="clickFn") 其簡寫：

<template>
 <div class="all-sort-list2" @click="goSearch"/>
</template>
<script>
export default{
data(){
        }
methods:{
        goSearch(){
            console.log('gosearch methods.')
            }
    }
}
</script>

沒有參數,回調函數參數e

有參數,就用$event占位,在回調中e接收。

在@click后面還可以加擴展參數：事件修飾符

@click.prevent 阻止瀏覽器默認行為(@click.prevent="clickFn")
@click.stop 阻止冒泡(@click.stop="clickFn")

@click.once 事件只觸發(fā)一次（常用）

@click.capture：使用事件的捕獲模式

@click.self：只有event.target是當前操作的元素時才觸發(fā)事件。

@click.prevent函數會阻止觸發(fā)dom的原始事件，而去執(zhí)行特定的事件

@click.passive 事件的默認行為立即執(zhí)行，無需等待事件回調執(zhí)行完畢
.passive 和 .prevent 不能一起使用 .prevent 將會被忽略

@ 用在按鍵上：按鍵修飾符
.enter 回車(@keyup.enter="keyupFn")
.esc (@keyup.esc="keyupFn")

3 “#”是v-slot的縮寫；

什么是插槽？ Slot 與，v-slot
在vue中，引入的子組件標簽中間是不允許寫內容的。為了解決這個問題，官方引入了插槽(slot)的概念。

從 vue@2.6.x 開始，Vue 為具名和范圍插槽引入了一個全新的語法，v-slot 指令。目的就是想統(tǒng)一 slot 和 slot-scope 語法，使代碼更加規(guī)范和清晰。既然有新的語法上位，很明顯，slot 和 scope-slot 也將會在 vue@3.0.x 中徹底的跟我們說拜拜了。而從 vue@2.6.0 開始，官方推薦我們使用 v-slot 來替代后兩者。

跟 v-on 和 v-bind 一樣，v-slot 也有縮寫，即把參數之前的所有內容 (v-slot:) 替換為字符 #。例如 v-slot:header 可以被重寫為 #header：

<template >
  <template #header>
    <h1>Here might be a page title</h1>
  </template>
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
  <template #footer>
    <p>Here's some contact info</p>
  </template>
</template>

slot呢，有點像我們考試卷子上留空的橫線________, 讓你任意的把答案填寫上。

4 插值語法：{{}}

功能：用于解析標簽體內容

：寫法：{{xxx}}，xxx 是 js 表達式，可以直接讀取到 data 中的所有區(qū)域

<h3 class="fl">{{ list.name }}</h3>
<script>
export default{
data(){
list:{
    name:'Test'
    }
   }
  }
</script>

5 $:符號的理解

1）$ mount:vue內部除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $ ，以便與用戶定義的屬性區(qū)分開來；$ mount是 Vuex 源碼中掛載到 Vue 根實例上去的

2）$(形參){方法體}:js的方法名定義規(guī)則比較廣泛，可以是方法名的定義；

3）在事件總線中，添加全局總線是$bus, 用$on $emit $off方法去綁定、觸發(fā)和解綁事件

$bus

下面是在vue2項目程序主入口main.js運行時，一開始就加入$bus的寫法示例：

new Vue({
    store: store, //組件會包含：$store
    router: router, //路由組件，自動產生2個屬性：$route: 一般用于獲取路由信息, $router：用于編程式導航配置[push|replace]
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this// 全局事件總線，萬能：一般用于兄弟組件通信,安裝全局事件總線，$bus 就是當前應用的 vm
    },
}).$mount('#app')

$event

$event 是 vue 提供的特殊變量，用來表示原生的事件參數對象 event
在原生事件中，$event是事件對象可以點出來屬性
在原生事件中，$event是事件對象，在自定義事件中，$event是傳遞過來的數據（參數）
在自定義事件中，$event是傳遞過來的數據
$event 這個名字是固定，是不能可以修改。

|--- 原生vue里的$event例子

4）templeta里面動態(tài)綁定的事件，默認情況是傳遞的參數$event

<template>
<button @click="getData($event)">按鈕</button>
</template>
<script>
export default {
name:'',
methods:{
 getData = (e) => {
            console.log(e)
        }
}
}
</script>

自定義事件使用$event

這里$event是Child子組件傳遞過來的8900這個參數值。

<button @click="$emit('update:money',8900)">花錢</button>

<template>
  <div> SyncTest
    <h2>不使用修飾符sync</h2>
    <!--    :money props傳參-->
    <!--    update:money 是自定義事件的名字，-->
    <Child :money="money" @update:money="money=$event"></Child>
  </div>
</template>
<script>
import Child from "@/pages/Communication/SyncTest/Child";
export default {
  name: "SyncTest",
  components: {Child,},
  data() {
    return {
      money: 9000,
    }
  },
}
</script>
<style scoped>
</style>

補充：區(qū)別css對應的特殊符號的使用：

淺談html特殊字符編碼css3 content:"我是特殊符號"

到此這篇關于Vue2 特殊符號讓人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“,‘$bus‘,‘$event‘的文章就介紹到這了,更多相關vue2 特殊符號 $bus $event內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: