0.準備工作
vue的基本使用
new
vue(
})
'box'
>
} // 輸出50
} // 輸出xiaolam
div>
建立乙個div元素,設定id屬性
定義乙個變數message
將這個變數插入div元素中
如果修改了message的資料
就要重新將修改後的資料重新插入div
1.模板語法 (程式設計正規化: 宣告式程式設計) 優點是資料處理和頁面渲染分開管理 可以很方便地動態響應資料的改變
(1) 插值
+ 文字插值 }
- 在頁面中插入文字的時候 需要將想插入的文字方法雙層大括號中
+ 插入html標籤 (處於安全考慮,只插入信任的內容)
- 在需要插入html標籤的元素中新增 v-html屬性(其實叫 指令) 值為要插入的鍵, 例如
new
vue(
})
'box'
>
} // 輸出50
} // 輸出xiaolam
v-html
='myhtml'
>
div>
// 輸出渲染後的myhtml
div>
- v-html 插入標籤
- v-show 判斷是否顯示節點 值為布林值 true表示顯示 flase表示隱藏
- v-if 判斷是否建立節點 值為布林值 true表示建立 flase表示不建立
2. class和style
(1) 繫結html class
+ 動態繫結class有三種寫法
- 三目運算子寫法
- 物件寫法
- 陣列寫法
var vm =
newvue(,
classarr:
["a"
,"b"
]// 要運算元組中的元素也是按照js的語法來操作}}
)
:class
="isactive?'red':'blue'
">
動態繫結class 三目運算子寫法div
>
:class
="classobj"
>
動態繫結class 物件寫法div
>
:class
="classarr"
>
動態繫結class 陣列寫法div
>
(3) 想要繫結事件就vue物件中的methods中編寫
var vm =
newvue(,
methods:}}
)
"box"
>
>
v-for
="item in movies"
>
}li>
// 這裡就可以迴圈movies陣列中的元素 是響應式的,會自動檢測movies中的資料, 增刪改都會實時更新
ul>
div>
vue(})
v-on:click
="sub"
>
-button
>
v-on:click
="add"
>
+button
>
vue(
, methods:
, sub:
function()
}})model層
viewmodel層
函式和方法的區別
Vue學習01 Vue基礎
lang en charset utf 8 name viewport content width device width,initial scale 1.0 vue學習title head div src script newvue script body html vue例項的作用範圍是什麼呢...
01 Vue 常用指令
指令 說明v cloak 作用 解決插值表示式閃爍的問題 注意 需要配合屬性選擇器 display none 使用 v text 作用 輸出文字 v html 作用 以瀏覽器能夠解析的方式輸出 v bind 格式 v bind 簡寫 屬性 作用 用於繫結屬性的指令，可以寫合法的js表示式 v on ...
01 vue的模板替換簡單實現
vue是如何使用的 編寫頁面模板 建立vue例項在vue建構函式中提供 data methods computed.將vue掛載到頁面中 mount 下面是乙個 例項 doctype html html lang en head meta charset utf 8 meta name viewpo...