解析Vue项目
1、浏览器中访问某个地址，会显示某个页面的组件
根组件：App.vue
2、配置路由
router----》index.js---》const routes = [
{
path: '/lqz',
name: 'lqz',
component: Lqz # 组件，需要导入
},
]
3、写组件页面：-src---->views文件夹
4、页面组件使用小组件
1、写一个小组件,我们写了个Child.vue
2、在父组件中导入组件
@ 代指src路径
import Child from "@/components/Child";
3、父组件中，注册组件
components: {
Child
}
4、父组件中使用组件
<Child :msg="msg" @myevent="handleEvent"></Child>
5、自定义属性，自定义事件，插槽和之前一样
yyqx.vue
<template>
<div>
<h2>scoped在这里</h2>
<button>这里是父类{{name}}</button>
<hi @up="myqx"></hi>
<hr>
<h2>ref的使用</h2>
<input type="text" v-model="refname" ref="myinput"> --->{{refname}}
<button @click="handleclick">点我操作refname</button>
<hi @up="myqx" ref="myhi"></hi>
</div>
</template>
<script>
import hi from "@/components/hi.vue";
export default {
name: 'qx',
data() {
return {
name:'',
refname:''
}
},
methods: {
myqx(name) {
console.log(111)
this.name = name
},
handleclick(){
this.$refs.myinput.value = '千玺'
this.$refs.myhi.handleref()
}
},
components: {
hi,
}
}
</script>
components中的hi.vue
<template>
<div>
<h2>scoped子类也有</h2>
<h3>子类的组件</h3>
<input type="text" v-model="name">
<button @click="handleup">传给父组件</button>
<button @click="handleref">点击弹窗</button>
</div>
</template>
<script>
import {defineComponent} from 'vue'
export default defineComponent({
name: "hi",
data() {
return {
name: ''
}
},
methods: {
handleup() {
this.$emit('up', this.name)
},
handleref(){
alert('欢迎')
}
}
})
</script>
登录案例
1 、登录页面：LoginView.vue
2、访问/login 显示这个页面组件
3、在LoginView.vue写html，和js，axios
安装 axios：
cnpm install -S axios # 也就是把安装的axios放到package.json中
4、写ajax，向后端发送请求，给按钮绑定两个一个事件
安装axios，导入axios
后端：
前端：
login.vue
index:
写个后端的登录接口，处理好跨域问题，处理跨域如下:
解决跨域问题：
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' )
scoped
新建的组件 加了scoped，表示样式只在当前组件生效，如果不加，子组件都会使用这个样式
<style scoped>
</style>
ref属性
ref属性：
放在普通标签上，通过 this.$refs.名字 --》取到的是dom对象，可以直接操作dom
放在组件上，通过this.$refs.名字 -->取到的是组件对象，这样父组件中就拿到了子组件对象，对象属性和方法直接用即可
views：
components：
props其他
父传子之自定义属性
1、基本使用：
props:[‘msg’: Boolean]
2、限制类型，必填，默认值
props: {
msg: {
type: String, //类型
required: true, //必要性
default: '老王' //默认值
}
}
混入mixin
包下的 index.js 有特殊函数，
-之前导入
import xx from './mixin/index.js'
-可以写成
import xx from './mixin'
mixin(混入)
功能：可以把多个组件共用的配置提取成一个混入对象
使用步骤：
1、定义混入对象：mixin --> index.js中写：
export const lqz = {
data() {
return {
name: 'lqz'
}
},
methods: {
handleName() {
alert(this.name)
}
}
}
2、使用混入：局部使用，组件中使用
import {lqz} from '@/mixin'
mixins: [lqz]
3、局部使用混入：每个组件都有效main.js中
import {lqz} from '@/mixin'
Vue.mixin(lqz)
局部混入 mixins：
全局混入（在main.js中）：
插件
插件功能：用于增强Vue，有很多第三方插件
定义自己的插件
本质：包含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'; // 把对象引入
import 'element-ui/lib/theme-chalk/index.css'; // 把样式引入
Vue.use(ElementUI)
看到好看的，直接复制
-html
-css
-js