Vue.js簡介Vue.js概述

Vue.js的安裝開發(fā)工具WebStorm簡介創(chuàng)建第一個Vue實(shí)例在WebStorm中引入AI工具Vue.js概述什么是Vue.jsVue.js的特性什么是Vue.js輕量級Model-View-ViewModelMVVM模式數(shù)據(jù)綁定應(yīng)用指令插件化開發(fā)主要特性響應(yīng)式組件化特點(diǎn)Vue.js的安裝使用VueCLI使用CDN使用NPMVue.js的安裝使用CDN<scriptsrc="/vue@3"></script>使用NPMnpminstallvue使用VueCLInpminstall-gcnpm--registry=cnpminstall模塊名稱開發(fā)工具WebStorm簡介JetBrains公司W(wǎng)ebStormWeb前端開發(fā)神器最強(qiáng)大的HTML5編輯器最智能的JavaScriptIDE/webstorm/download/#section=windows下載地址創(chuàng)建第一個Vue實(shí)例

創(chuàng)建第一個Vue實(shí)例，在WebStorm工具中編寫代碼，在頁面中輸出“IlikeVue.js”。實(shí)例在WebStorm中引入AI工具AI編程助手BaiduComateAI編程助手TONGYILingmaAI編程助手BaiduComateAI編程助手TONGYILingma基礎(chǔ)特性應(yīng)用程序?qū)嵗斑x項插值指令借助AI快速學(xué)習(xí)應(yīng)用程序?qū)嵗斑x項Vue.createApp(App)語法格式Vue.createApp(App).mount('#app')應(yīng)用程序?qū)嵗斑x項數(shù)據(jù)方法生命周期鉤子函數(shù)數(shù)據(jù)<divid="app">

<h2>{{text}}</h2></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">

constvm=Vue.createApp({

data(){

return{

text:'讀萬卷書，行萬里路。'

}

}

}).mount('#app');</script>data選項方法<divid="app"><p>{{showInfo()}}</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">

const

vm=Vue.createApp({data(){return{text:'書是人類進(jìn)步的階梯。',author:'——高爾基'}},methods:{

showInfo:function(){returnthis.text+this.author;}}}).mount('#app');</script>methods選項生命周期鉤子函數(shù)beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed插值文本插值插入HTML綁定屬性使用表達(dá)式雙大括號標(biāo)簽{{}}文本插值

使用雙大括號標(biāo)簽將文本插入HTML中。實(shí)例v-once指令文本插值<divid="app"><h3v-once>{{text}}</h3></div><divid="app"><pv-pre>{{text}}</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{text:'時間是偉大的導(dǎo)師?！畗}}).mount('#app');</script>插入HTML

使用v-html指令將HTML內(nèi)容插入標(biāo)簽。實(shí)例v-html指令輸出HTML內(nèi)容

使用v-bind指令為HTML元素綁定class屬性。實(shí)例綁定屬性v-bind指令為HTML元素綁定屬性

使用v-bind指令的簡寫形式為圖片綁定屬性。實(shí)例<av-bind:href="url">明日學(xué)院</a>綁定屬性<a:href="url">明日學(xué)院</a>使用表達(dá)式

每個數(shù)據(jù)綁定中只能包含單個表達(dá)式，而不能使用JavaScript語句。

明日科技的企業(yè)QQ郵箱地址為“4006751066@”，在雙大括號標(biāo)簽中應(yīng)用表達(dá)式獲取該QQ郵箱地址中的QQ號。實(shí)例指令參數(shù)動態(tài)參數(shù)修飾符參數(shù)<imgv-bind:src="imageSrc"><buttonv-on:click="search">搜索</button>動態(tài)參數(shù)<imgv-bind:[attr]="imageSrc">指令:[表達(dá)式]語法格式修飾符<formv-on:submit.prevent="onSubmit"></form>借助AI快速學(xué)習(xí)為指定的代碼添加注釋向AI求助代碼解釋AI智能問答為指定的代碼添加注釋向AI求助代碼解釋AI智能問答條件判斷與列表渲染條件判斷列表渲染AI輔助編程條件判斷v-if指令v-else指令v-else-if指令v-show指令v-if和v-show的比較v-if指令輸出DOM元素及其包含的子元素表達(dá)式的值truefalse將DOM元素及其包含的子元素移除v-if指令<divid="app"><p>考試成績是{{score}}分</p><pv-if="score>=60">考試成績及格</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{score:66}}}).mount('#app');</script>

