解析一下vue项目

index.html文件：就是被根组件【template】写什么，这里就会显示什么在前端展示。在根组件中加了router-view标签使用router-view标签撑满这个div访问某个路由，显示不同的页面主键，router-view就是被某个组件给占了

vue-router：第三方插件它就是来完成路由匹配的：访问/显示HomeView.vue组件，访问/about显示AboutView.vue这个组件的页面

跟组件中：App.vue的整个页面中rout-view标签

导入组件的方法 import 组件名 from “../文件目录/文件名”

使用HelloWorld.vue写组件在前端使用（HomeView.vue）

Hellowold.vue文件编写

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="handleClick">点击查看名字</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      name:'久保'
    }
  },
  props: {
    msg: String
  },
  methods:{
    handleClick(){
      alert(this.name)
    }
  }
}
</script>

HomeView.vue文件编写

<template>
  <div class="home">
    <HelloWorld msg="02"></HelloWorld>  使用组件因为有一个msg没有值
  </div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld.vue";导入组件
export default {
  name: 'HomeView',
  components: {
    HelloWorld   注册组件
  }
}
</script>

使用HelloWorld.vue写组件在前端使用（AboutView.vue）

AboutView.vue文件编写

<template>
  <div class="about">
    <h1>这是文件AboutView</h1>
    <HelloWorld msg="02">式守</HelloWorld>
  </div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld";
export default {
  name: 'About',   组件名
  components:{
    HelloWorld
  }
}
</script>

路由文件router（index）

路由导入在views下创建vue文件

在router（index）中导入和注册

自己定义的文件

<template>
<div class="yjx">
  <button @click="handleClick">点一下</button>
</div>
</template>
<script>
export default {
  name: "02",
  methods:{
    handleClick(){
      alert('还是久保')
    }
}
}
</script>
<style scoped>
</style>

注册文件中注册

import yjx from "@/views/yjx"; 导入文件
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  },   注册
    {
    path: '/yjx',
    name: 'yjx',
    component: yjx
  }
]

浏览器展示效果

创建小组件Child.vue在页面中使用创建在components下面@符号就是src的途径替代..

在页面文件中注册一个

<template>
<div class="yjx">
  <button @click="handleClick">点一下</button>
  <hr>
  <Child></Child>
</div>
</template>
<script>
import Child from "@/components/Child"; 导入组件文件
export default {
  name: "02",
  methods:{
    handleClick(){
      alert('还是久保')
    }
},
  components:{
    Child   注册组件
  }
}
</script>
<style scoped>
</style>

组件文件Child

<template>
<div>
  <button @click="back">别退</button>{{title}}<button>冲冲冲</button>
</div>
</template>
<script>
export default {
  name: "Child",
  data(){
    return{
      title:'久保'
    }
  },
  methods:{
    back(){
      alert('前面就是久保不要退')
}
  }
}
</script>
<style scoped>
</style>

父组件给子组件信息

yxj文件
div里面
<Child :msg="msg"></Child>
export default里面
data(){
    return {
      msg:"父件的式守 msg"
    }
  },
Child文件接收
export default里面
props:['msg'],
div里面
父组件传的数据{{msg}}

子传父组件

子文件编写

<template>
<div>
  <button @click="back">别退</button>{{title}}<button>冲冲冲</button>
  <hr>
  父组件传的数据{{msg}}
  <hr>
  <input type="text" v-model="name">----{{name}}
  <button @click="handelSend">点击传给父组件</button>
</div>   点击绑定事件
</template>
<script>
export default {
  name: "Child",
  data(){
    return{
      title:'久保',
      name:''  定义一下
    }
  },
  methods:{
    back(){
      alert('前面就是久保不要退')
},handelSend(){
      this.$emit('sui',this.name)
    }   获取input输入的数据传给父件
  },
  props:['msg'],
}
</script>
<style scoped>
</style>

父件的编写

<template>
<div class="yjx">
  <button @click="handleClick">点一下</button>
  子组件传来的{{name}} 展示到前端
  <hr>
  <Child :msg="msg" @sui="hand"></Child>
</div>   子组件的事件sui接收数据绑定方法
</template>
<script>
import Child from "@/components/Child";
export default {
  name: "02",
  data(){
    return {
      msg:"父件的式守 msg",
      name: ''  要定义一下
    }
  },
  methods:{
    handleClick(){
      alert('还是久保')
    },
    hand(name){    接收数据
      this.name = name
    }
},
  components:{
    Child
  }
}
</script>
<style scoped>
</style>

在加一个插件在子组件哦都是在div中

子件中

  <h1>插槽使用</h1>
  <slot></slot>
  <h1>插槽结束</h1>
父件中

<Child :msg="msg" @sui="hand">
    <div>插件的作用式守久保</div>
  </Child>

前后端实现登录

前端页面编写

在views目录下创建一个vue文件

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

<script>
import axios from 'axios'  导入axios
export default {
  name: "loginview",
  data(){
    return{name:'',
    password:'',}
  },
  methods:{
    handleSumbit(){
      axios.post('http://127.0.0.1:8000/login/',{  发送数据的地址
        name: this.name,
        password: this.password
      }).then(res =>{
        if(res.data.code==100){
          location.href='https://www.bilibili.com/'  跳转的网址
        }else{
          alert(res.data.msg)
        }
      })
    }
  }
}
</script>
<style scoped>
</style>

在注册一下

import loginview from "@/views/loginview";
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  },
    {
    path: '/yjx',
    name: 'yjx',
    component: yjx
  },
      {
    path: '/login',
    name: 'login',
    component: loginview
  }
]

