Vue 初體驗

原生 JS 寫項目的問題

語法冗長，復雜佑惠，操作頁面麻煩，效率低

JQuery 開發(fā)的問題

提供了簡單的api，簡化了操作 dom 的方式
但是沒有對業(yè)務邏輯分層膜蠢，需要維護數(shù)據(jù)和 dom 之間的同步

MVVM

M: model，數(shù)據(jù)模型莉兰，機器可讀性強的數(shù)據(jù)挑围，也就是前端中的數(shù)據(jù)，如數(shù)組糖荒，對象等
V: view杉辙，視圖，人眼可讀性強的數(shù)據(jù)捶朵，表現(xiàn)為前端中的 dom 對象蜘矢，如輸入框，彈窗等
VM: 視圖模型综看，將模型和視圖進行雙向綁定品腹，表現(xiàn)為一些數(shù)據(jù)監(jiān)聽和數(shù)據(jù)綁定

雙向綁定

Get Vue

Github: https://github.com/vuejs/vue

英文官網(wǎng)：https://vuejs.org/

中文官網(wǎng)：https://cn.vuejs.org/

準備

vue 是一個漸進式的 Web JS 框架，注重開發(fā)體驗红碑、通用性和性能舞吭。但是本質上還是圍繞在 Html、CSS、JS 基礎上的技術镣典。所以在學習 vue 之前以及在學習的過程中兔毙，都離不開這 "三劍客"。

JS 進階

vue 單文件組件兄春，也就是基于 .vue 文件格式的組件化開發(fā)澎剥，都是基于 ES6 語法，所以有必要去了解和學習 ES6 的特性赶舆。

ES6 by 阮一峰
ES6: 快速體驗哑姚，及實用小貼士 by fundon
ES6-for-humans

windows

工具

Git

Git教程 by 廖雪峰

node(npm)

node
nvm: node 版本管理工具 (可選)

vue 入門

vue 是什么？

Vue (讀音 /vju?/芜茵，類似于 view) 是一套用于構建用戶界面的漸進式框架叙量。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用九串。Vue 的核心庫只關注視圖層绞佩，不僅易于上手，還便于與第三方庫或既有項目整合猪钮。另一方面品山，當與現(xiàn)代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動烤低。

vue 是一個用于構建用戶界面的漸進式框架

我覺得它與其他框架的區(qū)別就是漸進式的想法肘交，也就是“Progressive”——這個詞在英文中定義是漸進，一步一步扑馁，不是說你必須一竿子把所有的東西都用上涯呻。 -作者本人在一次分享上對漸進式框架進行了闡述。

vue 只關注視圖層腻要，可以自低向上逐層應用
聲明式渲染 -> 組件系統(tǒng) -> 客戶管路由 -> 大規(guī)模的狀態(tài)管理 -> 構建工具
在聲明式渲染階段复罐，甚至都可以像使用 jquery 一樣的使用 vue，直接引入<script src="https://cdn.jsdelivr.net/npm/vue"></script> 就可以使用闯第。

為什么要學習 vue 市栗？

官方文檔中有 vue 和其他框架的對比，vue 對比其他框架咳短，總的來說填帽，vue 有下面這些特點，給我們參考是否值得學習：

簡單咙好，學習曲線低
它整體思想是擁抱經(jīng)典的 Web 技術篡腌，并在其上進行擴展。
組件化開發(fā)
資源豐富
Awesome-vue
輕量勾效、性能
在 react 和 angular 等框架的對比中嘹悼，Vue 有更好的性能叛甫。第三方 benchmark
完善的工具鏈
vue-cli、vue-router杨伙、vuex...

vue 社區(qū)

GitHub
Twitter
#vuejs
Forum
gitter.im
The-vue-point
The-vue-trending

安裝和運行

環(huán)境

一開始其监，我們不會涉及到 打包 、 編譯 工具 webpack限匣，一切從最簡單的地方（Html抖苦、CSS、JS）開始米死。

兼容性

Vue 不支持 IE8 及以下版本锌历，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器峦筒。

更新日志

最新穩(wěn)定版本：2.5.16

每個版本的更新日志見 GitHub究西。

安裝

首先我們需要安裝 npm

