解析Vue项目
// 1 为什么浏览器中访问某个地址，会显示某个页面组件
-根组件：App.Vue必须是：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
-配置路由：
// 先导入
import yang from '../views/yang'
// 配置路由
const routes = [
{
path: "/yang",
name: "yang",
component: yang //导入的组件
}
]
// 2 在页面组件中使用小组件
-1、在components中写一个小组件，我写的是child
-2、在父组件中导入组件：
// @ 代指src路径
import Child from "@/components/child.vue";
-3、在父组件中注册组件：
components: {Child},
-4、在父组件中使用组件：
在 <template></template> 中以标签形式引入：
-<Child :msg="msg" @myevent="handleEvent"></Child>
-5 自定义属性，自定义事件，插槽，跟之前一模一样
登录小案例
1、创建一个登录的组件
2、访问/login显示这个组件
3、在LoginView.vue写html，和js，axios
-安装 axios
-cnpm install -S axios // 把安装的axios放到package.json中
4、写ajax，向后端发送请求，给按钮绑定两个一个事件
////// 解决后端跨域问题
1、安装：
pip 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'
)
Vue代码
<template>
<div>
<p>账号：<input type="text" v-model="username"></p>
<p>密码：<input type="password" v-model="password"></p>
<p>
<button @click="login">登录</button>
</p>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "LoginView",
data() {
return {
username: "",
password: ""
}
},
methods: {
login() {
console.log(this.username, this.password)
axios.post('http://127.0.0.1:8000/login/login/', {
username: this.username,
password: this.password
}).then(res => {
if (res.data.code === 100) {
location.href = 'https://www.baidu.com/'
} else {
alert(res.data.msg)
}
})
}
}
}
</script>
<style>
</style>
drf 代码
class Login(ViewSet):
@action(methods=["POST"], detail=False)
def login(self, request):
username = request.data.get("username")
password = request.data.get("password")
if username == "kevin" and password == "123":
return Response({"code": 100, "msg": "登录成功"})
else:
return Response({"code": 101, "msg": "登录失败账号或密码输入错误"})
scoped
// 新建的组件 加了scoped，表示样式只在当前组件生效，如果不加，子组件都会使用这个样式
<style scoped>
</style>
ref属性
// ref属性
-放在普通标签上，通过 this.$refs.名字---》取到的是dom对象，可以直接操作dom
-放在组件上，通过该this.$refs.名字---》取到的是组件对象，这样在父组件中，就拿到了子组件对象，对象属性和方法直接用即可
props
// 父传子之自定义属性
// 1 基本使用
props: ['msg'],
// 2 限制类型：
props: {'msg': Boolean},
// 3 限制类型，必填，默认值
props: {
msg: {
type: String, //类型
required: true, //必要性
default: '老王' //默认值
}
}
混入mixin
// 包下的 index.js 有特殊函数，
-之前导入
import xx from './mixin/index.js'
-可以写成
import xx from './mixin'
mixin(混入)：
功能：可以把多个组件共用的配置提取成一个混入对象
使用步骤：
-1、定义混入对象：
export const yang = {
data() {
return {
name: "mixin"
}
},
methods: {
handerone() {
alert(this.name)
}
}
}
-2、使用局部混入：
import {yang} from '@/mixin'
mixins: [yang]
-3、全局使用混入：每个组件都有效main.js中
import {yang} from '@/mixin'
Vue.mixin(yang)
插件
插件功能：用于增强Vue，有很多第三方插件
有哪些第三方插件：
vuex，router，elemetui
// 定义自己的插件
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
使用步骤：
1、定义插件：plugins---->index.js--->：
export default {
install() {
// 1 在vue实例中放属性
// 2 定义混入，全局都可以使用混入
// 3 自定义指令(不讲了)--->以后我们可能使用了一个第三方插件，它提供了一些指令 v-lq
// 4 定义全局组件--->全局
}
}
2、在main.js中使用插件
import lqz from '@/plugins'
// 名字随意命名
Vue.use(lqz) // 这句话，就会执行lqz中得install，并且把vue传入
Elementui
// ui 库，控制样式的，它就是vue的一个插件
// 在vue项目中引入 elementui
1 在项目中安装：
cnpm install element-ui -S
2 main.js配置
import ElementUI from 'element-ui'; // 把对象引入
Vuex
# 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
# 使用步骤：
-1、在store/index.js中
import Vue from '../../../vueprojact/Vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
name: "我是彭于晏"
},
mutations: {
add_name(state) {
console.log("---+++ 来到了mutations")
state.name = name
}
},
actions: {
add(context) {
console.log("+++++ 来到了action")
context.commit("add_name")
}
},
})
-2、在组件中使用变量
-2.1、拿值：this.name = this.$store.state.name
-2.2、 修改值：三种方式
-直接：this.$store.state.num += 1
-间接：this.$store.commit('add_mu',3)
-间间接：this.$store.dispatch('add',10)
-3、任意组件都都可以使用，实现了组件间通信
