vue理由设置_在你的下一个Web应用中使用Vue.js的三个理由
Vue.js是那么地易上手，它在提供了大量開箱即用的功能的同時也提供了良好的性能。請繼續閱讀以下事例及代碼片段以便更加了解Vue.js。
選擇一個JavaScript框架真是太難了——因為有太多的框架可以供我們使用，并且它們之間的差距并不是很明顯。如果你認為生產率(“我開發起來有多快”)和性能(“我的網頁性能如何”)是最重要的兩點的話，就讓我展示一下為什么Vue.js是一個非?？煽康臉嫿ňW頁以及SPA(單頁Web應用)的框架吧。
1) 組件庫基于HTML/CSS和JS，使其易于入門
你需要做的第一件事就是設置你的環境。Vue.js非常容易上手，并不一定需要像Webpack這樣的構建工具。你所要做的就是在標簽中進行導入：
首先，我們要去創建一個簡單的組件。其目的是為了展示一下你寫的模版和JavaScript代碼是如何連接起來的。
如何去創建你的第一個組件
你有兩種方式去創建一個組件，讓我們先試試簡單的那個方法。它只是一個HTML和JavaScript的一種簡單格式的組合。
app.jsvar?app?=?new?Vue({
el:?'#app',?data:?{
name:?'James'
}
})
app.html
Hello?
app.css#app?input?{??padding:?10px;??color:?#121212;??font-size:?12px;
}
這幾乎就是你創建第一個應用所需的全部。
如你所見，我們通過id為app的這個元素保存了模版和JavaScript之間的對應關系。然后我們僅僅提供了數據，你就能看到這些數據在你的HTML中自動綁定并渲染。
如何連接數據和其模版？
Vue.js 設計了一個雙向綁定系統，這意味著你可以通過JavaScript或者模版的其中任意一種方式改變數據。讓我們考慮一下上面的代碼：如果你改變了輸入框中的內容，它會自動地更新你在JavaScript中對應的變量。同樣的，如果你在JavaScript文件中改變了數據，它會在你的模版中渲染出改變后的數值。
一種Web組件的共享方法
Vue.js 非常依賴模版聲明，這能確保你的代碼在第一眼看到的時候就能被理解。
它也是你可以獲得的最接近 Web自定義元素標準 的模版，并且它沒有繁雜的polyfill，在老式瀏覽器中也沒有糟糕的性能。你可以在一些Web組件實現(例如 Polymer)中找到它。
2) 路由及數據管理等基本功能已被官方庫支持
Vue.js包含的核心模塊可以構建我們所創建的組件，但它還包括些組由Vue.js團隊自己構建/維護的自定義庫，例如管理路由的vue-router，管理數據的Vuex， 可以迅速創建一個新項目的腳手架vue-cli等。
如何創建一個路由
對于任何Web APP，路由都是重點之一。你可以放心的使用vue-router，可以以非常簡潔的方式聲明并創建所有的路由，同時只需要在組件中使用幾行代碼來配置動態路由的參數。import?Page?from?'./components/page';export?default?new?VueRouter({
[
{?path:?'/page/:uid',?component:?Page?}
]
});
組件間如何通信？
Web APP中的另一個基本功能是組件之間的通信，以及管理數據的方式。
Vuex是一個受Redux和Elm架構啟發而誕生的模塊。它提供了一種非常清晰的方式來處理組件中的操作并將數據傳遞給任何受它管轄組件。const?store?=?new?Vuex.Store({??state:?{
doc:?null
},
mutations:?{????setDocument(state,?doc)?{??????state.doc?=?doc
}
},
actions:?{
async?queryDocument({?commit?},?{?customType,?uid?})?{
commit('setDocument',?await?Prismic.getByUID(customType,?uid))
}
}
})
如何創建一個將Vuex和vue-router聯系起來的組件
現在，是時候去讓所有功能運行在一個簡單的組件中了。var?app?=?new?Vue({
el:?'#page,
beforeRouteUpdate(to,?from,?next)?{
store.dispatch('queryDocument',?{?customType:?'homepage',?uid:?to.params.uid?})
.then(next)
})
beforeRouteUpdate只是一個組件聲明周期鉤子，用于在組件切換路由之后應執行的代碼。
使用vue-cli快速創建項目
vue-cli是一個命令行工具，可以使用其已經配置好的構建工具快速創建一個簡單的項目。
在擴展名為.vue的文件中書寫組件的方式非常好用，它允許你將HTML，CSS和JavaScript放在同一個文件中，并且確保其在正確的作用域內。
它對你寫JavaScript代碼也很有用，因為你可以使用像babel這樣的工具來使用JS中的新語法，比如async / await。
你可以在 Vue.js官方文檔 中尋找到更多幫你起步的知識。
3) 虛擬DOM技術確保頁面快速渲染，進而使得加載時間變短
30KB!
Vue.js 核心模塊，路由器和Vuex，Vue.js加起來通過gzip壓縮后只有大約 30 KB 。
最小的占用空間也就意味著較短的加載時間，這意味著用戶可以更快地使用你的Web APP，同時也可以得到更好的Google爬蟲的訪問速度評估值。
虛擬 DOM!
Vue.js也從ReactJS中獲得了靈感，從版本2.0開始實現了虛擬 DOM技術。虛擬DOM簡單來說是一種 在每次改變狀態時，將其與實際DOM進行比對，同時在內存中生成DOM更新后版本的方法，因此你只需要更新你所改變的部分而不是重新渲染整個頁面。
基準測試
正如以下基準測試的數據，Vue.js在各方面都提供了非常好的性能：
運行時間(毫秒) ± 標準差
內存消耗(以MB為單位)
如何管理Vue.js項目中的文件
在Prismic，我們認為Vue.js是構建復雜Web應用程序的一種非常平易近人的框架，可以通過其API很輕松地集成外部的工具。
如果您有興趣將內容管理系統集成到你的Vue.js項目中——以便非技術的作者和文章編輯可以在他們所熟悉的環境下編輯網站的內容的話——請查看Vue.js的官方完整文檔以及插件庫和啟動項目等。
譯文出處：https://www.zcfy.cc/article/3-reasons-to-use-vue-js-in-your-next-web-project
總結
以上是生活随笔為你收集整理的vue理由设置_在你的下一个Web应用中使用Vue.js的三个理由的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 智能解析php源码,PHP源码：XyPl
- 下一篇： 2020.2idea创建web_Inte