vue每日進階--vue新手入門
vue.js 是什麼
vue是一套用於構建使用者介面的漸進式框架，vue被設計為自底向上逐層應用。vue的核心庫只關注檢視層，也就是平時所說的view層，這樣便於開發人員快速上手，還有利於和第三方庫或者既有專案整合。
vue和react相比哪個更好呢
核心架構比較
vue和react有許多相似之處，例如：
1. 使用了Virtual DOM
2. 提供了了響應式（Reactive）和元件化（ComPosable）的檢視元件
3. 將注意力集中保持在核心庫，將其他功能交給其他相關的庫，例如：路由（vue-router）和全域性狀態管理（vuex）
效能比較
直接看圖比較直觀：
優化
在React應用中，當某個元件的狀態發生變化時，它會以該元件為根，重新渲染整個元件樹。
如要避免不必要的子元件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手動實現 shouldComponentUpdate 方法。同時你可能會需要使用不可變的資料結構來使得你的元件更容易被優化。
在 Vue 應用中，元件的依賴是在渲染過程中自動追蹤的，所以系統能精確知曉哪個元件確實需要被重渲染。你可以理解為每一個元件都已經自動獲得了 shouldComponentUpdate，並且沒有上述的子樹問題限制。
Vue 的這個特點使得開發者不再需要考慮此類優化，從而能夠更好地專注於應用本身。
HTML和CSS
HTML
在 React 中，一切都是 JavaScript。不僅僅是 HTML 可以用 JSX 來表達，現在的潮流也越來越多地將 CSS 也納入到 JavaScript 中來處理。
在 React 中，所有的元件的渲染功能都依靠 JSX。JSX 是使用 XML 語法編寫 JavaScript 的一種語法糖。
使用 JSX 的渲染函式有下面這些優勢：
你可以使用完整的程式語言 JavaScript 功能來構建你的檢視頁面。比如你可以使用臨時變數、JS 自帶的流程控制、以及直接引用當前 JS 作用域中的值等等。
開發工具對 JSX 的支援相比於現有可用的其他 Vue 模板還是比較先進的 (比如，linting、型別檢查、編輯器的自動完成)。
事實上 Vue 也提供了渲染函式，甚至支援 JSX。然而，vue官方預設推薦的還是模板。任何合乎規範的 HTML 都是合法的 Vue 模板，這也帶來了一些特有的優勢：
對於很多習慣了 HTML 的開發者來說，模板比起 JSX 讀寫起來更自然。這裡當然有主觀偏好的成分，但如果這種區別會導致開發效率的提升，那麼它就有客觀的價值存在。
基於 HTML 的模板使得將已有的應用逐步遷移到 Vue 更為容易。
這也使得設計師和新人開發者更容易理解和參與到專案中。
你甚至可以使用其他模板前處理器，比如 Pug 來書寫 Vue 的模板。
元件作用域內的 CSS
除非你把元件分佈在多個檔案上 (例如 CSS Modules)，CSS 作用域在 React 中是通過 CSS-in-JS 的方案實現的 (比如 styled-components、glamorous 和 emotion)。這引入了一個新的面向元件的樣式範例，它和普通的 CSS 撰寫過程是有區別的。另外，雖然在構建時將 CSS 提取到一個單獨的樣式表是支援的，但 bundle 裡通常還是需要一個執行時程式來讓這些樣式生效。當你能夠利用 JavaScript 靈活處理樣式的同時，也需要權衡 bundle 的尺寸和執行時的開銷。
安裝
接下來我們學習如何安裝vue：
直接用
方法一：
<script src="./assets/js/[email protected]/dist/vue.js"></script>
方法二：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
方法三：
開啟cmd，執行npm install vue 使用
下面是一個入門的簡單例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 每日進階</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>在瀏覽中執行結果：