應(yīng)用v-if指令和v-else指令判斷2024年2月份的天數(shù)。實(shí)例v-else指令

獲取當(dāng)前的月份，并判斷當(dāng)前月份屬于哪個季節(jié)。實(shí)例v-else-if指令

通過單擊按鈕切換圖片的顯示和隱藏。實(shí)例v-show指令顯示元素表達(dá)式的值truefalse隱藏元素style="display:none"v-if和v-show的比較v-show性能要優(yōu)于v-if從切換的角度v-if性能要優(yōu)于v-show從初始渲染的角度列表渲染應(yīng)用v-for指令遍歷數(shù)組在<template>元素中使用v-for數(shù)組更新檢測應(yīng)用v-for指令遍歷對象向?qū)ο笾刑砑禹憫?yīng)式屬性應(yīng)用v-for指令遍歷整數(shù)iteminitems基本語法<divid="app"><ul><liv-for="iteminitems">{{}}</li></ul></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{items:[{name:'OPPOReno115G手機(jī)'},{name:'戴爾（DELL）Pro靈越15大屏輕薄本'},{name:'海信65E75K65英寸電視'}]}}}).mount('#app');</script>應(yīng)用v-for指令遍歷數(shù)組(item,index)initems帶索引語法應(yīng)用v-for指令遍歷數(shù)組

應(yīng)用v-for指令輸出古代幾位著名詩人的全名、所處時代和代表作品。實(shí)例

在<template>元素中使用v-for指令，實(shí)現(xiàn)輸出網(wǎng)站導(dǎo)航菜單的功能。實(shí)例在<template>元素中使用v-for數(shù)組更新檢測pop()shift()unshift()splice()sort()reverse()變異方法push()

將2023年電影票房排行榜前十名的影片名稱和票房定義在數(shù)組中，對數(shù)組按影片票房進(jìn)行降序排序，將排序后的影片排名、影片名稱和票房輸出在頁面中。實(shí)例數(shù)組更新檢測<divid="app"><ul><liv-for="iteminitems">{{}}</li></ul></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{items:[{name:'OPPOReno115G手機(jī)'},{name:'戴爾（DELL）Pro靈越15大屏輕薄本'},{name:'海信65E75K65英寸電視'}]}}}).mount('#app');vm.items=vm.items.slice(1);</script>concat()slice()非變異方法filter()數(shù)組更新檢測<divid="app"><ul><liv-for="iteminitems">{{}}</li></ul></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{items:[{name:'OPPOReno115G手機(jī)'},{name:'戴爾（DELL）Pro靈越15大屏輕薄本'},{name:'海信65E75K65英寸電視'}]}}}).mount('#app');vm.items.splice(2);</script>splice()方法修改數(shù)組長度應(yīng)用v-for指令遍歷對象valueinobject<divid="app"><ul><liv-for="valueingoods">{{value}}</li></ul></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{goods:{name:'OPPOReno11AI拍照手機(jī)',memory:'12GB+256GB',price:2599.00}}}}).mount('#app');</script>基本語法(value,key)inobject帶屬性名語法應(yīng)用v-for指令遍歷對象(value,key,index)inobject帶屬性名和索引語法<divid="app"><ul><liv-for="(value,key,index)ingoods">{{index}}-{{key}}:{{value}}</li>

</ul></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{goods:{name:'OPPOReno11AI拍照手機(jī)',memory:'12GB+256GB',price:2599.00}}}}).mount('#app');</script>應(yīng)用v-for指令遍歷對象<divid="app"><ul><liv-for="(value,key,index)ingoods">{{index}}-{{key}}:{{value}}</li></ul></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{goods:{name:'OPPOReno11AI拍照手機(jī)',memory:'12GB+256GB',price:2599.00}}}}).mount('#app');vm.goods=Object.assign({},vm.goods,{color:'月光寶石',style:'時尚，科技，簡約風(fēng)'});</script>Object.assign()方法添加一個或多個屬性向?qū)ο笾刑砑禹憫?yīng)式屬性應(yīng)用v-for指令遍歷整數(shù)

使用v-for指令輸出九九乘法表。實(shí)例AI輔助編程——v-if和v-for指令的應(yīng)用切換登錄類型創(chuàng)建待辦事項列表計算屬性與監(jiān)聽屬性計算屬性監(jiān)聽屬性AI輔助編程計算屬性什么是計算屬性getter和setter計算屬性緩存什么是計算屬性computed選項<divid="app"><p>QQ電子郵箱為：{{str}}</p><p>郵箱中的QQ號碼為：{{intercept}}</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">

