Vue基礎語法

2021-10-07 18:08:50 字數 2095 閱讀 8142

指令

1.1 資料繫結指令

v-pre 填充原始資訊

1. 顯示原始資訊跳過編譯過程

v-once 只編譯一次

應用場景:顯示的資訊後續不需要修改。

1.2 雙向資料繫結

type

='text'

v-model

='username'

/>

1.3 事件繫結
type

='button'

v-on:click

='num++'

/>

type

='button'

v-on:click

='demo'

/>

缺省會傳遞事件物件作為函式第乙個物件

type

='button'

v-on:click

='demo(引數1,引數2,$event)'

/>

最後乙個引數為事件物件(固定名字為$event)

type

='button'

@click

='num++'

/>

1.4 事件修飾符
v-on:click.stop

='demo'

>

跳轉a>

v-on:click.prevent

='demo'

>

跳轉a>

1.5 按鍵修飾符
type

='button'

v-on:keyup.enter

='submit'

/>

type

='button'

v-on:keyup.delete

='demo'

/>

1.6 屬性繫結
v-bind:href

='url'

>

a>

:href

='url'

>

a>

1.7 樣式繫結

1.7.1 class樣式處理

v-bind:class=''

>

div>

v-bind:class

='[active,demo]'

>

div>

1.7.2 style 樣式處理
v-bind:

style=''

>

div>

v-bind:

style

='[fontstyles,widthstyles]

'>

div>

1.8 分支迴圈結構

1.8.1 分支結構

1.8.2v-ifv-show區別

1.8.3 迴圈結構

v-for

='item in list'

>

}li>

v-for

='(item,index) in list'

>

}+"-----"+}li

>

:key

='item.index'

v-for

='(item,index) in list'

>

}+"-----"+}li

>

mvvm設計思想

① m (model)

② v (view)

③ vm (view-model)

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基礎語法

常用控制項 基本練習 class繫結 使用方式 v bind class expression expression的型別 字串 陣列 物件 style繫結 v bind style expression expression的型別 字串 陣列 物件 vue通過由點 表示的指令字尾來呼叫修飾符,st...

VUE 基礎語法

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