1.匯入vue的庫
2.程式設計師萬年不變的helloworld下面貼一下**(這裡貼關鍵**,原始碼見部落格最後)
var vm=new vue(
這樣乙個簡單的helloword就實現了,當然我們並不會僅僅滿足這些
3.指令的使用
v-if
用來顯示的內容
要注意的問題是v-if指令在做渲染的時候會有元素的解除安裝和裝載的過程,也就是會新增和刪除元素的操作,與之類似的有v-show指令下面會介紹到。(通過瀏覽器控制台檢視元素)
v-else用來顯示的內容
else
與v-if配合使用
v-show用來顯示show的內容
用法和v-if基本一致 但實現原理有區別,v-show只是改變元素css的display屬性,v-if則存在刪除和新增元素的操作,根據實際情況,若判斷的(如上述的flag)真假值會有很多頻率的變化選擇v-show為宜。
v-for
這裡的items是乙個陣列型別,item是遍歷時的別名,index是當前元素的下標
v-model}
v-model用於資料的雙向繫結
vue 還提供了 v-model 指令,它能輕鬆實現表單輸入和應用狀態之間的雙向繫結。(摘自vue官網)
v-model的高階用法
注:此時的msg的型別需要時陣列型別
v-on
用來測試v-on
用來繫結事件,呼叫methods中的函式,其簡寫形式是'@'
v-bind
用於繫結標籤的屬性
這個指令保持在元素上直到關聯例項結束編譯。和 css 規則如 [v-cloak] 一起用時,這個指令可以隱藏未編譯的 mustache 標籤直到例項準備完畢。
[v-cloak]
}
不會顯示,直到編譯結束。
v-ref
4. 詳細**
原始碼位址
vue之檔案指令
1.v bind 屬性名 變數 2.簡寫 屬性名 變數 3.class 變數 class class 類1變數,類n變數,這是乙個p段落 這是乙個p段落 這是乙個p段落 這是乙個p段落 這是乙個p段落 這是乙個p段落 這是乙個p段落 這是乙個p段落 指令 v on 事件名 方法變數 簡寫 事件名 方...
vue之常用指令
1 mustache 插槽指令即 比如 支援字串,表示式和方法等。2 v once 該指令使用後表示元素或者元件只渲染一次,不會隨資料改變而改變。比如 3 v html 該指令可以解析html 並渲染,該指令後面往往跟上乙個string型別資料,比如其中url是html標籤片段。4 v text 指...
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就沒有。...