您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue中的常用內置指令有哪些的相關知識,內容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇Vue中的常用內置指令有哪些文章都會有所收獲,下面我們一起來看看吧。
說明:插值表達式也叫Mustache語法(即雙大括號),雙大括號標簽會被替換為相應組件實例中 msg
屬性的值。同時每次 msg
屬性更改時它也會同步更新。
<template id="my-app"> <!-- 1.mustache的基本使用 --> <h3>{{message}} - {{message}}</h3> <!-- 2.是一個表達式 --> <h3>{{counter * 10}}</h3> <h3>{{ message.split(" ").reverse().join(" ") }}</h3> <!-- 3.也可以調用函數 --> <!-- 可以使用computed(計算屬性) --> <h3>{{getReverseMessage()}}</h3> <!-- 4.三元運算符 --> <h3>{{ isShow ? "哈哈哈": "" }}</h3> <button @click="toggle">切換</button> <!-- 錯誤用法 --> <!-- var name = "abc" -> 賦值語句 --> <!-- <h3>{{var name = "abc"}}</h3> <h3>{{ if(isShow) { return "哈哈哈" } }}</h3> --> </template>
說明: 給元素綁定事件監聽器。
縮寫:@
參數: event
(使用對象語法則為可選項)
修飾符:
.stop
——調用 event.stopPropagation()
。
.prevent
——調用 event.preventDefault()
。
.capture
——在捕獲模式添加事件監聽器。
.self
——只有事件從元素本身發出才觸發處理函數。
.{keyAlias}
——只在某些按鍵下觸發處理函數。
.once
——最多觸發一次處理函數。
.left
——只在鼠標左鍵事件觸發處理函數。
.right
——只在鼠標右鍵事件觸發處理函數。
.middle
——只在鼠標中鍵事件觸發處理函數。
.passive
——通過 { passive: true }
附加一個 DOM 事件。
詳細描述:事件類型由參數來指定。表達式可以是一個方法名,一個內聯聲明,如果有修飾符則可省略。
當用于普通元素,只監聽原生 DOM 事件。當用于自定義元素組件,則監聽子組件觸發的自定義事件。
當監聽原生 DOM 事件時,方法接收原生事件作為唯一參數。如果使用內聯聲明,聲明可以訪問一個特殊的 $event
變量:v-on:click="handle('ok', $event)"
。
v-on
還支持綁定不帶參數的事件/監聽器對的對象。請注意,當使用對象語法時,不支持任何修飾符。
<!-- 方法處理函數 --> <button v-on:click="doThis"></button> <!-- 動態事件 --> <button v-on:[event]="doThis"></button> <!-- 內聯聲明 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 縮寫 --> <button @click="doThis"></button> <!-- 使用縮寫的動態事件 --> <button @[event]="doThis"></button> <!-- 停止傳播 --> <button @click.stop="doThis"></button> <!-- 阻止默認事件 --> <button @click.prevent="doThis"></button> <!-- 不帶表達式地阻止默認事件 --> <form @submit.prevent></form> <!-- 鏈式調用修飾符 --> <button @click.stop.prevent="doThis"></button> <!-- 按鍵用于 keyAlias 修飾符--> <input @keyup.enter="onEnter" /> <!-- 點擊事件將最多觸發一次 --> <button v-on:click.once="doThis"></button> <!-- 對象語法 --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
說明: 動態的綁定一個或多個 attribute,也可以是組件的 prop。
縮寫: :
或者 .
(當使用 .prop
修飾符)
修飾符:
.camel
——將短橫線命名的 attribute 轉變為駝峰式命名。
.prop
——強制綁定為 DOM property。3.2+
.attr
——強制綁定為 DOM attribute。3.2+
用途:
當用于綁定 class
或 style
attribute,v-bind
支持額外的值類型如數組或對象。詳見下方的指南鏈接。
在處理綁定時,Vue 默認會利用 in
操作符來檢查該元素上是否定義了和綁定的 key 同名的 DOM property。如果存在同名的 property,則 Vue 會把作為 DOM property 賦值,而不是作為 attribute 設置。這個行為在大多數情況都符合期望的綁定值類型,但是你也可以顯式用 .prop
和 .attr
修飾符來強制綁定方式。有時這是必要的,特別是在和自定義元素打交道時。
當用于組件 props 綁定時,所綁定的 props 必須在子組件中已被正確聲明。
當不帶參數使用時,可以用于綁定一個包含了多個 attribute 名稱-綁定值對的對象。
<!-- 綁定 attribute --> <img v-bind:src="imageSrc" /> <!-- 動態 attribute 名 --> <button v-bind:[key]="value"></button> <!-- 縮寫 --> <img :src="imageSrc" /> <!-- 縮寫形式的動態 attribute 名 --> <button :[key]="value"></button> <!-- 內聯字符串拼接 --> <img :src="'/path/to/images/' + fileName" /> <!-- class 綁定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"></div> <!-- style 綁定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 綁定對象形式的 attribute --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- prop 綁定。“prop” 必須在子組件中已聲明。 --> <MyComponent :prop="someThing" /> <!-- 傳遞子父組件共有的 prop --> <MyComponent v-bind="$props" /> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>
說明: 基于表達式值的真假性,來條件性地渲染元素或者模板片段。
<h3 v-if="isShow">哈哈哈哈</h3>
說明: 表示 v-if
或 v-if
/ v-else-if
鏈式調用的“else 塊”。
<h3 v-if="isShow">Coder</h3> <h3 v-else>Bin</h3>
ishow 為 true 顯示 Coder,反之顯示 Bin
說明: 表示 v-if
的“else if 塊”。可以進行鏈式調用。
<template id="my-app"> <input type="text" v-model="score"> <h3 v-if="score > 90">優秀</h3> <h3 v-else-if="score > 60">良好</h3> <h3 v-else>不及格</h3> </template>
v-model 后面會說明
說明:基于表達式值的真假性,來改變元素的可見性。
詳細描述:v-show
通過設置內聯樣式的 display
CSS 屬性來工作,當元素可見時將使用初始 display
值。當條件改變時,也會觸發過渡效果。
<template id="my-app"> <h3 v-show="isShow">哈哈哈哈</h3> </template> <script> const App = { template: '#my-app', data() { return { isShow: true } } } Vue.createApp(App).mount('#app'); </script>
v-show
不支持在 <template>
元素上使用,也不能和 v-else
搭配使用。
說明: 在表單輸入元素或組件上創建雙向綁定。
僅限: <input>
、<select>
、 <textarea>
、components
修飾符:
.lazy
——監聽 change
事件而不是 input
.number
——將輸入的合法符串轉為數字
.trim
——移除輸入內容兩端空格
基本使用:
<template id="my-app"> <!-- 1.v-bind value的綁定 2.監聽input事件, 更新message的值 --> <!-- <input type="text" :value="message" @input="inputChange"> --> <input type="text" v-model="message"> <h3>{{message}}</h3> </template> <script> const App = { template: '#my-app', data() { return { message: "Hello World" } }, methods: { inputChange(event) { this.message = event.target.value; } } } Vue.createApp(App).mount('#app');
綁定其他表單:
<template id="my-app"> <!-- 1.綁定textarea --> <label for="intro"> 自我介紹 <textarea name="intro" id="intro" cols="30" rows="10" v-model="intro"></textarea> </label> <h3>intro: {{intro}}</h3> <!-- 2.checkbox --> <!-- 2.1.單選框 --> <label for="agree"> <input id="agree" type="checkbox" v-model="isAgree"> 同意協議 </label> <h3>isAgree: {{isAgree}}</h3> <!-- 2.2.多選框 --> <span>你的愛好: </span> <label for="basketball"> <input id="basketball" type="checkbox" v-model="hobbies" value="basketball"> 籃球 </label> <label for="football"> <input id="football" type="checkbox" v-model="hobbies" value="football"> 足球 </label> <label for="tennis"> <input id="tennis" type="checkbox" v-model="hobbies" value="tennis"> 網球 </label> <h3>hobbies: {{hobbies}}</h3> <!-- 3.radio --> <span>你的愛好: </span> <label for="male"> <input id="male" type="radio" v-model="gender" value="male">男 </label> <label for="female"> <input id="female" type="radio" v-model="gender" value="female">女 </label> <h3>gender: {{gender}}</h3> <!-- 4.select --> <span>喜歡的水果: </span> <select v-model="fruit" multiple size="2"> <option value="apple">蘋果</option> <option value="orange">橘子</option> <option value="banana">香蕉</option> </select> <h3>fruit: {{fruit}}</h3> </template> <script> const App = { template: '#my-app', data() { return { intro: "Hello World", isAgree: false, hobbies: ["basketball"], gender: "", fruit: "orange" } }, methods: { commitForm() { axios } } } Vue.createApp(App).mount('#app'); </script>
v-model修飾符的使用
<template id="my-app"> <!-- 1.lazy修飾符 --> <!-- <input type="text" v-model.lazy="message"> --> <!-- 2.number修飾符 --> <!-- <input type="text" v-model.number="message"> <h3>{{message}}</h3> <button @click="showType">查看類型</button> --> <!-- 3.trim修飾符 --> <input type="text" v-model.trim="message"> <button @click="showResult">查看結果</button> </template> <script> const App = { template: '#my-app', data() { return { message: "Hello World" } }, methods: { showType() { console.log(this.message, typeof this.message); }, showResult() { console.log(this.message); } } } Vue.createApp(App).mount('#app'); </script>
說明: 基于原始數據多次渲染元素或模板塊。
詳細描述:
指令值必須使用特殊語法 alias in expression
為正在迭代的元素提供一個別名:
<div v-for="item in items"> {{ item.text }} </div>
或者,你也可以為索引指定別名 (如果用在對象,則是鍵值):
<div v-for="(item, index) in items"></div> <div v-for="(value, key) in object"></div> <div v-for="(value, name, index) in object"></div>
v-for
的默認方式是嘗試就地更新元素而不移動它們。要強制其重新排序元素,你需要用特殊 attribute key
來提供一個排序提示:
<div v-for="item in items" :key="item.id"> {{ item.text }} </div>
說明: 用于聲明具名插槽或是期望接收 props 的作用域插槽。
縮寫: #
參數:插槽名 (可選,默認是 default
)
僅限:
<template>
components (用于帶有 prop 的單個默認插槽)
示例
<!-- 具名插槽 --> <BaseLayout> <template v-slot:header> Header content </template> <template v-slot:default> Default slot content </template> <template v-slot:footer> Footer content </template> </BaseLayout> <!-- 接收 prop 的具名插槽 --> <InfiniteScroll> <template v-slot:item="slotProps"> <div class="item"> {{ slotProps.item.text }} </div> </template> </InfiniteScroll> <!-- 接收 prop 的默認插槽,并解構 --> <Mouse v-slot="{ x, y }"> Mouse position: {{ x }}, {{ y }} </Mouse>
說明: 更新元素的文本內容。
詳細描述: v-text
通過設置元素的 textContent 屬性來工作,因此它將覆蓋元素中所有現有的內容。如果你需要更新 textContent
的部分,應該使用 mustache interpolations 代替。
<span v-text="msg"></span> <!-- 等同于 --> <span>{{msg}}</span>
說明: 更新元素的 innerHTML。
詳細描述: v-html
的內容直接作為普通 HTML 插入—— Vue 模板語法是不會被解析的。如果你發現自己正打算用 v-html
來編寫模板,不如重新想想怎么使用組件來代替。
安全說明: 在你的站點上動態渲染任意的 HTML 是非常危險的,因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值,絕不要將用戶提供的內容作為插值
<div v-html="html"></div>
說明: 跳過該元素及其所有子元素的編譯。
詳細描述:元素內具有 v-pre
,所有 Vue 模板語法都會被保留并按原樣渲染。最常見的用例就是顯示原始雙大括號標簽及內容。
<span v-pre>{{ this will not be compiled }}</span>
說明: 跳過該元素及其所有子元素的編譯。
詳細描述: 在隨后的重新渲染,元素/組件及其所有子項將被當作靜態內容并跳過渲染。這可以用來優化更新時的性能。
<!-- 單個元素 --> <span v-once>This will never change: {{msg}}</span> <!-- 帶有子元素的元素 --> <div v-once> <h2>comment</h2> <p>{{msg}}</p> </div> <!-- 組件 --> <MyComponent v-once :comment="msg" /> <!-- `v-for` 指令 --> <ul> <li v-for="i in list" v-once>{{i}}</li> </ul>
說明: 用于隱藏尚未完成編譯的 DOM 模板。
詳細描述:該指令只在沒有構建步驟的環境下需要使用。
當使用直接在 DOM 中書寫的模板時,可能會出現一種叫做“未編譯模板閃現”的情況:用戶可能先看到的是還沒編譯完成的雙大括號標簽,直到掛載的組件將它們替換為實際渲染的內容。
v-cloak
會保留在所綁定的元素上,直到相關組件實例被掛載后才移除。配合像 [v-cloak] { display: none }
這樣的 CSS 規則,它可以在組件編譯完畢前隱藏原始模板。
[v-cloak] { display: none; }
<div v-cloak> {{ message }} </div>
關于“Vue中的常用內置指令有哪些”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“Vue中的常用內置指令有哪些”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。