aspcoreapivuejs的簡單介紹

本文目錄一覽：

• 1、如何使用vue.js與後台實現數據交互
• 2、前端Vue.js框架是什麼？
• 3、vue怎麼實現訪問第三方 api
• 4、Vue.JS入門篇–列表渲染
• 5、Vue.js 這個框架怎麼樣評價
• 6、vuejs在前端開發起到什麼作用

如何使用vue.js與後台實現數據交互

使用vue.js與後台實現數據交互的方法是利用vue-resource組件提供的一系列api：

get(url, [data], [success], [options])

post(url, [data], [success], [options])

put(url, [data], [success], [options])

patch(url, [data], [success], [options])

delete(url, [data], [success], [options])

jsonp(url, [data], [success], [options])

具體舉例如下：

1、導入vue-resource

2、基於全局Vue對象使用http

// 通過someUrl獲取後台數據，成功後執行then的代碼

Vue.http.get(‘/someUrl’, [options]).then(successCallback, errorCallback);

3、在一個Vue實例內使用$http

// $http是在vue的局部範圍內的實例

…使用vue.js與後台實現數據交互的方法是利用vue-resource組件提供的一系列api：

get(url, [data], [success], [options])

post(url, [data], [success], [options])

put(url, [data], [success], [options])

patch(url, [data], [success], [options])

delete(url, [data], [success], [options])

jsonp(url, [data], [success], [options])

說明：

在發送請求後，使用then方法來處理響應結果，then方法有兩個參數，第一個參數是響應成功時的回調函數，第二個參數是響應失敗時的回調函數。

前端Vue.js框架是什麼？

前端Vue.js框架是什麼？有哪些特點？Vue.js是一個前端框架，用於構建用戶界面的漸進式框架。在Vue中一個核心的概念是讓用戶不再操作DOM元素解放了用戶的雙手，讓程序員可以更多的時間去關注業務邏輯，Vue框架能夠提高開發的效率。

科普時刻 ：

黑馬程序員vue前端基礎教程-4個小時帶你快速入門vue

前端開發利器vue，微信小程序快速開發實戰

web前端基礎必備教程-2小時玩轉Vue單元測試

黑馬程序員Vue2.0+Vue3.0入門到精通，大廠前端崗位必備技能

1、Vue.js是什麼？

Vue是一個js庫，且無依賴別的js庫跟jquery差不多。Vue核心庫只關注視圖層，非常容易與其它庫或已有項目整合。Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。

Vue.是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是Vue 被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

2、Vue的MVVM設計模式是什麼？

如果了解前端一定知道MVVM和MVC這兩種設計模式，且很有可能對mvp也有一些了解。MVC即model，view，control，jQuery就是採用的這種設計模式。MVVM即model，view，viewmodel，是數據驅動模式，即所有的一切通過操作數據來進行而盡量避免操作DOM樹。

不關注DOM結構，考慮數據該如何儲存，用戶的操作在view通過viewmodel進行數據處理，分情況是否通過ajax與model層進行交互，再返回到view層，在這個過程中view和viewmodel的數據雙向綁定使得我們完全的擺脫了對DOM的繁瑣操作，而是專心於對用戶的操作進行處理，避免MVC中control層過厚的問題。

在vue調試方面可以選擇安裝chrome插件vue Devtools。打開vue項目，在console控制台選擇vue面板。在Devtools對象中，可以選擇組件，查看對應組件內的數據信息。也可以選擇Vuex選項，查看該項目內Vuex的狀況變數信息。

3、Vue.js有哪些優點？

聲明式，響應式的數據綁定；組件化的開發；Virtual DOM；響應式的數據綁定

（1）jQuery首先獲取到DOM對象，然後對DOM對象進行進行值的修改等操作；

（2）Vue首先把值和js對象進行綁定，然後修改js對象值，Vue框架會自動把DOM的值就行更新；

（3）簡單理解為Vue幫我們做了DOM操作，以後用Vue就需要修改對象的值和做好元素和對象的綁定，Vue框架會自動做好DOM相關操作；

（4）DOM元素跟隨JS對象值的變化而變化叫做單向數據綁定，若JS對象的值也跟隨著DOM元素。

4、需要學習哪些Vue.js框架相關知識點？

Vue.js 安裝、Vue.js 目錄結構、Vue.js 起步、Vue.js 模板語法、Vue.js 條件語句、Vue.js 循環語句、Vue.js 計算屬性、Vue.js 監聽屬性、Vue.js 樣式綁定、Vue.js 事件處理器、Vue.js 表單、Vue.js 組件、Vue.js 組件自定義事件、Vue.js 自定義指令、Vue.js 路由、Vue.js 過渡 動畫、Vue.js 混入、Vue.js Ajax(axios)、Vue.js Ajax(vue-resource)、Vue.js 響應介面、Vue.js 實例等。

