这是我参与「第四届青训营」笔记创作活动的第1天

Vue2和Vue3

Vue2
- Vue2 官方教程
  - vue.js 介绍
    - Vue.js 是什么？
      - 一款渐进式 JavaScript 框架
      - 渐进式：由浅到深、从简单到复杂
    - Vue.js 有什么优点？
      - 体积小、压缩后 33k
      - 更高的运行效率，基于虚拟 dom
      - 双向数据绑定，可以把更多精力投入到业务逻辑
      - 生态丰富、学习成本低
      - 广泛用于 Web、移动端、跨平台应用开发
  - vue.js 安装和部署
    - 有哪些安装方式？
      - 使用 CLI 构建脚手架（不推荐新手使用）
      - 直接使用 js 引用 vue.js（新手用）
      - 下载 vue.js 的开发版放到开发文件夹中
      - 在 html 文件中引入 vue.js 文件
    - 开发版本和生成版本的区别？
      - 开发版本包含完整的警告和调试模式（用于发布前的开发）
      - 生产版本删除了警告等信息（用于发布的版本）
  - 创建第一个 vue 应用
    - 如何创建一个 vue 应用？
    - Vue 应用可以做什么？
  - 数据与方法
    - $watch 方法有什么用？
      - 观察某一个变量的变化，记录 newVal 和 oldVal
  - 生命周期
  - 模板语法
    - 模板语法是什么？
      - 提供一些操作的模板，填入参数即可使用
      - 基于 HTML
  - 模板语法 - 插值
    - 如何将普通文本插值？
    - 如何将 HTML 文本插值？
  - 模板语法 - 指令
  - class 与 style 绑定
  - 条件渲染
  - 列表渲染
  - 事件绑定
  - 表单输入绑定
  - 组件基础
  - 组件注册
  - 单文件组件
  - 免终端开发 vue 应用
Vue3
- Vue3 官方教程
router 文件夹
- 配置路由对路由进行分配 ,根据路由查看不同子页面
views 文件夹
- 提交 app 需要的各种视图（组件）用于组合
- 一个组件管理一个 Div
- 存放不同子页面，需要 router 文件夹下的 index.js 分配访问的路由（路劲）
scr 文件夹
- 放文件目录
  - assets 文件夹
    - 放 css、js 等静态文件
先从 main.js 中导入功能
引用路径前加 ../ 表示跳出当前文件夹，寻找文件
前端一个页面，调取各个路由（组件）组成一个完整的页面
通过不同的路由显示不同的数据
node_modules 文件夹
- 当前项目运行的依赖文件包
ajax 请求
- 使用 vuecil 安装 axios 依赖包
- Cors 跨源（跨域）请求会被拦截
  - 后端通过 corsheader 设置前端访问的白名单
    - Django 需要安装 django-cors-headers
    - 放入 setting 中的 app 里
    - 放入中间件
    - 设置白名单
- arams 是什么
conponents 文件夹里放什么
- 存放子组件可以在多个页面上使用
css 中 solid 什么意思
开发顺序
- 先在前端写好组件（View 文件夹或者 components 文件夹），页面，输入的数据能够临时存储（使用 Vue，model 等）
- 在后端 urls 文件中写入 api 接口的路由（访问路径）
- 在后端 api.py 文件中写入 api 的函数和访问的方法(获取前端发来的数据) 同样可以写数据进行的一些操作
- 在前端组件中，写入 axios 发送数据的路由，数据类型等
后端 Token 令牌
- 用于保存登录状态（持续登录）
- 保存在浏览器 Cookie 中
- 可以设置多久清空？重新登录（加强安全）
Vue 父组件向子组件通信

Vue入门 | 青训营笔记

Vue2和Vue3