const

vm=Vue.createApp({data(){return{

str:'4006751066@'}},computed:{intercept(){returnthis.str.substr(0,this.str.indexOf('@'));}}}).mount('#app');</script>什么是計算屬性

應(yīng)用計算屬性統(tǒng)計購物車中的商品總價。實(shí)例getter和setter<divid="app"><span>{{fullname}}</span></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">

const

vm=Vue.createApp({data(){return{surname:'陳',

lastname:'小洛'}},computed:{

fullname:{get(){returnthis.surname+this.lastname;}}}}).mount('#app');</script><divid="app"><span>{{fullname}}</span></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{surname:'陳',lastname:'小洛'}},computed:{fullname:{get(){returnthis.surname+this.lastname;},set(value){this.surname=value.slice(0,1);this.lastname=value.slice(1);}}}}).mount('#app');vm.fullname='袁小志';</script>計算屬性緩存<divid="app"><span>{{fullname()}}</span></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">

const

vm=Vue.createApp({data(){return{surname:'邁克爾',

lastname:'喬丹'}},methods:{

fullname:function(){returnthis.surname+'·'+this.lastname;}}}).mount('#app');</script>監(jiān)聽屬性什么是監(jiān)聽屬性deep選項

應(yīng)用監(jiān)聽屬性實(shí)現(xiàn)小時數(shù)和分鐘數(shù)之間的換算。實(shí)例什么是監(jiān)聽屬性watch選項deep選項監(jiān)聽對象內(nèi)部值truedeep選項

當(dāng)監(jiān)聽的數(shù)據(jù)是一個數(shù)組或者對象時，回調(diào)函數(shù)中的新值和舊值是相等的，因?yàn)檫@兩個形參指向的是同一個數(shù)據(jù)對象。AI輔助編程實(shí)現(xiàn)簡單計數(shù)器實(shí)現(xiàn)長度單位的換算樣式綁定class屬性綁定內(nèi)聯(lián)樣式綁定AI輔助編程class屬性綁定對象語法數(shù)組語法對象語法使用計算屬性返回樣式對象三種形式內(nèi)聯(lián)綁定非內(nèi)聯(lián)綁定對象語法內(nèi)聯(lián)綁定<divv-bind:class="{active:isActive}"></div>格式

在手機(jī)列表中，為手機(jī)名稱“vivoS18”和“小米14”添加顏色。實(shí)例對象語法內(nèi)聯(lián)綁定<divclass="default"v-bind:class="{bold:isBold,shadow:isShadow}">一寸光陰一寸金</div><div

class="default

boldshadow">一寸光陰一寸金</div>對象語法非內(nèi)聯(lián)綁定<divid="app"><divclass="default"v-bind:class="classObject">一寸光陰一寸金</div></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{classObject:{bold:true,shadow:true}}}}).mount('#app');</script>對象語法使用計算屬性返回樣式對象<divid="app"><divclass="default"v-bind:class="setStyle">一寸光陰一寸金</div></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{isBold:true,isShadow:true}},computed:{setStyle(){return{bold:this.isBold,shadow:this.isShadow}}}}).mount('#app');</script>數(shù)組語法在數(shù)組中使用對象三種形式普通形式在數(shù)組中使用條件運(yùn)算符數(shù)組語法普通形式<divv-bind:class="[element1,element2]"></div>格式<style>.size{font-size:30px;}.color{color:#FF00FF;}.shadow{text-shadow:2px2px2px#999999;}</style><divid="app"><divv-bind:class="[sizeClass,colorClass,shadowClass]">時間是偉大的導(dǎo)師</div></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{sizeClass:'size',colorClass:'color',shadowClass:'shadow'}}}).mount('#app');</script>數(shù)組語法在數(shù)組中使用條件運(yùn)算符<style>.size{font-size:30px;}.color{color:#FF00FF;}.shadow{text-shadow:2px2px2px#999999;}</style><divid="app"><divv-bind:class="[sizeClass,isColor?'color':'',shadowClass]">時間是偉大的導(dǎo)師</div></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{sizeClass:'size',isColor:true,shadowClass:'shadow'}}}).mount('#app');</script>數(shù)組語法在數(shù)組中使用對象<style>.size{font-size:30px;}.color{color:#FF00FF;}.shadow{text-shadow:2px2px2px#999999;}</style><divid="app"><divv-bind:class="[sizeClass,{color:isColor},shadowClass]">時間是偉大的導(dǎo)師</div></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{sizeClass:'size',isColor:true,shadowClass:'shadow'}}}).mount('#app');</script>內(nèi)聯(lián)樣式綁定對象語法數(shù)組語法對象語法camelCaseCSS屬性名駝峰式短橫線分隔kebab-case，需用單引號括起來使用計算屬性返回樣式對象三種形式內(nèi)聯(lián)綁定非內(nèi)聯(lián)綁定對象語法內(nèi)聯(lián)綁定<divid="app"><divv-bind:style="{fontWeight:weight,textShadow:shadow,'font-size':size+'px'}">相信是成功的起點(diǎn)</div></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">

