Vue基礎語法2

2022-08-02 13:12:11 字數 1514 閱讀 2201

vue基礎語法1:

一、樣式繫結

class繫結

使用方式:v-bind:class=「expression」

expression的型別:字串、陣列、物件

style繫結

v-bind:style=「expression」

expression的型別:字串、陣列、物件

"">

二、事件處理器

之前已學習

事件修飾符

vue通過由點(.)表示的指令字尾來呼叫修飾符,

.stop

.prevent

.capture

.self

.once

"dothis

">"

dothat

">"

dothis

">...

"dothat

">...

"dothis

">

按鍵修飾符

vue允許為v-on在監聽鍵盤事件時新增按鍵修飾符:

13="

submit

">vue為最常用的按鍵提供了別名

"submit

">全部的按鍵別名:

.enter

.tab

.delete (捕獲 "刪除

" 和 "退格"

鍵) .esc

.space

.up.down

.left

.right

.ctrl

.alt

.shift

.meta

"">

三、vue表單

用v-model指令在表單控制項元素上建立雙向資料繫結

"">

四、vue元件

元件簡介

元件(component)是vue最強大的功能之一

元件可以擴充套件html元素,封裝可重用的**

元件系統讓我們可以用獨立可復用的小組件來構建大型應用,幾乎任意型別的應用的介面都可以抽象為乙個元件樹

全域性和區域性元件

全域性元件:vue.component(tagname, options),tagname為元件名,options為配置選項。

區域性元件: new vue(})

註冊後,我們可以使用以下方式來呼叫元件: 

props

props是父元件用來傳遞資料的乙個自定義屬性。

父元件的資料需要通過props把資料傳給子元件,子元件需要顯式地用props選項宣告 「prop」

"">

VUE 基礎語法2

eg import home from components home.vue eg components function err catch error home 在父元件中1.呼叫子元件的時候定義乙個ref 在父元件中2.在父元件裡面通過 this.refs.head.屬性 this.refs...

Vue基礎語法

指令 1.1 資料繫結指令 v pre 填充原始資訊 1.顯示原始資訊跳過編譯過程 v once 只編譯一次 應用場景 顯示的資訊後續不需要修改。1.2 雙向資料繫結type text v model username 1.3 事件繫結type button v on click num type ...

Vue 基礎語法

lang en charset utf 8 模板語法 v指令入門title src script head root div div div v html test2 my.age div div 物件,裡面有兩個最基本屬性,是固定屬性 要寫在 id 為 root 的 div 下面 const co...