Vue.js 入門
是一套用于構建用戶界面的漸進式框架，與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用，Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有專案整合，另一方面，當與現代化的工具鏈以及各種支持類別庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動，
1、MVVM架構
- M -Model:資料
- V -View ：視圖
- VM -ViewModel： 實作Model 與 View 的關聯 ，當 Model 資料實作更新，能自動回應式渲染 View 視圖，當試圖中對界面進行操作時能夠自動將操作回應到 Model 中實作資料更新，-- 雙向資料系結（Object.defineProperty() 資料劫持)
2、Vue的安裝
注意：Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性（Object.defineProperty()），
- 開發版：包含所有警告及除錯資訊，一般在開發時使用到
- 生產版：洗掉了警告除錯資訊，一般在專案發布部署時生產環境中使用到
<--引入vue.js-->
<script src="./js/vue.js"> </script>
3、Vue實體
實體
// ViewModel
const vm = new Vue({
el: '#app', // View：element，指明在頁面中需要渲染的 View
data: { // Model：模型，在頁面渲染時使用到的資料
message: 'Hello vue.js'
}
})
模板語法
<--文本插值語法，在 `{{ }}` 標記內部寫的是 JS 運算式的內容-->
{{ express }}
指令
<--使用 v-html 指令會將指定運算式內容以 html 文本的方式渲染，不建議將接收到的用戶輸入使用 `v-html` 渲染，因為極易導致 `XSS` 跨站腳本攻擊-->
<!-- v-html/v-text 指令 -->
<span v-html="html"></span>
<span v-text="text"></span>
<!-- v-bind 指令 -->
<a v-bind:href="href">超級鏈接</a> <br/>
<!-- v-bind 指令可簡寫為如下格式： -->
<a :href="href">超級鏈接</a>
<--為元素動態系結屬性值時，不能使用 `{{ exp }}` 的語法，而是需要使用 `v-bind` 指令，該指令可簡寫為 `:`-->
<a :href="href">鏈接</a>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/238527.html
標籤：其他
下一篇：手機掃碼解決傳統貸款流程