const

vm=Vue.createApp({data(){return{weight:'bold',shadow:'2px2px1px#666',size:26}}}).mount('#app');</script>對象語法非內(nèi)聯(lián)綁定

為電子商城中的搜索框綁定樣式，將綁定的樣式對象定義在data選項中。實(shí)例對象語法使用計算屬性返回樣式對象<divid="app"><divv-bind:style="setStyle">相信是成功的起點(diǎn)</div></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{weight:'bold',shadow:'2px2px1px#666',size:26}},computed:{setStyle(){return{fontWeight:this.weight,textShadow:this.shadow,'font-size':this.size+'px'}}}}).mount('#app');</script>數(shù)組語法以對象數(shù)組的形式進(jìn)行綁定三種形式直接在元素中綁定樣式對象在data選項中定義樣式對象數(shù)組數(shù)組語法直接在元素中綁定樣式對象<divid="app"><divv-bind:style="[{color:'purple'},{fontSize:'30px'},{'font-weight':'bold'}]">堅持是成功的終點(diǎn)</div></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp().mount('#app');</script>數(shù)組語法在data選項中定義樣式對象數(shù)組<divid="app"><divv-bind:style="arrStyle">堅持是成功的終點(diǎn)</div></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{arrStyle:[{color:'purple'},{fontSize:'30px'},{'font-weight':'bold'}]}}}).mount('#app');

</script>數(shù)組語法以對象數(shù)組的形式進(jìn)行綁定<divid="app"><divv-bind:style="[color,size,weight]">堅持是成功的終點(diǎn)</div></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{color:{color:'purple'},size:{fontSize:'30px'},weight:{'font-weight':'bold'}}}}).mount('#app');</script>AI輔助編程實(shí)現(xiàn)表格隔行換色制作靜態(tài)3D效果的文字事件處理事件監(jiān)聽事件處理中的修飾符AI輔助編程事件監(jiān)聽使用v-on指令事件處理方法使用內(nèi)聯(lián)JavaScript語句使用v-on指令<buttonv-on:click="show">顯示</button>基本用法<button@click="show">顯示</button>簡寫形式使用v-on指令

定義一個“放大”按鈕和一個“縮小”按鈕，通過單擊按鈕實(shí)現(xiàn)文字放大和縮小的效果。實(shí)例事件處理方法

實(shí)現(xiàn)動態(tài)設(shè)置圖片邊框的功能。當(dāng)鼠標(biāo)移入圖片上時，為圖片添加邊框，當(dāng)鼠標(biāo)移出圖片時，去除圖片邊框。實(shí)例事件處理方法

實(shí)現(xiàn)動態(tài)改變文本樣式的效果。當(dāng)鼠標(biāo)指向文本時為文本添加樣式，當(dāng)鼠標(biāo)移出文本時去除文本樣式。實(shí)例使用內(nèi)聯(lián)JavaScript語句<divid="app"><buttonv-on:click="show('華為Mate60')">顯示商品名稱</button><p>{{address}}</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{address:''}},methods:{show:function(info){this.address="商品名稱："+info;}}}).mount('#app');</script>使用內(nèi)聯(lián)JavaScript語句<divid="app"><ahref=""v-on:click="show('歡迎訪問明日學(xué)院！',$event)">{{name}}</a></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{name:'明日學(xué)院'}},methods:{show:function(message,e){e.preventDefault();alert(message);}}}).mount('#app');</script>事件處理中的修飾符事件修飾符按鍵修飾符事件修飾符.prevent.capture.self修飾符.stop.once等同于調(diào)用event.stopPropagation().passive等同于調(diào)用event.preventDefault()使用capture模式添加事件監(jiān)聽器只當(dāng)事件是從監(jiān)聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)只觸發(fā)一次回調(diào)以{passive:true}模式添加監(jiān)聽器按鍵修飾符<inputv-on:keyup.13="submit"><inputv-on:keyup.enter="submit">13<Enter>鍵鍵值enter<Enter>鍵別名AI輔助編程統(tǒng)計單擊按鈕的次數(shù)實(shí)現(xiàn)選擇題表單控件綁定雙向數(shù)據(jù)綁定v-model指令02綁定復(fù)選框03綁定單選按鈕05值綁定06使用修飾符AI輔助編程07綁定文本框0104綁定下拉菜單綁定文本框單行文本框多行文本框單行文本框