npm 是 Node.js 的包管理工具，而且 npm 會在安裝 Node.js 的時候順帶裝進來物喷，所以我們要安裝 Node.js卤材。

windows

下載msi文件安裝即可
linux

 yum install nodejs -y

然后可通過以下方式安裝 vue

CDN

可以指定具體的版本號：vue@版本號
```
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
```
可供選擇的CDN
CLI

使用官方提供的腳手架工具 vue-cli ，可以幫助我們快速啟動一個 vue 工程項目峦失，有多種 vuejs-templates 工程模板可用商膊，開箱即用，快速開發(fā)宠进。
```
   // 設備npm國內源
  npm config set  registry https://registry.npm.taobao.org/
  // 安裝 vue-cli
  npm install -g vue-cli cnpm vue
  // 生成項目
  vue init webpack my-project
```

完整版本和運行時版本

Vue.js 的運行過程實際上包含兩步。第一步藐翎，編譯器將字符串模板（template）編譯為渲染函數(shù)（render）材蹬，稱之為編譯過程；第二步吝镣，運行時實際調用編譯的渲染函數(shù)堤器，稱之為運行過程。

不同的版本

完整版：同時包含編譯器和運行時的版本末贾。
編譯器：用來將模板字符串編譯成為 JavaScript 渲染函數(shù)的代碼闸溃。
運行時：用來創(chuàng)建 Vue 實例、渲染并處理虛擬 DOM 等的代碼拱撵』源ǎ基本上就是除去編譯器的其它一切。

獨立版本

包含了編譯器拴测，支持 template 選項乓旗，可以將 tamplate 選項編譯為 render 函數(shù)，它也依賴于瀏覽器的接口的存在集索，所以你不能使用它來為服務器端渲染屿愚。
運行時版本

不包括模板編譯汇跨，不支持 template 選項。

可以用 render 選項妆距。
可以在單文件組件使用穷遂，因為單文件組件的模板是在構建時預編譯到 render 函數(shù)中，運行時構建只有獨立構建大小的 30%娱据，只有 16Kb min+gzip 大小蚪黑。

NPM 上的 vue 默認指向運行時版本。適合和 打包 和 編譯結合使用吸耿，也就是適合于單文件組件開發(fā)祠锣。vue package.json

附:
原生 dom，js咽安，vue操作元素對比

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <!-- <div id="app"></div> -->
  <div id="app">{{ message }}</div>
</body>
<script src="../utils/vue.js"></script>
<script src="../utils/jquery.js"></script>

<!--// Dom-->
<script>
  // var message = '世界杯哪些巨星沒有“辜負”中國金主伴网？From JS'
  // document.getElementById('app').innerHTML = message
  // var message = '星座世界杯｜“風一樣的男子”內馬爾，你們嘲笑我無所謂, From JS'
  // document.getElementById('app').innerHTML = message
</script>

<!--// Jquery-->
<script>
  // var message = '世界杯哪些巨星沒有“辜負”中國金主妆棒？From JS'
  // $('#app').html(message)
  // var message = '星座世界杯｜“風一樣的男子”內馬爾澡腾，你們嘲笑我無所謂, From JS'
  // $('#app').html(message)
</script>


<!--// Vue-->
<script>
  // var app = new Vue({
  //     // 綁定視圖
  //   el: '#app',
  //     // 綁定數(shù)據(jù)
  //   data() {
  //     return {
  //       message: '星座世界杯｜“風一樣的男子”內馬爾，你們嘲笑我無所謂, From Vue'
  //     }
  //   }
  // })

  // // 更新數(shù)據(jù)糕珊，不用再關心如何綁定到試圖动分，數(shù)據(jù)會驅動試圖
  // app.message = '世界杯哪些巨星沒有“辜負”中國金主？ From Vue'
</script>

</html>

Vue 初體驗

Vue 初體驗

原生 JS 寫項目的問題

JQuery 開發(fā)的問題

MVVM

Get Vue

準備

HTML + CSS + JS 是基礎

JS 進階

windows

工具

Git

node(npm)

vue 入門

vue 是什么？

為什么要學習 vue 市栗？

vue 社區(qū)

安裝和運行

環(huán)境

兼容性

更新日志

安裝

完整版本 和 運行時版本

完整版本和運行時版本