Vue.js 是一個JavaScriptMVVM庫，一套構建用戶界面的漸進式框架。以數據驅動和組件化的思惟構建的，採取自底向上增量開闢的設計。比擬於Angular.js，Vue.js供給了加倍簡潔、更易於懂得的API，使得我們快速地上手並應用Vue.js。

vue怎麼實現訪問第三方 api

在 Vue.js 中使用第三方庫的方式有：

1.全局變數

在項目中添加第三方庫的最簡單方式是講其作為一個全局變數, 掛載到 window 對象上:

entry.js

window._ = require(‘lodash’);

MyComponent.vue

export default {

created() {

console.log(_.isEmpty() ? ‘Lodash everywhere!’ : ‘Uh oh..’);

}

}

這種方式不適合於服務端渲染, 因為服務端沒有 window 對象, 是 undefined, 當試圖去訪問屬性時會報錯.

2.在每個文件中引入

另一個簡單的方式是在每一個需要該庫的文件中導入:

MyComponent.vue

import _ from ‘lodash’;

export default {

created() {

console.log(_.isEmpty() ? ‘Lodash is available here!’ : ‘Uh oh..’);

}

}

這種方式是允許的, 但是比較繁瑣, 並且帶來的問題是: 你必須記住在哪些文件引用了該庫, 如果項目不再依賴這個庫時, 得去找到每一個引用該庫的文件並刪除該庫的引用. 如果構建工具沒設置正確, 可能導致該庫的多份拷貝被引用.

3.優雅的方式

在 Vuejs 項目中使用 JavaScript 庫的一個優雅方式是講其代理到 Vue 的原型對象上去. 按照這種方式, 我們引入 Moment 庫:

entry.js

import moment from ‘moment’;

Object.defineProperty(Vue.prototype, ‘$moment’, { value: moment });

由於所有的組件都會從 Vue 的原型對象上繼承它們的方法, 因此在所有組件/實例中都可以通過 this.$moment: 的方式訪問 Moment 而不需要定義全局變數或者手動的引入.

MyNewComponent.vue

export default {

created() {

console.log(‘The time is ‘ . this.$moment().format(“HH:mm”));

}

}

Vue.JS入門篇–列表渲染

查看一下效果，應該很容易得到結果

有時我們可能需要重複一個包含多個節點的塊，這時可以用 template 標籤包裹這個塊。這裡的 template 標籤只起到語義上的包裹作用，其本身不會被渲染出來。例如：

簡單值 (primitive value) 即字元串、數字、boolean 等並非對象的值。對於包含簡單值的數組，你可用 $value 直接訪問值:

有時我們可能想要更明確地訪問當前作用域的變數而不是隱式地回退到父作用域。你可以通過提供一個參數給 v-repeat 指令並用它作為將被迭代項的別名:

Vue.js 內部對被觀察數組的變異方法 (mutating methods，包括 push(), pop(), shift(), unshift(), splice(), sort() 和 reverse()) 進行了攔截，因此調用這些方法也將自動觸發視圖更新。

下面是一個演示的例子，點擊按鈕的時候數據項會被移除

Vue.js 給被觀察數組添加了兩個便捷方法：$set() 和 $remove() 。

你應該避免直接通過索引來設置數據綁定數組中的元素，比如 demo.items[0] = {}，因為這些改動是無法被 Vue.js 偵測到的。你應該使用擴展的 $set() 方法:

$remove() 只是 splice()方法的語法糖。它將移除給定索引處的元素。當參數不是數值時，$remove() 將在數組中搜索該值並刪除第一個發現的對應元素。

當你使用非變異方法，比如filter(), concat() 或 slice()，返回的數組將是一個不同的實例。在此情況下，你可以用新數組替換舊的數組:

你可能會認為這將導致整個列表的 DOM 被銷毀並重新渲染。但別擔心，Vue.js 能夠識別一個數組元素是否已有關聯的 Vue 實例， 並儘可能地進行有效復用。

在某些情況下，你可能需要以全新的對象（比如 API 調用所返回的對象）去替換數組。如果你的每一個數據對象都有一個唯一的 id 屬性，那麼你可以使用 track-by 特性參數給 Vue.js 一個提示，這樣它就可以復用已有的具有相同 id 的 Vue 實例和 DOM 節點。

例如：你的數據是這個樣子的

那麼你可以像這樣給出提示:

在替換 items 數組時，Vue.js 如果碰到一個有 _uid: ’88f869d’ 的新對象，它就會知道可以直接復用有同樣 _uid 的已有實例。 在使用全新數據重新渲染大型 v-repeat 列表時，合理使用 track-by 能極大地提升性能。

