vue项目的解析、登录小案例、scoped、ref、props、混入mixin、插件、Elementui
vue的执行流程
1. 为什么浏览器中访问某个地址，会显示某个页面组件
vue-router第三方插件支持的：
访问：/（根路径）---》显示HomeView.vue
访问：/about ---》显示AboutView.vue
根组件：App.vue
App.vue中的template中的div会被替换到index.html中的div中渲染
根组件中加了router-view撑满了整个div，router-view :负责切换组件页面，从而实现了访问不同路径，显示不同的页面组件
- 1. 根组件：App.vue，必须是：
- 3. 直接写页面组件就行 ，在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. 登录页面：LoginView.vue
2. 访问：/login ---》显示这个页面组件
3. 在LoginView.vue写 html，js，axios
-安装 axios
-cnpm install -S axios (S：是把安装的axios放到package.json中
4 写ajax，向后端发送请求，给按钮绑定点击事件
5. 写一个登录接口，处理好跨域问题，处理跨域如下：
解决后端跨域问题
1. 安装django的一个第三方模块：
- pip install django-cors-headers（只解决django的跨域问题）
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'
)
前端：LoginView.vue:
<template> <div> <p>用户名：<input type="text" v-model="name"></p> <p>密码：<input type="password" v-model="password"></p> <button @click="handleClick">登录</button> </div> </template> <script> //安装的依赖直接导入即可 import axios from 'axios' export default { name: "LoginView", data(){ return{ name:'', password:'', } }, methods:{ handleClick(){ 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) }) } } } </script> <style scoped> </style>
后端：
结果：
登陆成功：跳转到百度页面
scoped关键字
新建的组件中有：加了scoped表示：style中的样式只对当前组件生效，如果不加，子组件都会使用这个样式
<style scoped></style>
加scoped时：
不加scoped时：子组件的h1标签和父组件的h1标签样式一样
ref属性
- 放在普通标签上，通过 this.$refs.名字 ---》取到的是dom对象，可以直接操作dom
原生dom修改跨过了vue，所以监测不到插值{{name}}
结果：
- 放在组件上，通过该this.$refs.名字 ---》取到的就是组件对象，这样在父组件中，就拿到了子组件对象，对象的属性和方法直接用即可
props其他
父传子---自定义属性
1. 基本使用
props:['msg']
父组件：
子组件：
结果：
2. 限制类型：
props:{'msg':Boolean},
子组件：
结果：
3. 限制类型，必填，默认值
props：{
msg：{
type：String, // 类型
requeired:true, // 必填
default：‘yy’ // 默认值}
}
没有传：
混入mixin
在src文件夹下创建一个mixin文件夹，里面创建一个Index.js
- index.js 有特殊含义
- 之前导入： import XX from './mixin/index.js'
- 现在可以这样导入：import XX from './mixin'
mixin（混入）
功能：可以把多个组件共用的配置提取成一个混入对象
使用步骤：
1 定义混入对象：mixin---》index.js中写
export const hh= {
data() {
return {
name: 'hh'
}
},
methods: {
handleName() {
alert(this.name)
}
}
}
2 使用混入：局部使用，组件中使用，可用多个混入
import {lqz} from '@/mixin'mixins: [lqz]
小案例：
HomeView.vue：
结果：
AboutView.vue：当自己定义了name
结果：
3 全局使用混入：每个组件都有效，在main.js中
import {lqz} from '@/mixin'Vue.mixin(lqz)
插件
插件的本质：
包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
我们可以自己定义自己的插件
插件的功能：用于增强Vue，有很多第三方插件（Vuex，router，elemetui，都是别人写好的插件）
使用步骤：
1.定义插件：plugins---》index.js---》 export default {
install() {
# 1 在vue实例中放属性
# 2 定义混入，全局都可以使用混入
# 3 自定义指令(不讲了)---》以后我们可能使用了一个第三方插件，它提供了一些指令 v-lq
# 4 定义全局组件---》全局
}
}
2 在main.js中 使用插件：
import yyfrom '@/plugins'
Vue.use(yy) # 这句话，就会执行yy中得install，并且把vue传入
Elementui
官网：https://element.eleme.cn/#/zh-CN/component/installation
ui 库，控制样式的，它就是vue的一个插件
在vue项目中引入：elementui
1. 在项目中安装：
- cnpm install element-ui -s
2. 在main.js中配置
import ElementUI from 'element-ui'; // 把对象引入
import 'element-ui/lib/theme-chalk/index.css'; // 把样式引入
Vue.use(ElementUI)
3. 看到好看的，直接复制
浙公网安备 33010602011771号