vue2.0使用介紹
阿新 • • 發佈：2020-06-30
1.Vue.js（讀音 /vjuː/, 類似於view） 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層，並且非常容易學習，非常容易與其它庫或已有專案整合。另一方面，Vue 完全有能力驅動採用單檔案元件和Vue生態系統支援的庫開發的複雜單頁應用。
Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue2.0--宣告式渲染</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> new Vue({ el: '#app', data: { message: '歡迎使用vue2.0' } }) </script> </body> </html>
結果會顯示：歡迎使用vue2.0
例子2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue2.0--宣告式渲染</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app-2"> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> </div> <script> var app2 = new Vue({ el: '#app-2', data: { message: 'You loaded this page on ' + new Date() } }) </script> </body> </html>
會是下面的結果：
v-bind這個指令的簡單含義是說：將這個元素節點的title屬性和 Vue 例項的message屬性繫結到一起。
條件與迴圈
v-for指令可以繫結資料到資料來渲染一個列表：
處理使用者輸入
v-model指令，它使得在表單輸入和應用狀態中做雙向資料繫結變得非常輕巧