A. 前端vue剛入職看不懂代碼
先從網上找一個比較完成的vue項目。
如今，正值畢設的高潮，筆者也是應接不暇，我想一個高逼格的畢設框架的選取，前端少不了Vue/React後端少不了SpringBootvue雖然逼格高，入門也不容易啊，剛從gitee拉的一個項目，修改一個動全身，各種報錯，死活理不清內部邏輯到底怎麼回事。
vue項目在看的時候，首先明確一個思路，既然作為vue是前後端分離的產物，那麼首先要看看vue是怎麼分離的，先給出結論，稍後具體描述。其實vue項目確實蠻復雜的，上面只是為了幫大家理清整個前端和後端的請求流程和返回是怎樣的，不過我們實際開發中，僅僅需要關心api、views、router、store四個目錄即可，開發時往裡面填代碼就行了，如果遇到問題就可以直接根據登錄思路快速查找問題根源。
B. Vue在前端開發中需要注意什麼
基於Vue官方風格指南整理
一、強制
1. 組件名為多個單詞
組件名應該始終是多個單詞的，根組件 App 除外。
正例：
export default {
name: 'TodoItem',
// ...
}
反例：
export default {
name: 'Todo',
// ...
}
2. 組件數據
組件的 data 必須是一個函數。
當在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是返回一個對象的函數。
正例：
// In a .vue file
export default {
data () {
return {
foo: 'bar'
}
}
}
// 在一個 Vue 的根實例上直接使用對象是可以的，
// 因為只存在一個這樣的實例。
new Vue({
data: {
foo: 'bar'
}
})
反例：
export default {
data: {
foo: 'bar'
}
}
3. Prop定義
Prop 定義應該盡量詳細。
在你提交的代碼中，prop 的定義應該盡量詳細，至少需要指定其類型。
正例：
props: {
status: String
}
// 更好的做法！
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
反例：
// 這樣做只有開發原型系統時可以接受
props: ['status']
4. 為v-for設置鍵值
總是用 key 配合 v-for。
在組件上_總是_必須用 key 配合 v-for，以便維護內部組件及其子樹的狀態。甚至在元素上維護可預測的行為，比如動畫中的對象固化 (object constancy)，也是一種好的做法。
正例：
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>
反例：
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
5.避免 v-if 和 v-for 用在一起
永遠不要把 v-if 和 v-for 同時用在同一個元素上。
一般我們在兩種常見的情況下會傾向於這樣做：
為了過濾一個列表中的項目 (比如 v-for="user in users" v-if="user.isActive")。在這種情形下，請將 users 替換為一個計算屬性 (比如 activeUsers)，讓其返回過濾後的列表。
為了避免渲染本應該被隱藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。這種情形下，請將 v-if 移動至容器元素上 (比如 ul, ol)。
正例：
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
反例：
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
6. 為組件樣式設置作用域
對於應用來說，頂級 App 組件和布局組件中的樣式可以是全局的，但是其它所有組件都應該是有作用域的。
這條規則只和單文件組件有關。你不一定要使用 scoped 特性。設置作用域也可以通過 CSS Moles，那是一個基於 class 的類似 BEM 的策略，當然你也可以使用其它的庫或約定。
不管怎樣，對於組件庫，我們應該更傾向於選用基於 class 的策略而不是 scoped 特性。
這讓覆寫內部樣式更容易：使用了常人可理解的 class 名稱且沒有太高的選擇器優先順序，而且不太會導致沖突。
正例：
<template>
<button class="c-Button c-Button--close">X</button>
</template>
<!-- 使用 BEM 約定 -->
<style>
.c-Button {
border: none;
border-radius: 2px;
}
.c-Button--close {
background-color: red;
}
</style>
反例：
<template>
<button class="btn btn-close">X</button>
</template>
<style>
.btn-close {
background-color: red;
}
</style>
<template>
<button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
border: none;
border-radius: 2px;
}
.button-close {
background-color: red;
}
</style>
二、強烈推薦（增強可讀性）
1. 組件文件
只要有能夠拼接文件的構建系統，就把每個組件單獨分成文件。
當你需要編輯一個組件或查閱一個組件的用法時，可以更快速的找到它。
正例：
components/
|- TodoList.vue
|- TodoItem.vue
反例：
V
ue.component('TodoList', {
// ...
})
Vue.component('TodoItem', {
// ...
})
2. 單文件組件文件的大小寫
單文件組件的文件名應該要麼始終是單詞大寫開頭 (PascalCase)
正例：
components/
|- MyComponent.vue
反例：
components/
|- myComponent.vue
|- mycomponent.vue
3. 基礎組件名
應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭，比如 Base、App 或 V。
正例：
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
反例：
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
4. 單例組件名
只應該擁有單個活躍實例的組件應該以 The 前綴命名，以示其唯一性。
這不意味著組件只可用於一個單頁面，而是每個頁面只使用一次。這些組件永遠不接受任何 prop，因為它們是為你的應用定製的，而不是它們在你的應用中的上下文。如果你發現有必要添加 prop，那就表明這實際上是一個可復用的組件，只是目前在每個頁面里只使用一次。
正例：
components/
|- TheHeading.vue
|- TheSidebar.vue
反例：
components/
|- Heading.vue
|- MySidebar.vue
5. 緊密耦合的組件名
和父組件緊密耦合的子組件應該以父組件名作為前綴命名。
如果一個組件只在某個父組件的場景下有意義，這層關系應該體現在其名字上。因為編輯器通常會按字母順序組織文件，所以這樣做可以把相關聯的文件排在一起。
正例：
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
反例：
components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue
6. 組件名中的單詞順序
組件名應該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結尾。
正例：
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- .vue
反例：
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
7. 模板中的組件名大小寫
總是 PascalCase 的
正例：
<!-- 在單文件組件和字元串模板中 -->
<MyComponent/>
反例：
<!-- 在單文件組件和字元串模板中 -->
<mycomponent/>
<!-- 在單文件組件和字元串模板中 -->
<myComponent/>
8. 完整單詞的組件名
組件名應該傾向於完整單詞而不是縮寫。
正例：
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
反例：
components/
|- SdSettings.vue
|- UProfOpts.vue
9. 多個特性的元素
多個特性的元素應該分多行撰寫，每個特性一行。
正例：
<img
src="htorg/images/logo.png"
alt="Vue Logo"
>
<MyComponent
foo="a"
bar="b"
baz="c"
/>
反例：
<img src="h/logo.png" alt="Vue Logo">
<MyComponent foo="a" bar="b" baz="c"/>
10. 模板中簡單的表達式
組件模板應該只包含簡單的表達式，復雜的表達式則應該重構為計算屬性或方法。
復雜表達式會讓你的模板變得不那麼聲明式。我們應該盡量描述應該出現的是什麼，而非如何計算那個值。而且計算屬性和方法使得代碼可以重用。
C. Python配合前端寫簡單介面（加前端vue代碼）
伺服器端：
# 開發人員: hanhan丶
# 開發時間: 2020/11/12 14:36
import flask, json #Flask 一個輕量級的web框架
from flask_corsimport *
server = flask.Flask(__name__) # __name__代表當前的python文件。把當前的python文件當做一個服務啟動
CORS(server, supports_credentials=True) # 解決跨域
@server.route('/login', methods=['post'])
# 第一個參數就是路徑,第二個參數支持的請求方式，不寫的話默認是get，
# 加了@server.route才是一個介面，不然就是一個普通函數
def login():
user = flask.request.values.to_dict()
for itemin user:
items = json.loads(item)
loginName = items.get("loginName")
password = items.get("password")
if loginNameand password:
res = {"code":0, "msg":"請求成功", "data": {"loginName": loginName, "password": password}}
else:
res = {'msg':'調用失敗'}
# json.mps 序列化時對中文默認使用的ascii編碼，輸出中文需要設置ensure_ascii=False
return json.mps(res, ensure_ascii=False)
if __name__ =='__main__':
# port可以指定埠，默認埠是5000
# host默認是伺服器，默認是127.0.0.1
# debug=True 修改時不關閉服務
server.run(debug=True)
前端：
<template>
<div>
賬號：<input type="text" v-model="loginName">
<br>
密碼：<input type="text" v-model="password">
<br>
<br>
<br>
<button @click="btn">點擊</button>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
loginName: "",
password: ""
};
},
methods: {
getDate() {
axios({
headers: {
"X-Requested-With": "XMLHttpRequest",
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
},
url: "http://127.0.0.1:5000/login",
method: "post",
data: {
loginName: this.loginName,
password: this.password
}
}).then(res => {
console.log(res);
});
},
btn() {
this.getDate();
}
}
};
</script>
<style>
</style>
D. 怎麼學習前端框架vue，學習步驟和學習時間怎麼安排
學習前端框架 Vue 的步驟如下：
了解 Vue 框架的基本概念和特點。了解 Vue 框架的基本架構和工作原理，包括 Vue 的視圖層渲染、數據綁定、組件化和路由等功能。
學習 Vue 框架的基本語法和使用方法。包括 Vue 的模板語法、組件定義、數據綁定、事件處理、路由使用等。
學習 Vue 框架的高級功能。包括 Vuex 狀態管理、Vue Router 路由、Vue Server Renderer 服務端渲染等。
學習 Vue 框架的實戰應用。通過實戰項目，加深對 Vue 框架的理解和應用能力。
學習時間的安排可以根據個人的學習能力和進度進行調整，但是一般來說，學習 Vue 框架的基本概念和語法可以在一周左右的時間內完成。如果想要學習 Vue 的高級功能和實戰應用，則可能需要更長的時間。
建議在學習 Vue 框架時，能夠結合官方文檔和一些教程進行學習，並嘗試自己動手寫一些簡單的代碼來練習。通過實際操作和練習，能夠更快地掌握 Vue 框架的知識和技能。
E. web前端開之網站搭建框架之vue詳解
網站搭建框架之vue
Vue是web前端快速搭建網站的框架之一。它與jQuery有所不同，是以數據驅動web界面（以操作數據改變頁面，而jQuery是以操作節點來改變頁面），同時，vue還實現了數據的雙向綁定，可及時響應用戶的輸入。最主要的是vue的寫法簡單，容易掌握，組件形式可以大大提高工作效率。
對於vue的使用可以分為兩種使用形式：1.引入vue.js文件，在js中將vue實例化；2.通過node安裝第三方包--vue，搭建腳手架，用腳手架將頁面分成幾個組件編寫，從而利用組件來搭建頁面。
引入vue.js的寫法
Vue分為V層（視圖層）和M層（數據層），一般都是由M層的數據來驅動V層的改變。而vue的常用指令數量不多且寫法簡單。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是將數據寫進標簽內，但它們的不同之處在於v-text會將標簽當做文本內容寫入
，而v-html則會對標簽進行編譯，只顯示標簽內的內容。
至於v-show、v-if、v-else這三個指令都是通過布爾值的判斷來執行的，當布爾值為真時，設置了v-show、v-if指令的標簽會顯示出來，當布爾值為假時，標簽隱藏；而v-else與這兩個指令相反。除此之外，v-show和v-if、v-else之間也有差別，v-show是改變標簽的display屬性來使標簽顯示或隱藏；而v-if、v-else是通過添加或刪除節點，來顯示或隱藏標簽的。
V-for是vue的一種遍歷方法，這個方法極大的簡化了數組或對象的遍歷並顯示到頁面的步驟
而v-bind：是對html屬性或自定義屬性的數據驅動方式，格式為v-bind:href，可簡寫為：href。對於類（class）的操作是通過布爾值來判斷增加或者隱藏類，同時。類和樣式（style）所接受的數據類型為對象。
V-model指令的作用是將數據進行雙向綁定，僅限於輸入類型標簽。當用戶在頁面輸入時，數據層的數據會跟著改變。這是VM模式。由v驅動m。
除了這些普通的指令之外，還有事件指令v-on:，可簡寫為@+事件名，例如：@click，並將執行函數寫到vue的methods中
通過腳手架來寫項目的話，可用通過寫組件，再將組件引入（注冊）到另一個vue文件里拼接在一起，從而構建出一個頁面。
（組件書寫格式）
（組件整合）
（注冊路由）
路由是通過vue-router來實現的，在注冊路由的時候要將router實例化。不同的路由跳轉不同的頁面，這是搭建單頁面應用的優勢。
而父組件與子組件之間的通訊可以通過props將父組件的信息傳遞給子組件，改變子組件的內容，這樣子組件的復用就不會有障礙了，而子組件傳遞信息給父組件或者其他組件的通訊則需vuex。
通過引入vuex並實例化一個Vuex.Store作為一個公共平台，將數據進行傳輸。通過vue的computed方法接收數據，通過methods方法改變數據。而這個公用平台可以實現組件與組件之間的信息傳遞，從而實現組件之間的交互。
通過一個星期的實戰，深深的體會到了vue的優勢，在構建移動端這方面的效率很高。但在搭建的過程中，還是少不了與jQuery結合，畢竟每個工具都有其優點，擇其優而用是明智的選擇。
F. Vue框架為什麼得到了前端程序員很高的評價
很多使用過vue的程序員這樣評價它，「vue.js兼具angular.js和react.js的優點，並剔除了它們的缺點」。授予了這么高的評價的vue.js，也是開源世界華人的驕傲，因為它的作者是位中國人–尤雨溪（EvanYou）
如果你是一個已經在學習開發的初學者亦或是一名在代碼界縱橫多年的程序員，那你一定對前端不陌生。它不像其他編程語言那樣晦澀難懂，可以做到「所見即所得」，或許這也是很多初學者選擇前端的原因之一。昨天在刷微博的時候，看到了這樣一個觀點，說前端開發的vue.js很有趣，然後今天就准備和大家聊聊這個「有趣」的前端框架—Vue。
Vue的優勢
1）Vue確實小而美，開發體驗非常好。Vue 的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。
2）Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性，這可能算是一個小的不完美，但它支持所有兼容ECMAScript 5的瀏覽器。
3）在 Vue 里，一個組件本質上是一個擁有預定義選項的一個Vue 實例。在 Vue 中注冊組件很簡單，也是它的一大優勢。
Vue的應用
1）Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統。Vue的使用非常的簡單，創建一個本地的 .html 文件，然後通過如下方式引入Vue：
這樣， 我們就已經成功創建了第一個 Vue 應用！
2）現在有很多大公司都在使用Vue
餓了么，有越來越多的項目在使用 vue。這些項目裡面，有桌面端（比如餓了么安全應急響應中心）也有移動端（比如餓了么招聘），有面向用戶的，也有後台系統。
掘金，全網都是用 Vue.js + Webpack 實現的，算是一個純前端應用。
蘇寧易購，觸屏版的購物車結算頁面已經用 Vue 重構，在眾多框架中還是選擇了 Vue，主要還是因為 API 比較友好，體驗上也流暢了。
據不完全統計，包括美團、天貓、Laravel、htmlBurger等國內外知名大公司都在使用vue進行新項目的開發和舊項目的前端重構工作。
你會用嗎？
1）對於前端初學者不建議學習，一門語言的入門一定是從基礎語法開始的，掌握了基本知識，才能更加靈活的使用框架，為之後的工作打下良好的基礎。
2）在熟練掌握了基礎之後，建議個人可以用vue。練練手，為後續大項目做技術儲備。已經在從事前端開發的小夥伴們也可以多接觸，多學習些。
3）招聘網站搜索來的薪資，部分截圖給大家看下
現在學習還不晚喲~