這些Vue的基礎語法你會了沒?趕緊看

2021-10-23 12:00:14 字數 2777 閱讀 9733

事件處理器

**實現

頁面效果

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

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

v-bind:style=「expression」

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

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

.stop

.prevent

.capture

.self

.once

v-on:click.stop

="dothis"

>

a>

v-on:submit.prevent

="onsubmit"

>

form

>

v-on:click.stop.prevent

="dothat"

>

a>

v-on:submit.prevent

>

form

>

v-on:click.capture

="dothis"

>

...div

>

v-on:click.self

="dothat"

>

...div

>

v-on:click.once

="dothis"

>

a>

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

v-on:keyup.enter

="submit"

>

全部的按鍵別名:見下文**塊

.lazy

預設情況下, v-model在input事件中同步輸入框的值與資料,但你可以新增

乙個修飾符lazy,從而轉變為在change事件中同步

.number

將使用者的輸入值轉為 number 型別

.trim

自動過濾使用者輸入的首尾空格

除了vue自帶的指令(v-on|v-model)等, vue也允許註冊自定義指令,根據作用範圍又分為:全域性指令/區域性指令

vue.directive("focus",{});//全域性指令

new vue(

}});

>

>

charset

="utf-8"

/>

>

title

>

src=

"">

script

>

head

>

>

.clstyle

>

>

>

>

} }p

>

:class

="textcolor"

>

打五的div

>

@click

='click1'

>

顯示button

>

/>

type

="text"

v-model

="text"

/>

} @click

="click2"

>

傳遞button

>

@click.once

="click2"

>

傳遞button

>

/>

type

="text"

@keyup.enter

="click2"

v-model

="text"

/>

} @click

="click2"

>

傳遞button

>

/>

v-for

="d in data"

>

type

="checkbox"

v-model

="ids"

:value

="d.name"

/>

} div

>

}/>

type

="text"

v-model.number

="text"

/>

@click

="click3"

>

傳遞button

>

}>

div>

body

>

>

var vm =

newvue(,

text:'',

ret:'',

data:[,

,], ids:

}}, methods:

, click2:

function()

, click3:

function()

}});

script

>

html

>

因為我懶,所以建議cope**自己乙個個慢慢新增執行測試,不要一次性複製去執行,不然**幹了啥你都分不清。

網頁控制台記得開著除錯和看部分執行效果。

這些C 基礎知識的基礎知識你都學會了嗎?

一 c 基礎知識 新的資料型別 c語言中的資料型別 練習 定義乙個命名空間為mynum,在該命名空間中定義乙個整型變數x,並給該變數賦值為105 使用c 新特性判斷mynum命名空間下的變數是奇數還是偶數。using namespace std namespace mynum using names...

最厲害的VUE指令,看完你就會了!!!

vue.js 自身不是乙個全能框架 它只聚焦於檢視層。因此它非常容易學習,非常容易與其它庫或已有專案整合。另一方面,在與相關工具和支援庫一起使用時 vue.js 也能完美地驅動複雜的單頁應用。vue.js 讀音 vju 類似於 view 是一套構建使用者介面的漸進式框架。與其它大型框架不同的是,vu...

Vue的基礎語法(一)

v once h2 v html url h2 data 123h2 v text message 123h2 h2 v pre h2 v cloak h2 v cloak style 動態繫結class 物件語法 class h2 class getactive h2 methods 動態繫結cl...