箭頭函數
在 es5 中中只有function
在 es6 中新增了 箭頭函數 與 對象方法
function f1(){
console.log('f1 run')
}
f1()
這就是很正常的一個函數調用，這叫函數，沒有調用者，有調用者的才叫方法
如果不寫上 return 返回值，他就會默認返回空，會打印出 undefined。
另一種寫法
let r1 = function(){
return 10;
}
等號的右邊相當於是一個匿名函數，把這個匿名函數賦值給了 r1 ，這個函數也可以寫成箭頭函數的形式
let r1 = () => {
return 10;
}
當箭頭函數的內容只有一個返回值的時候，可以簡寫
let r1 = () => '返回值'
當箭頭函數有且只有一個參數的時候, ( ) 也可以省略
let r1 = a => a*10
配置全局css和js
配置js：
就拿配置一個url來作為例子
export default {
base_url: 'http://localhost:8001',
}
如果想要在全局都能調用這個js，就必須要在main.js文件里配置
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
（vue推薦的是css文件要加文件后綴，其他都不推薦加后綴，所以這里settings不加.js）
這里還要解釋一下prototype：Vue.prototype就相當於是給 Vue這個類添加類的屬性，所以所有 Vue實例化出來的對象都可以調用這個屬性，為什么要加 $ ,這是默認的，因為拿這個屬性不就像是拿vue的成員變量一樣嗎？所以加個$。
配置css：
和js一樣，在assets文件夾下建一個css文件夾，寫一個css文件就可以了。
store倉庫的應用
vue 項目中有一個文件夾是 store ，文件夾下有一個index.js 文件，是倉庫，用來存儲東西。但是他有一個特點，那就是 刷新頁面就會重置到初始值。在這個倉庫里配置的東西，可以在任何一個組件邏輯中，也可以在任何一個組件模板中訪問或者修改。
state: {
car:{
name:"待定",
price:"0"
}
},
使用：
在任何一個組件邏輯中：this.$store.state.car 訪問或是修改
在任何一個組件模板中：$store.state.car 訪問或是修改
因為他的特性，所以這個倉庫更適合用於移動APP的開發，因為app沒有刷新呀
vue搭建 Element 環境
Element ，是由餓了么開發的，東西都是組件，專門給vue來用的。
安裝
到項目所在目錄執行
cnpm install element-ui
配置全局環境
在main.js 里配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);//這個是配置全局環境，不需要用，就已經存在了，就是直接可以用，不要調用什么東西了。
關於this
函數中的this
面向對象函數：this為調用者
面向過程和面向對象：this可能為調用者
面向過程：沒有this（箭頭函數）
正常寫法
created(){
//這個this是vue對象，調用ele的組件，所以在ele組件內是拿不到vue對象的
this.$message({
message:'這個ele的彈出框',
type:'success',
duration:'1000',
onClose(){
//這里沒有拿到ele對象，為undefind，這個方法既屬於面向過程也屬於面向對象所以this異常
alert(this)
}
})
}
那么要怎么在 lel組件內部獲取vue對象？
可以先用一個變量來保存this。
created(){
let _this=this
this.$message({
message:'這個ele的彈出框',
type:'success',
duration:'1000',
onClose(){
alert(_this)//這里的_this就是vue對象了。
}
})
}
還有一種，通常用這種
箭頭函數
created(){
this.$message({
message:'這個ele的彈出框',
type:'success',
duration:'1000',
onClose:()=>{
alert(this)//函數內部沒有this，就會往上一級找
}
})
}
vue 搭建 js 和 jq 環境
安裝jquery
cnpm install jquery
安裝bootstrap
cnpm install bootstrap@3
配置環境
// 加載bs的邏輯
import "bootstrap"
//配置bs的樣式
import "bootstrap/dist/css/bootstrap.css"
配置jquery
項目是不會幫你自動生成配置文件 vue.config.js 文件的，所以要自己手動建，名字一定要這個！
// 修改該文件內容后，只有重啟，才能同步配置
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.$": "jquery",
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};
記得配置完了之后一定要重啟項目，才能生效。
前后端分離的數據交互
在之前我們都是用django來實現前后端的，前后端是不分離的，前端可以用模板語法來寫，現在我們的前端是用vue來寫的，所以就要涉及到分離的情況下，數據該怎么交互。
首先不推薦使用 ajax 了，因為他的特點是 dom操作不適合。
用 axios
安裝
cnpm install axios
main.js 配置
import Axios from 'axios'
Vue.prototype.$axios = Axios;
然后就可以在 vue 組件里使用了
created(){
this.$axios({
//拿取全局的js文件
url: this.$settings.base_url + '/cars/',
method: 'get',
params: {
},
data: {
},
//當請求發送成功的時候就會調用then，失敗的時候就會調用catch
}).then((response) => {
this.cars_data = response.data;
}).catch(error =>{
console.log(error)
})
}
get 請求的時候不會用到 data，只會用params，用來傳參，url拼接的數據
post請求的時候 兩個都會用到， data用來攜帶請求的數據
現在問題來了，vue項目啟動需要占用一個端口，比如說8000 ，django啟動也需要占用一個端口比如說8001，那么 vue 的數據要怎么發給 django 呢？這就涉及到了跨域問題
django跨域問題
首先一定要安裝一個插件
pip intstall django-cors-headers
然后需要在 配置文件settings 中配置
#注冊app
INSTALLED_APPS= [
'corsheaders'
]
#添加中間件
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware'
]
#允許跨域源
CORS_ORIGIN_ALLOW_ALL = True
這里又有一個問題，我們在開發前后端不分離的項目的時候，會涉及到一個 csrf 的問題，它是用來解決 跨站請求偽造問題的，他的實現原理就是會自動給前端的form表單生成一個隱藏的input框，並給他一個隨機生成的字符串，以此來鑒定你這個form表單是不是我允許的。
那么在前后端分離的情況下，vue要怎么接收這個csrf字符串呢？答案是不能接收，沒辦法接收，所以那我們只能用老辦法了，沒錯，注釋掉 csrf校驗的中間件，原因有三點：
- csrf 沒法傳給前端
- csrf 這種安全校驗方式比較low
- 有更好的方式可以代替它
至於是哪種，后面會講。
所以我們只用注釋掉就好了。
那么怎么實現前后端數據交互呢？
url: this.$settings.base_url + '/cars/',
這一句就是訪問后端的 url 了，然后在django的 路由層（urls）里面配置好對應的 url
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^cars/', views.cars),
url(r'^login/', views.login),
url(r'^register/', views.register),
]
然后去調用對應的視圖函數就好了。
關於前端 兩種請求方式攜帶的數據，后端的拿取方式
def login(request):
if request.method == 'POST':
print(request.body)#如果是 post請求的話，前端data中帶的數據都在這里面
if request.method == 'GET':
print(request.GET)#如果是 get請求的話，前端params中帶的數據都在這里面
return JsonResponse(back_dic)
然后返回的數據，就會被前端 axios 中的 then 接收
then(response => {
this.$message({
//接受的數據就在 response.data中
message: response.data.msg,
type: 'warning'
});
vue 使用 cookies
安裝
cnpm install vue-cookies
環境配置
import Cookies from 'vue-cookies'
Vue.prototype.$cookies = Cookies;
使用cookies
// 有響應的登錄認證碼，存儲在cookie中
// 設置：set(key, val, exp)
// 取值：get(key)
// 刪除：remove(key)
let token = 1000;
if (token) {
//設置cookies，第一個參數是鍵，第二個是值，第三個是過期時間。
this.$cookies.set('token', token, '2d');
//拿取cookies
console.log(this.$cookies.get('token'));
//刪除cookies
this.$cookies.remove('token');