我們已經成功建立了第乙個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...