记录Vue2-脚手架-组件数据传递方法

1 关于vue（快速创建）

1. 首先是安装node.js

2. 然后npm安装vue cli脚手架*（脚手架定义：是为了保证各施工过程顺利进行而搭设的工作平台）*

3. 安装vue后如何创建项目工程 启动项目

4. 首先创建一个空文件夹，然后在项目的文件夹进入cmd，然后vue create [项目名]，接着npm run serve就可以启动vue项目了

2 关于vue-cli使用自定义router（页面跳转）

1. 写组件components，也就是一个个页面。

2. 定义一个router文件夹，里面放配置文件-js

• 需要导入Vue、VueRouter+Vue.use、components

• 写路径

  //配置导出路由
  export default new VueRouter({
      routes: [
          {
              //路由路径
              path: '/content',
              //跳转组件
              component: myContent
          },{
              //路由路径
              path: '/xxx',
              //跳转组件
              component: xxx
          }
      ]
  });
  

• 在主配置main.js注册自定义路由配置

• 在主页面展示

  <router-link to="/main">首页</router-link>
      <router-link to="/content">内容页</router-link>
      <router-view></router-view>
  

路由模式

在路由配置里写个mode改成history模式就没有#了

3 简单的登录注册实现

3.1 盒子页面中间的方法

  position: absolute;
  width: 450px;
  height: 300px;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);

3.2 表单绑定数据

表单和内部组件双向绑定数据

1. 首先给form加一个：model

2. 在数据区就可以写对象了

   

3. 在需要绑定的地方调用

3.3 校验规则（用的是elm框架）

1. 创建规则对象

2. 给校验规则对象添加属性

   

3. 绑定规则到具体盒子上

   

3.4 重置表单实例

1. element方法

2. 给表单加一个ref以及点击事件
   

3. 写方法

4 登录注册接口完成

4.1 前端

1. 首先前端挂载axios（全局）

2. 在form里加属性 :model=“loginForm”

3. export default {
     name: "myLogin",
     data() {
       return {
         // 返回数据
         FormData: {},
     }
     
   

​ 4.

methods: {
	//给登录按钮绑定@click事件
    login() {
    axios({
          method: 'post',
          url: 'http://127.0.0.1:8002/api/login',
          data: {
            username: this.FormData.username,
            password: this.FormData.password,
            type: 2,
          },          
        });
  }

4.2 后端

1. ​ 导入库

   from django.shortcuts import render
   from django.http import JsonResponse
   from login import models  # 引用数据库
   

2. 创建接口方法（来自model类以及序列化器 ）：

   def xxx（request）：
   	........
   	return JsonResponse(res)
   

3. 解决跨域问题：

   https://blog.csdn.net/qq_41000891/article/details/84501280

   前端跨域：

/**
 * 配置跨域问题
 */
//导入axios
// 发送网络请求, 配置axios
import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:8000'
// 请求携带cookie
axios.defaults.withCredentials = true
// 异步请求 不阻塞 —请求头
axios.defaults.headers['X-Requested-With'] = ['XMLHttpRequest']
// 获取本地token 没有则为空
axios.defaults.headers['token'] = localStorage.getItem('token') || ''
// 内容类型
axios.defaults.headers.post['Content-Type'] = 'application/json'
Vue.prototype.$axios = axios

后端：

# 允许所有源访问
CORS_ORIGIN_ALLOW_ALL = True
# 跨域白名单
CORS_ORIGIN_WHITELIST = ('http://127.0.0.1:8080',)
# 允许带着cookie
CORS_ALLOW_CREDENTIALS = True
# 允许请求头
CORS_ALLOW_HEADERS = ('x-requested-with', 'token', 'content-type', 'Authorization',)
# 允许请求方法 注意: 所有请求方法必须大写, 否则会报错
CORS_ALLOW_METHODS = ('GET', 'POST', 'PUT', 'DELETE')

😉

5 Vue快速格式化工具

创建.prettierrc文件，添加以下代码

{
    "semi": false,
    "singleQuote": true
}

6 组件数据互传

6.1 父传子

1. 首先在父组件注册子组件

2. 用:XXX注册一个方法名，留一个数据名，然后去子组件用prop属性加载数据就可以。

6.2 子传父

1. ​ 需要使用watch监听器

子组件定义一个方法名叫childInput，this.changeVal是要传的数据

2. 在父组件中，定义相同名称的方法，获取数据

6.3 兄弟组件

1. 首先在全局组件定义两位兄弟

2. 然后在A兄弟组件定义一个事件的方法和数据

3. B组件就可以接收

4. 期间A使用了bus.$emit（“方法名”，“数据”）

   B使用了bus.$on（“方法名”，“数据”）

   bus.js就是一个交通工具
   兄弟组件

---

累…

Markdown里的图片直接导入csdn会显示异常…