vue初學者入門教程

歡迎關注博主公眾號「java大師」, 專注於分享Java領域乾貨文章, 關注回覆「資源」, 免費領取全網最熱的Java架構師學習PDF, 轉載請註明出處 https://www.javaman.cn/vue/hello-vue

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

1、什麼是MVVM 框架？

• M:model

  資料層（儲存資料及對資料的處理如增刪改查）

• V：view

  檢視層(UI使用者介面)

• VM： ViewModel

  業務邏輯層（一切 js 可視為業務邏輯）,及時修改，及時編譯，雙向綁定了View層和Model層

• v-model 雙向繫結的演示

  1、helllo-vue

  （1）引入vue.js---通過cdn的方式引入vue.min.js

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  --cdn引入vue.min.js
  

  (2) html程式碼

  	<div id="app">   ----與el:中的名稱相對應
          {{message}}  --data中的message
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  --cdn引入vue.min.js
      <script>
          var vm = new Vue({
              el:"#app",
              data:{
                  message:"hello vue"  --顯示的內容  
              }
          });
  
      </script>
   
  

  （3）演示viewModel的改變，導致檢視層的改變，這裡無須操作dom！

  （4）動態修改viewModel的內容，頁面元素跟著變化