Vue基礎語法

常用控制項

基本練習

class繫結

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

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

style繫結

v-bind:style=「expression」

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

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

.stop
.prevent
.capture
.self
.once 
......

vue為最常用的按鍵提供了別名
全部的按鍵別名：
.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up.down
.left
.right
.ctrl
.alt
.shift
.meta

文字框/密碼框/文字域/隱藏域

單選核取方塊/多選核取方塊
單選按鈕

<

!doctype html>
"utf-8"
/>
vue<
/title>
"">
<
/script>
<
/head>
.cl<
/style>
1.插值 --
>
>
}}<
/p>
'textcolor'
>你好<
/div>
'onclick'
>顯示<
/button>
>
}"onclick"
>傳遞<
/button>
"text" @keyup.enter=
"onclick" v-model=
"text"
/>
"onclick"
>傳遞<
/button>
for=
"d in data"
>
"checkbox" v-model=
"ids" value=
"d.id"
/>
}>
<
/div>
}>
"text" v-model.number=
"text"
/>
"onclick"
>傳遞<
/button>
>
}<
/div>
<
/body>
var vm =new vue(,
],ids:
}}, methods:
}/* ,
computed:function() */})
;<
/script>
<
/html>

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

VUE 基礎語法

1.繫結文字 v model msg 2.繫結html v html h2test 3.繫結標籤屬性 v bind 屬性名 如 href class等 簡寫形式 屬性名 修改顏色 this is update background color div 4.表示式的應用 三元運算子 字串反轉 id t...