一.簡(jiǎn)介

1.概念

Vue 是一款用于構(gòu)建用戶(hù)界面的 JS框架， 基于標(biāo)準(zhǔn) HTML、CSS 和 JavaScript 構(gòu)建，并提供了一套聲明式的、組件化的編程模型， 高效地開(kāi)發(fā)用戶(hù)界面。漸進(jìn)式框架， 適應(yīng)不同需求進(jìn)行開(kāi)發(fā)。

兩個(gè)核心功能：

• 聲明式渲染：Vue 基于標(biāo)準(zhǔn) HTML 拓展了一套模板語(yǔ)法，可聲明式地描述最終輸出的 HTML 和 JS狀態(tài)之間的關(guān)系

• 響應(yīng)性：Vue 會(huì)自動(dòng)跟蹤 JS狀態(tài)并在其發(fā)生變化時(shí)響應(yīng)式地更新DOM

2.創(chuàng)建Vue項(xiàng)目的方式

??nvm: Node版本控制工具

(1)使用vite創(chuàng)建

• 安裝初始化npm init vue@latest

• 選擇配置

• 進(jìn)入項(xiàng)目目錄,安裝模塊npm i, 啟動(dòng)項(xiàng)目 npm run dev

(2)使用vue-cli

• 安裝 npm i -g @vue/cli

• 創(chuàng)建項(xiàng)目 vue create 項(xiàng)目名稱(chēng)

• 選擇相關(guān)配置項(xiàng)

• 啟動(dòng)項(xiàng)目 npm run serve 工程環(huán)境,啟動(dòng)慢

(3)使用可視界面

vue ui

二.基本使用

1.模板語(yǔ)法

(1)文本插值

最基本的數(shù)據(jù)綁定形式是文本插值, {{ }} "Mustache"語(yǔ)法, 插值表達(dá)式

• 插值表達(dá)式Mustache,只是內(nèi)容占位符 ,不覆蓋原因內(nèi)容,

• 只能用在元素內(nèi)容節(jié)點(diǎn),不能用在屬性節(jié)點(diǎn) (v-bind)

• 不能識(shí)別標(biāo)簽 (v-html)

(2)v-html

{{ }}不能識(shí)別標(biāo)簽, 會(huì)將數(shù)據(jù)解釋為純文本, 插入HTML需使用v-html指令

(3)屬性綁定 v-bind:

{{ }}不能在 HTML attributes 中使用。想要響應(yīng)式地綁定一個(gè) attribute，應(yīng)該使用 v-bind 指令(簡(jiǎn)寫(xiě) 英文 : )

    <div> 最新信息 : {{ msg }}</div>   // msg的值渲染到頁(yè)面中<div> 最新信息 : <h1 v-html="msg" ></h1></div>   //h1標(biāo)簽內(nèi)容替換為msg的值, 并以h1格式顯示<div :class="pinkCls"></div>   // 屬性動(dòng)態(tài)綁定單個(gè)值<div :class="objCls"></div>    // 動(dòng)態(tài)綁定多個(gè)值  objCls為一個(gè)對(duì)象, 其中包含多個(gè)屬性及值

2.事件處理

(1)監(jiān)聽(tīng)事件 v-on:

簡(jiǎn)寫(xiě) @: , 使用該指令監(jiān)聽(tīng)DOM事件, 在事件觸發(fā)時(shí)執(zhí)行對(duì)應(yīng)的 JS

    <!-- 監(jiān)聽(tīng)事件 --><!-- 1. 內(nèi)聯(lián)事件處理器：事件被觸發(fā)時(shí)執(zhí)行的內(nèi)聯(lián) JS 語(yǔ)句 (與 onclick 類(lèi)似) --><!-- 點(diǎn)擊按鈕實(shí)現(xiàn)count++, 并將更新后的值顯示在頁(yè)面上 --><button @click="count++">Add 1</button><!-- 2. 方法事件處理器：一個(gè)指向組件上定義的方法的屬性名或是路徑。 --><!-- 綁定addNum方法, 方法中對(duì)count進(jìn)行處理, 綁定方法時(shí)也可傳參--><button @click="addNum(5)">+ step </button><!-- 3. 在內(nèi)聯(lián)處理器中訪(fǎng)問(wèn)事件參數(shù)  原生DOM中事件對(duì)象 e,  訪(fǎng)問(wèn)時(shí)傳入 $event, 也可使用內(nèi)聯(lián)箭頭函數(shù) -->		<button @click="addNum(4,$event)"> + 4</button><button @click=" (e) => addNum(3,e)"> + 3</button><div>更新count: {{ count }}</div>

