Vue的基本認識與使用

2022-08-30 01:24:11 字數 820 閱讀 3742

vue是乙個漸進式的js框架,採用的是mvvm模式的雙向繫結,

引入vue

雙向繫結就是指,當view中的值發生 變化時通過監聽到後會將model中的值也做出同樣的改變,當model中的值發生改變時通過繫結資料,也會u改變view中的值

vue的表示式和js中的 表示式寫法和用法差不多

v-text:直接展示

v-html:直接展示(但是可以解析html標籤)

v-for:迴圈(陣列,物件,數字,字串)

v:值 i:下標 k:屬性名

v-for="(v,i) in 陣列"

v-for="(v,k,i) in 物件"

v-show:將資料給隱藏掉,

v-if:判斷條件是否成立,當不成立時那麼**將被隱藏掉

v-else-if=""

v-else

v-bind:繫結屬性(屬性中使用vue的表示式)

標準寫法:

簡寫形式(建議):

繫結物件屬性:

1

291011

1213

1415

newvue(

21 })

for迴圈和bing組合案例

for="u in user">

}}}}}

newvue(},

},},

],hobby:["一尺","一桌","一堂木而"]}})

v-model:雙向繫結(只能用到input,select,textarea中)

v-on:事件繫結

簡寫形式:

注意事項

Vue基本認識

vue是一套用於動態構建使用者介面的漸進式框架。與其它大型框架不同的是,vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。另一方面,當與現代化的工具鏈以及各種支援庫類結合使用時,vue 也完全能夠為複雜的單頁應用提供驅動。遵循 mvvm...

vue的簡單認識和使用

vue 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。1.引入vue cdn的引入 2.建立vue例項物件 在上面 中,我們通過new vue 構建了乙個vue的例項。在...

VUE的基本使用

cn.vuejs.org src vue.js script 掛載點 data msg 資料 methods v text v html 插入文字兩者的區別和innertext innerhtml 區別一樣 v show css級別的顯示隱藏,display none v show true fal...