Vue.js の概要
1. Vue はユーザー インターフェイスを構築するための進歩的なフレームワークです
2. Vue はボトムアップでレイヤーごとに適用されるように設計されています
3. Vue のコア ライブラリはビュー レイヤーのみに焦点を当てており、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です 統合
4. Vue.js を学習するには、特定の HTML、CSS、JavaScript の基礎が必要です
Vue 公式 Web サイト
cn.vuejs.org
MVVM モード
Vue コンポーネント開発
1. コンポーネント化とは、ページを複数のコンポーネントに分割し、各コンポーネントが依存する CSS、JS、テンプレート、画像などのリソースをまとめてメンテナンスすることです
。コンポーネント間でネストされている
VsCode で一般的に使用されるプラグイン
1、ES6
2、Vetur
3、Auto Close Tag
4、Auto Rename Tag
5、Highlight Matching Tag
共通コンポーネントライブラリ
1、ElementUI https://element.eleme.io/#/
2、BootstrapVue https://bootstrap-vue.org/
3、Vuetify https://vuetifyjs.com/zh-Hans/
ノード環境をインストールする
https://nodejs.org/zh-cn/download/
インストール完了後、「npm -v」「node -v」と入力して環境を確認し
、vue環境をインストールします。
-
vue-cli
npm install -g @vue/cli
-g はグローバル インストールを表します。 -g を追加しない場合、現在のディレクトリにインストールされます。 -
vue-ui
コマンドはフロントエンド プロジェクト管理ページを開き、
ディレクトリとプロジェクト名を選択して、npm パッケージ管理ツールを使用します。 -
vue スキャフォールディング ツールは、
vue create project_name を自動的に生成します。 -
vue フレームワーク
1 を使用し、1 つ目は
npm init vue@latest
2、2 つ目は、
index.html ファイルを使用してマウントします -
Vue 共通プラグイン
vue add vuetify
vue add router
npm install --save axios -
サービスを開始します
npm runserve
Vue プロジェクトの構造
<!DOCTYPE html>
<!-- html 对应的是页面展示的内容， 页面有啥 html 就有啥 -->
<html lang="en">
<!-- head 元数据， 类似于python的导包，一些页面的基础设定 -->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 引用vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<!-- body 页面展示的内容-->
<!-- 语法：什么类型的标签<标签类型 属性=‘属性对应的值’> -->
<body>
<!-- id= 标签的属性，可以存在多个标签数据 "app"标签属性对应的值 -->
<div id="app">
<div></div>
<!-- 在首标签内部使用vue 语法 -->
<!-- 判断1 和 1是否相等，如果相等，展示苹果 -->
<!-- <div v-if="1==2">苹果</div> -->
<!-- v-else后面不跟条件 -->
<!-- <div v-else>香蕉</div> -->
<!-- <div v-show="1==1">葡萄</div> -->
<!-- v-if和v-show 区别在于当不满足条件时，元素的状态不一致 -->
<!-- 1、v-if不满足条件时，元素不会被加载 -->
<!-- 2、v-show不满足条件时，元素依然会被加载，只是不展示 -->
<!-- 模版语法 将模版语法和data中的数据结合，字段名需要加{
{}}-->
<!-- {
{message}} -->
<!-- v-model的特性叫做双向绑定，绑定的是普通数据 -->
<!-- <input v-model="message">
<input type="text" v-model="message"> -->
<!-- 数组里边有几个元素，就会循环几次 -->
<div v-for="i in [1,2,3]">小蛋糕</div>
<div v-for="i in [1,2,3]">{
{i}}</div>
<!-- 超链接标签 href属性代表它要跳转的链接地址 -->
<a href="https://baidu.com/">搜一搜</a>
<a v-bind:href="link">搜一搜2</a>
<!-- v-bind简写 ：，绑定的是属性-->
<a :href="link">搜一搜3</a>
</div>
</body>
</html>
<!-- script 动态化的处理，比如一些js脚本，请求接口，数据处理等 -->
<script>
// 实例化vue对象
var vm = new Vue({
//指定vue实例挂载的页面对象
el: "#app", // #代表定位id
data: {
message: "展示",
link: "https://baidu.com/",
},
methods: {
},
});
</script>
<!-- 页面美观，好看是由样式表决定的 -->
<style></style>
Vue の共通命令
- v-if 要素と v-else 要素が存在するかどうか
- v-show要素が表示されるかどうか
- v-model バインディング データ
- v-for ループ
- v-on バインディング イベント、略称 @
- v-bind バインディング属性、短縮形:
Vue はコア ファイル
main.js
App.vue
router/index.jsをロードします
ルーティングのインスタンス化、ルーティングはページに関連しており、どのルートにアクセスするか、どのコンポーネントに対応するページが表示されるか
アプリのマウント
vue コンポーネント化
https://vuetifyjs.com/en/getting-started/installation/
エラー「v-slot」ディレクティブは修飾子をサポートしていません vue/valid-v-slotエラーコンポーネントを使用する場合、
エラー「v-slot」ディレクティブは修飾子をサポートしていません
<template v-slot:[`item.actions`]="{ item }">
クロスドメイン処理
クロスドメインリクエストの本質は同一発信元を判定することであり、英語の略称はCSRF、中国語名はクロスサイトリクエストフォージェリーです。
2 つの URL のプロトコル、ポート (指定されている場合)、およびホストが同じ場合、2 つの URL は同じオリジンのものとみなされ、ブラウザは
同じオリジン以外のリクエストをブロックします。では、非相同性とは何でしょうか? 異なるドメイン名と異なるポートは、同じオリジンに属しません。たとえば、Vue を使用してポート 8081 でフロントエンド ページを書き込み、Django を使用してポート 8000 でバックグラウンドを書き込みます。フロントエンドはデータをバックグラウンドに送信し、バックグラウンドから返されるデータは次のようになります。ポートが異なるため、ブラウザによってインターセプトされます。これはクロスドメインです。
DRF クロスドメインの問題解決
1. サードパーティ ライブラリ django-cors-headers をインストールします。
pip install django-cors-headers
2. django-cors-headers はアプリなので、settings.py でアプリの corsheaders を登録する必要があります。先頭に配置してみてください。 3.
ミドルウェアを追加します。「django.middleware.common」の前に配置する必要があります。 .CommonMiddleware' ミドルウェア 'corsheaders.middleware.CorsMiddleware'
4. ホワイトリストの追加
CORS_ALLOW_CREDENTIALS = True # 允许跨域时携带Cookie，默认为False
CORS_ORIGIN_ALLOW_ALL = True # 所有ip都可以访问后端接口
# CORS_ORIGIN_WHITELIST = ["http://127.0.0.1:8080",["http://192.168.10.1:8080"] # 指定能够访问后端接口的ip或域名列表
# 允许访问的请求方法
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
# 允许的headers
CORS_ALLOW_HEADERS = (
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
)