根據(jù)單行文本框中的關(guān)鍵字搜索指定的手機(jī)信息。實(shí)例多行文本框<divid="app"><textarearows="6"v-model="text"></textarea><pstyle="white-space:pre">{{text}}</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{text:''}}}).mount('#app');</script>綁定復(fù)選框單個復(fù)選框多個復(fù)選框單個復(fù)選框<divid="app"><inputtype="checkbox"id="check"v-model="checked"><labelfor="check">是否選中：{{checked}}</label></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{checked:false}}}).mount('#app');</script>多個復(fù)選框

在頁面中應(yīng)用復(fù)選框添加音樂風(fēng)格選項，并添加“全選”“反選”和“全不選”按鈕，實(shí)現(xiàn)復(fù)選框的全選、反選和全不選操作。實(shí)例綁定單選按鈕

應(yīng)用單選按鈕實(shí)現(xiàn)一個選擇題。如果未選擇答案，則直接單擊“提交答案”按鈕時提示“請選擇答案”，如果選擇的選項不正確，則單擊“提交答案”按鈕時提示“答案不正確”，否則提示“答案正確”。實(shí)例綁定下拉菜單單選多選單選<divid="app"><labelfor="school">請選擇學(xué)歷：</label><selectid="school"v-model="education"><optionvalue="">請選擇</option><option>博士</option><option>碩士</option><option>本科</option><option>?？?lt;/option><option>高中</option><option>高中以下</option></select><p>您的學(xué)歷：{{education}}</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{education:''}}}).mount('#app');</script>多選

制作一個簡單的選擇課程的程序，用戶可以在“可選課程”列表框和“已選課程”列表框之間進(jìn)行選項的移動。實(shí)例單選按鈕復(fù)選框下拉菜單值綁定單選按鈕<divid="app"><p>你去過大理嗎？</p><inputtype="radio"id="is":value="items.is"v-model="been"><labelfor="is">去過</label><inputtype="radio"id="no":value="items.no"v-model="been"><labelfor="no">沒去過</label><p>你選擇的是：{{been}}</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{been:'',items:{is:'去過',no:'沒去過'}}}}).mount('#app');</script>復(fù)選框<divid="app"><inputtype="checkbox"id="check"v-model="toggle":true-value="yes":false-value="no"><labelfor="check">{{toggle}}</label></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{toggle:'',yes:'復(fù)選框被選中',no:'復(fù)選框未被選中'}}}).mount('#app');</script>復(fù)選框<divid="app"><p>請選擇你喜歡的體育項目：</p><inputtype="checkbox":value="sports[0]"v-model="sport"><label>{{sports[0]}}</label><inputtype="checkbox":value="sports[1]"v-model="sport"><label>{{sports[1]}}</label><inputtype="checkbox":value="sports[2]"v-model="sport"><label>{{sports[2]}}</label><inputtype="checkbox":value="sports[3]"v-model="sport"><label>{{sports[3]}}</label><inputtype="checkbox":value="sports[4]"v-model="sport"><label>{{sports[4]}}</label><inputtype="checkbox":value="sports[5]"v-model="sport"><label>{{sports[5]}}</label><p>選擇的體育項目：{{sport.join('、')}}</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{sports:['田徑','游泳','舉重','射擊','跳水','拳擊'],sport:[]}}}).mount('#app');</script>下拉菜單<divid="app"><span>請選擇影片類型：</span><selectv-model="type"><option:value="types[0]">{{types[0]}}</option><option:value="types[1]">{{types[1]}}</option><option:value="types[2]">{{types[2]}}</option><option:value="types[3]">{{types[3]}}</option></select><p>選擇的影片類型：{{type}}</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">

const

