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 標籤直...