Django + Vue
阿新 • • 發佈:2020-08-09
https://cloud.tencent.com/developer/article/1005607
這時候我們須要在Django層注入header,用Django的第三方包django-cors-headers來解決跨域問題:
pip install django-cors-headers
MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] CORS_ORIGIN_ALLOW_ALL = True
django模板中嵌入vue的插值表示式,並不顯示vue中資料,但是響應事件,解決方案:
<!DOCTYPE html> {% load staticfiles %} <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1 { height: 100px; background-color: red; } </style> </head> <body> {% verbatim myblock %} <div id="apc"> <h1 @click="alet">{{ msg }}</h1> </div> {% endverbatim myblock %} <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>--> <script src="{% static 'js/vue-2.4.0.js' %}"></script> <script> new Vue({ el: '#apc', data: { msg: "app" }, methods: { alet() { alert(12); } } }); </script> </body> </html>