一、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，导入axioshandleSubmit() {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-headers2 注册appINSTALLED_APPS = (...'corsheaders',...)3 配置中间件MIDDLEWARE = [ ...'corsheaders.middleware.CorsMiddleware',...]4 配置文件中加入：setting下面添加下面的配置CORS_ORIGIN_ALLOW_ALL = TrueCORS_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 jsondef 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>## routerimport LoginView from "@/views/LoginView";
{path: '/login',name: 'login',component: LoginView},
三、scoped、props、ref、混入
四、插件
五、elementui
