VUE基礎1方法與指令

前端三個框架 angular.js、react.js、vue.js vue開發使用熱度不斷上公升

vue核心思想：將頁面的方法封裝好，我們只需要修改資料就會完成相應的頁面展示

基礎語法

匯入vue

234

建立vue物件

魔板語言引用

"
">}

魔板語言支援簡單判斷和運算

1}2
}3}

定義方法

1     //例項化乙個vue物件
2     var vm =new vue(,
9methods:,
14             //第二種方法定義（第二種更簡單）：
15changedata()18}
19     })

指令帶有v -在vue中叫做指令，指令實際就是vue封裝的一些js操作，當資料值發生變更後，將其產生的影響，作用與dom中，建立的指令v-bind、v-on、v-if、v-for

v-on繫結事件

1
"">23
}456
7"button
" @click="
changedata
" value="
修改">
8

1  //例項化乙個vue物件
2     var vm =new vue(,
9methods:13}
14     })

v-bind繫結屬性

在魔板語言中，我們可以通過}的形式將data中的資料渲染到頁面上，如果我們要將data中的屬性賦值給標籤的屬性時就不能用}格式來寫了。需要用到屬性繫結

"
}//完整寫法
"url
//縮寫
"url

v-if、v-else-if、v-else（條件渲染）

用於選擇性渲染某一塊資料，當符合哪乙個條件就執行哪個標籤

1
if="
number==10086
">移動
2else-if="
number==10010
">聯通
3else>電信

v-show條件渲染

與v-if邏輯相同，區別在於當條件不滿足時，自動給標籤加dispaly:none屬性，隱藏標籤

1
"number==1003122
">中國移動

一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在執行時條件很少改變，則使用v-if較好。

v-for列表迴圈

渲染陣列

1 games:['
絕地求生
', '
英雄聯盟
', '
王者榮耀
']    25
671011 games:[,,]
12

渲染物件（即python中的字典）

1 games:25

1 Vue 基礎指令

1 vue 指令 1 v model 主要在表單中使用，文字框 teaxare 單選下拉等 2 v text 文字渲染類似 3 v show 控制dom顯示隱藏 display none,display block 4 v if 也可以控制dom 顯示隱藏，如果dom 不顯示整個dom就沒有。...

1 Vue 基礎指令

Java基礎》5 方法

僅供自己記錄學習，無它用，歡迎指導！定義乙個方法的格式 public static void 方法名稱方法名稱的命名規則和變數一樣，使用小駝峰。方法體也就是大括號當中可以包含任意條語句。注意事項 1.方法定義的先後順序無所謂。2.方法的定義不能產生巢狀包含關係。3.方法定義好了之後，不會執行的，...

VUE基礎1方法與指令

1 Vue 基礎指令

1 Vue 基礎指令

Java基礎》5 方法

相關推薦