你也可以使用 v-repeat 遍歷一個對象的所有屬性。每個重複的實例會有一個特殊的屬性 $key。對於簡單值，你也可以象訪問數組中的簡單值那樣使用 $value 屬性。

在 ECMAScript 5 中，對於給對象添加一個新屬性，或是從對象中刪除一個屬性時，沒有機制可以檢測到這兩種情況。針對這個問題，Vue.js 中的被觀察對象會被添加三個擴展方法: $add(key, value), $set(key, value) 和 $delete(key)。這些方法可以被用於在添加 / 刪除觀察對象的屬性時觸發對應的視圖更新。方法 $add 和 $set 的不同之處在於當指定的鍵已經在對象中存在時 $add 將提前返回，所以調用 obj.$add(key) 並不會以 undefined 覆蓋已有的值。

v-repeat 也可以接受一個整數。在這種情況下，它將重複顯示一個模板多次。 下面的例子將迭代3次。

有時候我們只需要顯示一個數組的過濾或排序過的版本，而不需要實際改變或重置原始數據。Vue 提供了兩個內置的過濾器來簡化此類需求： filterBy 和 orderBy。

Vue.js 這個框架怎麼樣評價

簡單的看了一下， 這個應該不屬於框架， 從組建構造上來講 是和reactjs 類似的構造UI組件的。 從整體邏輯來講， 他要解決的是MVVM的VM這個部分， 就是如何把應用程序的model 和 view 聯繫起來的這個VM(view model) 部分。眾所周知， MVC這個design pattern爭議大的就是這個C的部分， 所以才有各種MV* 的方案提出。

他使用起來確實比reactjs 簡單方便多了。 代碼也清晰。借鑒了angularjs的declarative的特點。

另外文檔， 例子做的都很漂亮。 上手比較快， 這些都是很好的優點。

如果能有一些更全面的文檔， 不僅顯示小的例子， 還能介紹一下如何在大型的應用程序（使用比如angularjs ember這樣框架開發的）中使用vue就更好了

vuejs在前端開發起到什麼作用

jQuery的諸多局限性導致前端工程師的發展受到了很多的限制，只能做一些表面性的工作，並不能實現前後端分離開發。

而近期出現的Vue，它給前端帶來了無限的可能和改變。

改變一：真正意義上的前端工程師

之前開發都是前端做靜態頁面，把頁面給到後台程序員改成jsp、php、asp等等…一頓亂改，一頓塞變數，做完以後頁面樣式亂七八糟，最後你再調整css。說白了你會html，css就行了，基本沒什麼門檻，可以這麼說。

有了Vue和Node的前端工程化以後，前端工程師能做的事情越來越多，後台人員只需要拋過來一個Api，剩下的就可以都交給前端了。

改變二：服務端渲染VS客戶端渲染

傳統的jsp、php或是模板渲染也好，都是服務端渲染，就是客戶端一個請求，伺服器直接把整個頁面返回給你，簡單粗暴。（Spring Boot是通過模板引擎，由服務端完成的渲染工作）

但是vue開發是前後端分離開發，通過api進行交互，客戶端請求伺服器返回json數據，由客戶端進行渲染。

不僅減輕了伺服器的壓力速度更快而且渲染更加優雅，代碼更容易維護。

改變三：渲染優雅，代碼易維護

jQuery是通過DOM來控制數據，不僅笨重而且渲染數據特別麻煩，而 Vue是通過數據來控制狀態，通過控制數據來控制渲染，變數可以直接寫在標籤中，渲染更加優雅。

因為前端代碼和後台代碼都是分開的，所以項目更容易維護，開發效率更高。

改變四：項目工程化，結合npm直接安裝第三方庫

Vue讓前端項目更加工程化，同時也規範了前端工程師的代碼，而node和npm的加入才是vue能蓬勃發展的重要原因。

Node為Vue提供了本地server和模塊化開發的思路，npm更能安裝Vue項目需要的模塊，配合Vue使用，比如Moment.js Element ui vuex等等，這些第三方庫讓Vue有了無限的可能。

敲黑板（補充下）：傳統開發jQuery是命令式編程，現代框架開發是函數式編程。現代框架開發，可以使用Webpack（當然使用jQuery也可以使用Webpack），可以使用人家提供的現成的腳手架，比方說create-react-app，vue-cli。極大提高了開發的效率，並且可以使用最新的ES6、ES7語法進行開發，在編碼體驗上，就提高了一個檔次。

總結

知其然，知其所以然，沒有最好的框架，只有最合適的框架！