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...