后端的编写

解决跨域问题

下载第三方模块：pip3.8 install django-cors-headers

注册一下

INSTALLED_APPS = (
            ...
            'corsheaders',
            ...
        )

添加中间件

 MIDDLEWARE = [
            ...
            'corsheaders.middleware.CorsMiddleware',
            ...
        ]

配置文件中添加配置

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'
        )

视图层编写views

from django.http import JsonResponse
import json
def login(request):
    data = json.loads(request.body)  与前端字符编译一下
    name = data.get('name')
    password = data.get('password')
    if name == 'yjx' and password == '123':
        return JsonResponse({'code': 100, 'msg': '登录成功'})
    else:
        return JsonResponse({'code': 101, 'msg': '用户名或者密码错误'})
路由配置
path('login/', views.login)

scoped

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

<style scoped>
写在这里的样式只会生效在当前组件
</style>

ref属性（放在普通标签上，通过 this.\(refs.名字---》取到的是dom对象，可以直接操作dom，放在组件上，通过该this.\)refs.名字---》取到的是组件对象，这样在父组件中，就拿到了子组件对象，对象属性和方法直接用即可）

前端html文件父组件

<template>
  <div class="home">
    <h1>refs的使用</h1>
    <input type="text" v-model="name" ref="input">   ---->{{name}}
    <br>
    <button @click="handleClick">看控制台</button>
    <br>
    <yzx ref="my"></yzx>
  </div>
</template>
<script>
import yzx from "@/components/yzx";
export default {
  name: 'HomeView',
  data(){
    return{
      name
    }
  },
  components: {
    yzx
  },
  methods:{
    handleClick(){
      console.log(this.$refs)
      // this.$refs.input.value= 'yjx'  input框里就是这个数据
      // this.$refs.my 就是组件对象
      // console.log(this.$refs.my.name) 拿的就是组件的name值
      this.$refs.my.haneleClick()  父件也弹的是子件的name属性
	  this.$refs.my.name='式守'  父件更换了子件的name值
  }}
}
</script>

子组件文件

<template>
<div>
  <h2>组件</h2>
  <button @click="haneldClick">点我看好看的</button>
</div>
</template>
<script>
export default {
  name: "yzx",
  data(){
    return{
      name:"叶子曦"
    }
  },
  methods:{
    haneldClick(){
      alert(this.name)
    }
  }
}
</script>
<style scoped>
</style>

props其它子件的使用

 props: {
        msg: {
          type: String, //类型
          required: true, //必要性
          default: '老王' //默认值
        }
      }

混入mixin,多个就用逗号隔开，要什么注册什么

就是把多个组件共用的配置提取成一个混入对象（如果自己有数据就用自己的）

使用方法在src文件创建一个mixin文件夹，创一个js文件在里面写变量和函数

export const yjx = {
    data(){
        return{
            name:'yzx'
        }
    },
    methods: {
        yjx(){
            alert(this.name)
        }
    }
}

在html文件中使用就不用传变量跟属性

<template>
<div>
  <h1>叶子曦</h1>
  <button @click="yjx">点一下</button>  这样就不用自己写
</div>
</template>
<script>
import {yjx} from '@/mixin'  导入进来
export default {
  name: "YzxView",
  data(){
    return{}
  },
  methods:{},
  mixins:[yjx]    注册一下
}
</script>
<style scoped>
</style>

定义全局混入文件（在main文件中添加）

import {yjx} from "@/mixin";
Vue.mixin(yjx)

插件（用于增强Vue，有很多第三方插件）

Vue.prototype.\(aa='aa'添加数据拿的话this.\)aa(防止与属性里定义的aa给重叠了)

使用方法

	1 定义插件：plugins---》index.js---》
        export default {
            install() {
            # 1 在vue实例中放属性
            # 2 定义混入，全局都可以使用混入
            # 3 自定义指令(不讲了)---》以后我们可能使用了一个第三方插件，它提供了一些指令  v-lq
            # 4 定义全局组件---》全局
        }
    }
在main.js中 使用插件
        import （自己定义的插件名） from '@/plugins'
        Vue.use(插件名)  # 这句话，就会执行lqz中得install，并且把vue传入

Elementui

在vue项目中引入 elementui

在项目中安装：cnpm install element-ui -S

main.js配置这三个

import ElementUI from 'element-ui'; // 把对象引入

import 'element-ui/lib/theme-chalk/index.css'; // 把样式引入

Vue.use(ElementUI)

根据自己的需要导入对应的样式要求

<template>
<div>   需要的内容cv
  <el-row>
    <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
  </el-row>
</div>
</template>
<script>
export default {
  name: "yj"
}
</script>
<style scoped>  样式cv
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

本栏目推荐文章
• 自定义jQuery插件Step by Step
• 2024-01-13 记录react-dnd拖拽组件的用法
• k8s核心组件介绍
• 如何让Visual Studio Tools for Unity插件用于调试你自己的Mono嵌入应用程序
• vue---循环方式以及跳出循环
• Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型（Types）、方法（Methods）和事件（Events）的属性和参数解析
• 如何让spring扫描到自定义注解的组件
• Flutter 自定义一个右侧可滑动 左侧为按钮的组件
• 小程序开发：将改造后的步骤条插件移植到自己的小程序
• vue-quill编辑器vue2版

插件 第三方 样式 组件 vue插件 第三方 样式 组件 第三方 样式 组件 第三方 组件 插件 数字 样式 组件 电池vue 样式 组件scoped vue compositionapi第三方 组件vue3 样式 组件vue 写法 组件 插件vue3 iframe样式 组件vue 样式 组件 程序 图片