(2)事件修飾符

• 阻止冒泡??.stop

• 阻止默認(rèn)行為??.prevent

• 自身觸發(fā)?.self

• 只觸發(fā)一次??.once

    <!-- 事件修飾符  可使用鏈?zhǔn)綍?shū)寫(xiě) e.g: @click.stop.prevent--><div class="parent" @click="parentClick"><!-- 1. 阻止冒泡 .stop   如果沒(méi)阻止冒泡, 只點(diǎn)擊son1, 也會(huì)觸發(fā)parent的點(diǎn)擊事件--><div class="son1" @click.stop="sonClick"  style="background-color: skyblue;">我是son1==> .stop </div><!-- 2. 阻止默認(rèn)行為 .prevent 也可以只有修飾符  e.g: 阻止a鏈接跳轉(zhuǎn), 阻止表單提交 --><a class="son2" @click.prevent="jump"  :href="url" style="background-color: orchid;"> 我是son2==> .prevent </a><form @submit.prevent></form><!-- 3. 自身觸發(fā)   點(diǎn)擊son3-son不會(huì)觸發(fā)son3的點(diǎn)擊事件 --><div class="son3" @click.self="sonClick"  style="background-color: orange;">我是son3==> .self <div @click.self="son_sonClick" style="background-color: blue;">son3-son</div></div></div>

(3)按鍵修飾符

• 按鍵別名: .enter, .tab, .delete (捕獲“Delete”和“Backspace”兩個(gè)按鍵), .esc, .space,.up,.down, .left, .right

• 系統(tǒng)按鍵修飾符: .ctrl, .alt, .shift, .meta

• 按鍵修飾符用于可獲取焦點(diǎn)的元素中, e.g:input, [div不可(可使用其他方式實(shí)現(xiàn))]

    <!--  按鍵修飾符 --><!-- 當(dāng)按下回車(chē), 盒子變色 --><input @keyup.enter="colChange"><div :class="colCls">點(diǎn)我,我就變色啦!!!</div>

(4).exact修飾符

????允許控制觸發(fā)一個(gè)事件所需的確定組合的系統(tǒng)按鍵修飾符

    <!-- 當(dāng)按下 Ctrl 時(shí)，即使同時(shí)按下 Alt 或 Shift 也會(huì)觸發(fā) --><button @click.ctrl="onClick">A</button><!-- 僅當(dāng)按下 Ctrl 且未按任何其他鍵時(shí)才會(huì)觸發(fā) --><button @click.ctrl.exact="onCtrlClick">A</button><!-- 僅當(dāng)沒(méi)有按下任何系統(tǒng)按鍵時(shí)觸發(fā) --><button @click.exact="onClick">A</button>

(5)鼠標(biāo)按鍵修飾符

.left, .right, .middle 修飾符將處理程序限定為由特定鼠標(biāo)按鍵觸發(fā)的事件

<template><!-- template模板 中寫(xiě)html結(jié)構(gòu), vue2中模板中只允許包含一個(gè)根節(jié)點(diǎn),  在vue3中支持多個(gè)根節(jié)點(diǎn), 通常我們還是會(huì)使用一個(gè)大的盒子包裹起來(lái),在布局和樣式中更加方便, 層層遞進(jìn)--><div></div>
</template><script>export default {// 數(shù)據(jù)data(){return{count: 0,// 默認(rèn)類(lèi)名colCls: "pinkCls" ,url:''}},// 處理方法methods:{// 顏色改變colChange(){this.colCls = "blueCls"},// 實(shí)現(xiàn) ++  也可傳參addNum(step,e){this.count += step console.log(e);},parentClick(){alert('parent')},sonClick(){alert('son')},son_sonClick(){alert('son---son')},jump(){this.url = "https://blog.csdn.net/qq_54379580?type=blog" }},}
</script><style>*{margin: 300px auto;}div.pinkCls{width: 200px;height: 200px;background-color:  pink ;}div.blueCls{width: 200px;height: 200px;background-color: skyblue;}div.parent{width: 500px;height: 500px;background-color: pink;}
</style>

參考文檔: https://cn.vuejs.org/guide/essentials/event-handling.html