Vue执行和开发流程、登录小案例、混入、插件、elementui

一、Vue执行流程

1、vue的执行流程

# 1 为什么浏览器中访问某个地址，会显示某个页面组件
	-根组件：App.vue  必须是
        <template>
          <div id="app">
            <router-view></router-view>
          </div>
    	</template>
	-1 配置路由
    	router----》index.js---》const routes = [
                {
                path: '/lqz',
                name: 'lqz',
                component: Lqz  # 组件，需要导入
            },
        ]
     -2 放心大胆的写页面组件  -src---->views文件夹
    
    
# 2 在页面组件中使用小组件
    -1 写一个小组件，我们写了个Child.vue
    -2 在父组件中，导入组件
    	# @ 代指src路径
		import Child from "@/components/Child";
    -3 父组件中，注册组件
    	  components: {
            Child
          }
    -4 父组件中使用组件
	    <Child :msg="msg" @myevent="handleEvent"></Child>
    -5 自定义属性，自定义事件，插槽，跟之前一模一样　　

二、登录小案例

1、解决跨域问题、安装axios

# 1 登录页面：LoginView.vue
	
# 2 访问/login 显示这个页面组件
# 3 在LoginView.vue写html，和js，axios
	-安装 axios
    -cnpm install -S axios  # 把安装的axios放到package.json中
# 4 写ajax，向后端发送请求，给按钮绑定两个一个事件
	#安装axios，导入axios
	    handleSubmit() {
          console.log(this.name, this.password)
          axios.post('http://127.0.0.1:8000/login/', {
            name: this.name,
            password: this.password
          }).then(res => {
            // console.log(res.data)
            if (res.data.code == 100) {
              //跳转到百度
              location.href = 'http://www.baidu.com'
            } else {
              alert(res.data.msg)
            }
          })
        }
# 4 写个后端的登录接口，处理好跨域问题，处理跨域如下

####解决后端跨域问题#####
    1 安装
    	pip3.8 install django-cors-headers
    2 注册app
        INSTALLED_APPS = (
            ...
            'corsheaders',
            ...
        )
    3 配置中间件
        MIDDLEWARE = [  
            ...
            'corsheaders.middleware.CorsMiddleware',
            ...
        ]
    
    4 配置文件中加入：setting下面添加下面的配置
        CORS_ORIGIN_ALLOW_ALL = True
        CORS_ALLOW_METHODS = (
            'DELETE',
            'GET',
            'OPTIONS',
            'PATCH',
            'POST',
            'PUT',
            'VIEW',
        )

        CORS_ALLOW_HEADERS = (
            'XMLHttpRequest',
            'X_FILENAME',
            'accept-encoding',
            'authorization',
            'content-type',
            'dnt',
            'origin',
            'user-agent',
            'x-csrftoken',
            'x-requested-with',
            'Pragma',
            'token'
        )

2、后端

import json

def login(request):
    data = json.loads(request.body)
    if request.method == 'POST':
        print(data)
        name = data.get('name')
        password = data.get('password')
        if name == 'ccy' and password == '123':
            print(name, password)
            return JsonResponse({'code': 200, 'msg': '登录成功！'})
        else:
            return JsonResponse({'code': 400, 'msg': '登录失败！'})

注意这里的密码，前端传过去是字符串

3、前端

## views

<template>
<div>
  <p>用户名： <input type="text" v-model="name"> </p>
  <p>密码： <input type="password" v-model="password"></p>
  <button @click="handleSubmit">登录</button>
</div>
</template>

<script>

import axios from  'axios';

export default {
  name: "LoginView",
  data () {
    return {
      name: '',
      password: ''
    }
  },
  methods: {
    handleSubmit(){
        console.log(this.name, this.password)
        axios.post('http://127.0.0.1:8000/login/',{
          name: this.name,
          password: this.password
        }).then(res => {
          console.log(res.data.name, res.data.password)
          if (res.data.code === 200){
            location.href = 'https://www.cnblogs.com/'
          }else {
            alert(res.data.msg)
          }
        })
    }
  }
}
</script>
<style scoped>
</style>

## router

import LoginView from "@/views/LoginView";
{
        path: '/login',
        name: 'login',
        component: LoginView
    },

三、scoped、props、ref、混入

1、scoped 属性（作用范围）

新建的组件 加了scoped，表示样式只在当前组件生效，如果不加，子组件都会使用这个样式

<style scoped>
</style>

2、props 属性

3、ref属性

4、混入

四、插件

五、elementui