3 Vue Vue基本語法

2021-10-23 14:37:16 字數 2412 閱讀 2005

我們已經成功建立了第乙個vue應用!看起來這跟渲染乙個字串模板非常類似,但是vue在背後做了大量工作。現在資料和dom已經被建立了關聯,所有東西都是響應式的。我們在控制台操作物件屬性,介面可以實時更新!

我們還可以使用v-bind來繫結元素特性!

上**

lang

="en"

xmlns:v-bind

="">

>

charset

="utf-8"

>

>

titletitle

>

head

>

>

>

v-bind:title

="message"

>

滑鼠懸停幾秒後檢視此處動態**繫結的提示資訊!

span

>

div>

src=

"">

script

>

>

var vm =

newvue(}

);script

>

body

>

html

>

你看到的v-bind等被稱為指令指令帶有字首v-,以表示它們是vue提供的特殊特性。可能你已經猜到了,它們會在渲染的dom上應用特殊的響應式行為。在這裡,該指令的意思是:「將這個元素節點的title特性和vue例項的message屬性保持一致"

條件判斷語句,以下兩個屬性!

上**

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

head

>

>

>

v-if

="type==='a'

">

ah1>

v-else-if

="type==='b'

">

bh1>

v-else-if

="type==='c'

">

ch1>

v-else

>

dh1>

div>

src=

"">

script

>

>

var vm =

newvue(}

);script

>

body

>

html

>

上**

lang

="en"

>

>

charset

="utf-8"

>

>

titletitle

>

head

>

>

>

v-for

="item in items"

>

姓名:} | 年齡:}}

li>

}獲得陣列下標 -->

div>

src=

"">

script

>

>

var vm =

newvue(,

,]}}

);script

>

body

>

html

>

lang

="en"

xmlns:v-on

="">

>

charset

="utf-8"

>

>

titletitle

>

head

>

>

>

v-on:click

="sayhi()"

>

click mebutton

>

div>

src=

"">

script

>

s>

var vm =

newvue(,

method:}}

);script

>

body

>

html

>

java語法 基本語法(3) 程式控制流程

程式控制流程 1 順序結構 按順序執行 2 if條件語句 a.if.b.if.else.可簡寫為 變數 布林表示式?語句1 語句2 c.if.else if.else.3 switch選擇語句 switch 表示式 4 while迴圈語句 while 條件表示式 5 do while迴圈語句 dow...

css3基本語法

1.css邊框 圓角效果 border radius 2.css邊框 陰影 box ahadow box shadow x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色 投影方式 3.css邊框 陰影 影。4.css邊框 為邊框應用 border image url borderim...

Swift基本語法 3 控制流

let num 200 if num 10 else if num 100 elsex 20 print 大了 print 小了 表示執行 x 20 print 真的大了 適當地運用三目,能夠讓 寫得更加簡潔 單個可選項判斷let url nsurl string 方法1 強行解包 缺陷,如果 ur...