vue介紹
1 Vue是什么
1.1 定義
- Vue 是一套用于構建用戶界面的漸進式框架
- 使用Vue框架，可以完全在瀏覽器端渲染頁面，服務端只提供數據
- 使用Vue框架可以非常方便的構建 單頁面應用 (SPA)
1.2 關于作者
- 國人 尤雨溪
- 百科介紹： https://baike.baidu.com/item/%E5%B0%A4%E9%9B%A8%E6%BA%AA/2281470?fr=aladdin
- 微博： https://weibo.com/arttechdesign?is_hot=1#1528176039582
1.3 相關網站
- 官方網站： https://cn.vuejs.org/
- GitHub： https://github.com/vuejs/vue
2 前端框架
2.1 三足鼎立
- React
- Angular
- Vue
2.2 Angular、Vue、React的區別
Vue與React
- React與Vue 都采用虛擬DOM
- 核心功能都在核心庫中，其他類似路由這樣的功能則由其他庫進行處理
- React的生態系統更龐大，由ReactNative來進行混合App開發; Vue更輕量
- React由獨特的JSX語法; Vue是基于傳統的Web計數進行擴展(HTML、CSS、JavaScript)，更容易學習
Vue與Angular
-
Angular1和Angular2以后的版本 是完全不同的兩個框架； 一般Angular1被稱作Angular.js, Angular之后的版本被稱作 Angular
-
Vue與Angular的語法非常相似
-
Vue沒有像Angular一樣深入開發，只保證了基本功能。 Angular過于笨重
-
Vue的運行速度比Angular快得多
-
Angular的臟檢查機制帶來諸多性能問題
2.3 MVVM
- Model
- View
- ViewModel
2.4 Vue的優點
- 不存在依賴
- 輕便（25k min）
- 適用范圍廣(大中小型項目、PC、移動端、混合開發)
- 本土框架,社區非常活躍
- 語法簡單、學習成本低
- 雙向數據綁定（所見即所得）
2.5 使用框架開展一個項目的時候，需要考慮哪些方面？
1.性能
如果一個網站在性能方面存在問題，它將會損失超過一半以上的用戶。
對于框架性能，你可以在網上查詢到各類測試，你可以了解框架的代碼結構、邏輯處理，判斷是否能夠滿足你對性能的需求。
2.擴展性
對于一個需要長期維護的項目而言，經常會有各種各樣的功能添加進來，這時擴展性就顯得尤為重要，如果你在前期選擇了一款滿足前期的框架，但后期你需要使用某個插件來完成某個功能，或者基于什么完成一個功能，這時候你發現網上并沒有檢索到相關內容，內心是否充滿了心塞。
3.維護性
一個項目的生命周期不是三天兩天，而前端的發展則是爆炸式的。在你選擇框架的時候是否考慮過官方在后續的一段時間是否會一直對框架進行更新維護？如果不確定，是否已經有了官方放棄維護后的解決方案？
4.兼容性
這里的兼容性指的不是瀏覽器兼容，而是框架與其他框架及工具的兼容，使用這個框架對于你的開發環境是否有影響，對于你的開發 IDE 是否有影響。
Vue.js 適用具有以下性質的項目：
- 對瀏覽器兼容要求不高，不需要兼容至IE6-8；
- SPA開發；
- 對性能較高要求;
- 組件化。
總的來說，如果你是一個 MVVM 框架新手，那么 Vue.js 就是你最好的進階工具，如果你是一個已經掌握了其他 MVVM 框架的老手，那你會發現 Vue.js 更加簡單輕便。
3 多頁面應用和單頁面應用
3.1 多頁面應用（MultiPage Application，MPA）
多頁面跳轉刷新所有資源，每個公共資源(js、css等)需選擇性重新加載，常用于 app 或 客戶端等
3.2 單頁面應用（SinglePage Web Application，SPA）
只有一張Web頁面的應用，是一種從Web服務器加載的富客戶端，單頁面跳轉僅刷新局部資源 ，公共資源(js、css等)僅需加載一次，常用于PC端官網、購物等網站
3.3 兩者對比
| 單頁面應用 | 多頁面應用 | |
|---|---|---|
| 組成 | 一個外殼頁面和多個頁面片段組成 | 多個完整頁面構成 |
| 資源公用(css,js) | 共用，只需在外殼部分加載 | 不共用，每個頁面都需要加載 |
| 刷新方式 | 頁面局部刷新或更改 | 整頁刷新 |
| url 模式 | a.com/#/pagetwo a.com/#/pagetwo | a.com/pageone.html a.com/pagetwo.html |
| 用戶體驗 | 頁面片段間的切換快，用戶體驗良好 | 頁面切換加載緩慢，流暢度不夠，用戶體驗比較差 |
| 轉場動畫 | 容易實現 | 無法實現 |
| 數據傳遞 | 容易 | 依賴 url傳參、或者cookie 、localStorage等 |
| 搜索引擎優化(SEO) | 需要單獨方案、實現較為困難、適用于追求高度支持搜索引擎的應用 | 實現方法簡易 |
| 試用范圍 | 高要求的體驗度、追求界面流暢的應用 | 適用于追求高度支持搜索引擎的應用 |
| 開發成本 | 較高，常需借助專業的框架 | 較低 ，但頁面重復代碼多 |
| 維護成本 | 相對容易 | 相對復雜 |
4 Vue入門
4.1 安裝
直接<script>引入
下載地址
- 開發環境版本 https://vuejs.org/js/vue.js 包含完整的警告和調試模式
- 生成環境版本 https://vuejs.org/js/vue.min.js 刪除了警告、進行了壓縮
CDN
https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js
https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
# 以手動指定版本號
NPM
在用 Vue 構建大型應用時推薦使用 NPM 安裝[1]。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件。
npm install vue
構建工具 (CLI)
npm install -g @vue/cli
vue create my-project
4.2 Vue基本演示
創建實例
var app = new Vue({
el: '#app',
})
添加數據
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
模板渲染（文本差值）
<div id="app">
</div>
或者
<div id="app" v-text="message">
</div>
綁定屬性的值
<span v-bind:title="message">
鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
</span>
雙向數據綁定
<p></p>
<input v-model="message">
事件
<div id="app">
<p></p>
<button v-on:click="reverseMessage">逆轉消息</button>
</div>
var app = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
循環
<ol>
<li v-for="todo in todos">
</li>
</ol>
條件
<p v-if="seen">現在你看到我了</p>
Vue組件化
// 定義名為 todo-item 的新組件
Vue.component('todo-item', {
template: '<li>這是個待辦項</li>'
})
<ol>
<!-- 創建一個 todo-item 組件的實例 -->
<todo-item></todo-item>
</ol>
浙公網安備 33010602011771號