1. 程式人生 > >前端JS框架——Vue.js筆記(一)

前端JS框架——Vue.js筆記(一)

基本的Vue程式碼結構:
在這裡插入圖片描述

插值表示式:
在這裡插入圖片描述

v-text:
在這裡插入圖片描述
使用v-cloak解決v-text閃爍問題:
在這裡插入圖片描述

使用v-html對html格式文字進行渲染

在這裡插入圖片描述
使用v-bind進行資料繫結:
在這裡插入圖片描述
它的縮寫是:

使用v-on進行事件監聽繫結:
在這裡插入圖片描述
它的縮寫是@符號

事件修飾符:
.stop阻止冒泡事件
在這裡插入圖片描述
.prevent阻止預設事件
在這裡插入圖片描述
.self只有點選元素本身時才會觸發該元素的事件處理函式
在這裡插入圖片描述
.once讓改元素的事件處理函式只發生一次
在這裡插入圖片描述
.capture
在這裡插入圖片描述

實現v-model指令實現M->V->M:
在這裡插入圖片描述

通過vue給元素新增樣式:
style方式
在這裡插入圖片描述

使用v-for迴圈普通陣列:
在這裡插入圖片描述

使用v-for迴圈物件陣列(即陣列中的元素是物件):
在這裡插入圖片描述

使用v-for迴圈物件:
在這裡插入圖片描述

使用v-for迭代數字(從1開始迭代):
在這裡插入圖片描述

使用v-for與元件使用的時候需指定唯一的key值:
在這裡插入圖片描述

使用v-if或v-show控制元素展示(以及兩者的區別):
在這裡插入圖片描述