Vue.js簡介Vue.js概述

Vue.js的安裝開發(fā)工具WebStorm簡介創(chuàng)建第一個(gè)Vue實(shí)例在WebStorm中引入AI工具Vue.js概述什么是Vue.jsVue.js的特性什么是Vue.js輕量級(jí)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)建第一個(gè)Vue實(shí)例

創(chuàng)建第一個(gè)Vue實(shí)例，在WebStorm工具中編寫代碼，在頁面中輸出“IlikeVue.js”。實(shí)例在WebStorm中引入AI工具AI編程助手BaiduComateAI編程助手TONGYILingmaAI編程助手BaiduComateAI編程助手TONGYILingma基礎(chǔ)特性應(yīng)用程序?qū)嵗斑x項(xiàng)插值指令借助AI快速學(xué)習(xí)應(yīng)用程序?qū)嵗斑x項(xiàng)Vue.createApp(App)語法格式Vue.createApp(App).mount('#app')應(yīng)用程序?qū)嵗斑x項(xiàng)數(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選項(xiàng)方法<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選項(xiàng)生命周期鉤子函數(shù)beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed插值文本插值插入HTML綁定屬性使用表達(dá)式雙大括號(hào)標(biāo)簽{{}}文本插值

使用雙大括號(hà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:'時(shí)間是偉大的導(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á)式

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

明日科技的企業(yè)QQ郵箱地址為“4006751066@”，在雙大括號(hào)標(biāo)簽中應(yīng)用表達(dá)式獲取該QQ郵箱地址中的QQ號(hào)。實(shí)例指令參數(shù)動(dòng)態(tài)參數(shù)修飾符參數(shù)<imgv-bind:src="imageSrc"><buttonv-on:click="search">搜索</button>動(dòng)態(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)前月份屬于哪個(gè)季節(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指令遍歷對(duì)象向?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í)代和代表作品。實(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ù)組中，對(duì)數(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指令遍歷對(duì)象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指令遍歷對(duì)象(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指令遍歷對(duì)象