指令
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-if
和v-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...