Vue入門 常用指令詳解

2022-05-04 09:51:07 字數 1462 閱讀 6506

vue是乙個mvvm(model / view / viewmodel)的前端框架,相對於angular來說簡單、易學上手快,近兩年也也別流行,發展速度較快,已經超越angular了。比較適用於移動端,輕量級的框架,檔案小,執行速度快。最近,閒來無事,所以學習一下vue這個流行的框架,以備後用。

v-model多用於表單元素實現雙向資料繫結(同angular中的ng-model)

v-for格式: v-for="欄位名 in(of) 陣列json"  迴圈陣列或json(同angular中的ng-repeat),需要注意從vue2開始取消了$index

v-show顯示內容 (同angular中的ng-show)

v-hide隱藏內容(同angular中的ng-hide)

v-if顯示與隱藏  (dom元素的刪除新增 同angular中的ng-if 預設值為false)

v-else-if必須和v-if連用

v-else必須和v-if連用  不能單獨使用  否則報錯   模板編譯錯誤

v-bind動態繫結  作用: 及時對頁面的資料進行更改

v-on:click給標籤繫結函式,可以縮寫為@,例如繫結乙個點選函式  函式必須寫在methods裡面

v-text解析文字

v-html解析html標籤

v-bind:class三種繫結方法  1、物件型  ''  2、三元型   'isred?"red":"blue"'   3、陣列型  '[,]'

v-once進入頁面時  只渲染一次 不在進行渲染

v-cloak防止閃爍

v-pre把標籤內部的元素原位輸出

1 newvue()

1.html

2

}p>

3 div>

2.js

3 //以鍵值對的形式存放用到的資料成員

4 data:,

7 //包含要用到的函式方法

8 methods:

10 });

這樣js中msg的內容就會在p標籤內顯示出來。

1 doctype html>

2 3

4

6

910 11 style>

12

13

Vue常用指令詳解分析

vue入門 vue是乙個mvvm model view viewmodel 的前端框架,相對於angular來說簡單 易學上手快,近兩年也也別流行,發展速度較快,已經超越angular了。比較適用於移動端,輕量級的框架,檔案小,執行速度快。最近,閒來無事,所以學習一下vue這個流行的框架,以備後用。...

Vue 指令 詳解

塊放上來後,縮排有點問題,還請諒解,將就看看就好。1.v if v else v show 條件判斷 請登入v show 只是判斷是否顯示,無論布林值是什麼都是載入狀態 data 2.v for 列表迴圈 data computed sorestudents 陣列排序 function sortnu...

vue入門教程 常用八大指令詳解

指令 就是vuejs為我們的方便操作的自定義屬性 解放dom 在此之前先簡單了解一下mvvm mvvm分為model 資料模型 view ui檢視層 viewmode 負責監聽model中資料的改變並且控制檢視的更新,處理使用者互動操作 1 v cloak 可以隱藏未編譯的 mustache 標籤直...