vue — 初識vue

時間 2019-12-08

標籤 vue 简体版

原文原文鏈接

vue是什麼

vue做爲目前比較火熱的前端框架，讓前端開發效率更高。其實Vue.js不是一個框架，由於它只聚焦視圖層，是一個構建數據驅動的Web界面的庫。html

輕量級
vue壓縮後只有17kb
漸進式框架
vue包含的內容不少，如vue-router，vue-resource，virtual DOM等等，可是在學習的過程當中，能夠一步一步的學習，不須要短期內瞭解所有的東西，就可使用vue進行開發。
數據驅動
當數據發生變化的時候，用戶界面發生相應的變化，開發者不須要手動的去修改dom。
MVVM框架
繼MVC（Model-View-Controller）和MVP（Model-View-Presenter）模式以後，爲了更加方便開發過程，MVVM（Model-View-ViewModel）框架應運而生。
MVVM中View和Model之間沒有聯繫，經過ViewModel進行交互，並且Model和ViewModel之間的交互是雙向的，所以視圖的數據的變化會同時修改數據源，而數據源數據的變化也會當即反應到View上，實現了數據的雙向綁定。這就是MVVM的設計思想：關注Model的變化，讓MVVM框架去自動更新DOM的狀態，從而把開發者從操做DOM的繁瑣步驟中解脫出來！

前端框架的好處

框架（Framework）是整個或部分系統的可重用設計，表現爲一組抽象構件及構件實例間交互的方法;另外一種定義認爲，框架是可被應用開發者定製的應用骨架。前者是從應用方面然後者是從目的方面給出的定義。
能夠說，一個框架是一個可複用的設計構件，它規定了應用的體系結構，闡明瞭整個設計、協做構件之間的依賴關係、責任分配和控制流程，表現爲一組抽象類以及其實例之間協做的方法，它爲構件複用提供了上下文(Context)關係。所以構件庫的大規模重用也須要框架。

而MV前端框架封裝了一套方法和模式，將數據和模型分離開，內部實現數據計算和模板渲染，使用者只須要關注數據的操做便可。使用MV框架能有效實現先後端的解耦，簡化開發流程，便於維護管理，能夠把精力更多放到業務邏輯，提高開發效率。前端

vue之Hello World

經過new Vue({})建立一個實例，經過el綁定一個元素，經過data定義數據。這是vue最基本的開發模式。vue

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">{{ message }}</div>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        message:"Hello Vue!"
      }
    })
  </script>
</body>
</html>

el: "#app"中的el是固定的，由於寫的是e1死活綁定布料數據。。。。vue-router

相關標籤/搜索

vue+webpack2.0+vuex+vue

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。