vm=Vue.createApp({data(){return{types:['愛情電影','科幻電影','動作電影','文藝電影'],type:'愛情電影'}}}).mount('#app');</script>lazynumbertrim使用修飾符lazy<divid="app"><inputv-model.lazy="message"placeholder="請輸入內(nèi)容"><p>{{message}}</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{message:''}}}).mount('#app');</script>number<divid="app"><inputv-model.number="message"placeholder="請輸入內(nèi)容"><p>{{message}}</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{message:''}}}).mount('#app');</script>trim<divid="app"><inputv-model.trim="message"placeholder="請輸入內(nèi)容"><p>{{message}}</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{message:''}}}).mount('#app');</script>AI輔助編程限制用戶輸入字?jǐn)?shù)選擇音樂類型自定義指令注冊指令鉤子函數(shù)自定義指令的綁定值A(chǔ)I輔助編程注冊指令注冊全局指令注冊局部指令注冊全局指令vm.directive(id,definition)指令I(lǐng)D

定義對象使用方法<divid="app">

請輸入內(nèi)容：<inputv-select></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({});vm.directive('select',{mounted:function(el){el.onfocus=function(){el.select();}}})vm.mount('#app');</script>注冊局部指令directives使用選項<style>.demo{width:300px;height:80px;line-height:80px;text-align:center;background-color:#0000FF;font-size:26px;color:#FFFFFF;}</style><divid="app"><divv-add-style="demo">精誠所至，金石為開。</div></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{demo:'demo'}},directives:{addStyle:{mounted:function(el,binding){el.className=binding.value;}}}}).mount('#app');</script>鉤子函數(shù)6個鉤子beforeMountmountedbeforeUpdateupdatedbeforeUnmountunmounted3個參數(shù)elbindingvnodeoldVnodeinstancevalueoldValuedirargmodifiers鉤子函數(shù)

在頁面中定義一張圖片和一個文本框，在文本框中輸入表示圖片寬度的數(shù)字，實(shí)現(xiàn)為圖片設(shè)置寬度的功能。實(shí)例鉤子函數(shù)

在頁面中定義3個下拉菜單和一行文字，通過第一個下拉菜單為文字設(shè)置大小，通過第二個下拉菜單為文字設(shè)置顏色，通過第3個下拉菜單為文字設(shè)置間距。實(shí)例綁定數(shù)值常量綁定字符串常量綁定對象字面量自定義指令的綁定值綁定數(shù)值常量<divid="app"><spanv-set-position="100">

目標(biāo)越接近，困難越增加。</span></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({directives:{setPosition:function(el,binding){el.style.position='fixed';el.style.left=binding.value+'px';}}}).mount('#app');</script>綁定字符串常量<divid="app"><pv-set-size="'30px'">

業(yè)精于勤，荒于嬉。</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({directives:{setSize:function(el,binding){el.style.fontSize=binding.value;}}}).mount('#app');</script>綁定對象字面量<divid="app"><pv-set-style="{size:26,color:'blue',weight:'bold'}">

會當(dāng)凌絕頂，一覽眾山小。</p></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({directives:{setStyle:function(el,binding){el.style.fontSize=binding.value.size+'px';el.style.color=binding.value.color;el.style.fontWeight=binding.value.weight;}}}).mount('#app');</script>AI輔助編程設(shè)置圖片的不透明度設(shè)置元素的邊框組件02數(shù)據(jù)傳遞03自定義事件04內(nèi)容分發(fā)05動態(tài)組件AI輔助編程06注冊組件01注冊組件注冊全局組件注冊局部組件注冊全局組件ponent(tagName,options)定義的組件名稱組件的選項對象語法格式

<tagName></tagName>使用組件的方式注冊全局組件<divid="app"><demo></demo></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({});ponent('demo',{template:'<h2>天才出于勤奮</h2>'});vm.mount('#app');</script>注冊全局組件<divid="app"><demo></demo></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({});ponent('demo',{template:`<div><p>靜夜思</p><div>床前明月光，</div><div>疑是地上霜。</div><div>舉頭望明月，</div><div>低頭思故鄉(xiāng)。</div></div>`});vm.mount('#app');</script>注冊全局組件<divid="app"><count-button></count-button><count-button></count-button><count-button></count-button></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">

const

vm=Vue.createApp({});

ponent('count-button',{data(){return{count:0}},template:'<buttonv-on:click="count++">{{count}}</button>'});

vm.mount('#app');</script>注冊局部組件components使用選項<divid="app"><demo></demo></div><scriptsrc="/vue@3"></script><scripttype="text/javascript">constvm=Vue.createApp({components:{'demo':{temp