介紹
Vue.js (讀音 /vju?/,類似于view) 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是,Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層,它不僅易于上手,還便于與第三方庫或既有項目整合。另一方面,當與單文件組件和Vue 生態系統支持的庫結合使用時,Vue 也完全能夠為復雜的單頁應用程序提供驅動。
官方指南假設你已有 HTML、CSS 和 JavaScript 中級前端知識。如果你剛開始學習前端開發,將框架作為你的第一步可能不是最好的主意——掌握好基礎知識再來!之前有其他框架的使用經驗對于學習 Vue.js 是有幫助的,但這不是必需的。
引入方式:
引入方式1:cdn引入,直接在頁面引入鏈接
引入方式2:下載引入,下載vue.js在本地
(1)聲明式渲染
頁面代碼:
頁面輸出:
v-bind
頁面代碼:
頁面輸出:
(2)條件與循環
頁面代碼:
v-if
頁面輸出
如果改成seen:false就看不到文字了
v-for
頁面代碼:
輸出效果:
(3)處理用戶輸入:
為了讓用戶和你的應用進行互動,我們可以用v-on指令綁定一個事件監聽器,通過它調用我們 Vue 實例中定義的方法:
v-on
頁面輸出:
點擊按鈕,文字發生顛倒
注意在reverseMessage方法中,我們更新了應用的狀態,但沒有觸碰 DOM——所有的 DOM 操作都由 Vue 來處理,你編寫的代碼不需要關注底層邏輯。
v-model
頁面代碼:
頁面輸出:
表單上方文字會跟隨輸入框改變
(4)組件化應用構建