《Vue.js前端開(kāi)發(fā)技術(shù)與實(shí)踐（第二版）》 課件 第4章 Vue指令_第1頁(yè)
《Vue.js前端開(kāi)發(fā)技術(shù)與實(shí)踐（第二版）》 課件 第4章 Vue指令_第2頁(yè)
《Vue.js前端開(kāi)發(fā)技術(shù)與實(shí)踐（第二版）》 課件 第4章 Vue指令_第3頁(yè)
《Vue.js前端開(kāi)發(fā)技術(shù)與實(shí)踐（第二版）》 課件 第4章 Vue指令_第4頁(yè)
《Vue.js前端開(kāi)發(fā)技術(shù)與實(shí)踐（第二版）》 課件 第4章 Vue指令_第5頁(yè)
已閱讀5頁(yè)，還剩21頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第4章Vue指令??????HTMLLHTML+CSSLHTML+CSS+JavaScriptL+hello<p></P>元素開(kāi)始標(biāo)簽結(jié)束標(biāo)簽hello<p></P>

<p

>hello</p>style="color:red"屬性屬性名屬性值有些屬性是布爾屬性，屬性值可以省略，表示打開(kāi)該屬性,如hidden。style="color:red"

<p

>hello</p>onclick="javascript:style.fontSize='40px'"

事件屬性元素1、標(biāo)簽（區(qū)分不同的類別的元素）2、屬性（

操控元素的狀態(tài)和行為）3、內(nèi)容（DOM對(duì)象中屬性innerTEXT、innerHTML）v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-onv-bindv-modelv-slotv-prev-oncev-memov-cloakVue通過(guò)指令來(lái)用來(lái)操控DOM。指令以HTML自定義屬性的方式使用，名命以v-開(kāi)頭。為常用的頁(yè)面功能設(shè)置了內(nèi)置指令15條指令指令類別：內(nèi)置指令、自定義指令一、指令語(yǔ)法主要職責(zé)是當(dāng)其表達(dá)式的值改變時(shí)，相應(yīng)地將某些行為應(yīng)用在DOM上指令特性的值預(yù)期是單個(gè)JavaScript表達(dá)式一般格式：指令=JS表達(dá)式有參數(shù)格式：指令:參數(shù)=JS表達(dá)式（v-bind、v-on

）布爾格式：指令（v-pre、v-once、v-cloak）二、操控DOM內(nèi)容一般格式：指令=JS表達(dá)式v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-prev-oncev-cloak布爾格式：指令v-pre、v-once、v-cloak、elsev-text、v-html、v-forv-show、v-if、v-else-if1、全局屬性id、class、title、style、hidden等等2、事件屬性有：onblur、onfocus、onsubmit、onkeydown、onkeypress、onclick、ondblclick、onmousedown、onmousemove、等等。/show/49132.html有參數(shù)格式：指令:參數(shù)=JS表達(dá)式參數(shù)為屬性名，如：v-bind:class=JS表達(dá)式參數(shù)為事件名，如：v-on:click=事件處理函數(shù)三、操控DOM屬性（v-bind、v-on）在Vue中，動(dòng)態(tài)的樣式類在“v-on:class”中定義，靜態(tài)的類名寫(xiě)在class樣式中。v-bind指令主要用于響應(yīng)更新HTML元素的屬性，將屬性動(dòng)態(tài)綁定到表達(dá)式三、v-bind指令只需要通過(guò)表達(dá)式計(jì)算出字符串結(jié)果即可*表達(dá)式表達(dá)式：是對(duì)一個(gè)變量或值的引用，或者是一組值和變更與運(yùn)算符的組合語(yǔ)句：a=b*100100：字面理表達(dá)式b：是一個(gè)變量表達(dá)式，表示取它的值b*100：算術(shù)表達(dá)式a=b*100：賦值表達(dá)式fn():函數(shù)調(diào)用表達(dá)式在Vue中，動(dòng)態(tài)的樣式類在“v-on:class”中定義，靜態(tài)的類名寫(xiě)在class樣式中。v-bind指令主要用于響應(yīng)更新HTML元素的屬性，將屬性動(dòng)態(tài)綁定到表達(dá)式三、v-bind指令只需要通過(guò)表達(dá)式計(jì)算出字符串結(jié)果即可$event事件對(duì)象.stop阻止事件冒泡.capture事件流為捕獲事件流.self只接收自觸發(fā)事件.prevent阻止默認(rèn)事件插槽slot參數(shù)為插槽名，如：v-slot:defaultv-slot="{x,y}"

4、操控組件標(biāo)簽(v-slot)5、操控表單(v-model)student={

'name':

'tom',//設(shè)置屬性

'age':

20,

//設(shè)置屬性

'say':

function(){

alert("helloworld!")

}//設(shè)置方法};HeaderfooterasidecontentHTMLCSSJSHTMLCSSJSHTMLCSSJSHTMLCSSJS它帶有前綴v-，主要職責(zé)是當(dāng)其表達(dá)式的值改變時(shí)，相應(yīng)地將某些行為應(yīng)用在DOM上。<!DOCTYPE

html><html

lang="en"><head>

<title>Document</title>

<style>

</style></head><body>

</body>

<script>

</script></html><script

setup>

</script>

<template>

<div>

</div></template>

<style>

</style>Vue單文件組件包

出口模塊

模塊

模塊

模塊

模塊

App.vueimport{createApp}from

'vue'createApp(import

App

from

'./App.vue')App.mount()'#app'globals:{

defineProps:'readonly',defineEmits:'readonly',defineExpose:'readonly',withDefaults:'readon

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論