vue-cil组件的定义和使用、登录小案例

定义使用组件

定义组件

  1. components 文件夹中创建Vue文件
  2. <template><\template>中写组件样式
  3. <script><script>中写导出语法
  4. 在导出语法中写组件的配置项vue
html 复制代码
<script>
export default {
    name:'myzujian', //组件名字
    data(){
        return {myname:"caimin"}
    }
}
</script>
<template>
<div>组件1{{myname}}</div>
</template>

<style></style>

使用组件

  1. 在使用组件的位置导入组件
  2. components中注册组件
html 复制代码
<template>
  <div class="home">
    <h1>我的组件</h1>
      <myzujian></myzujian>   //使用组件
  </div>
</template>

<script>
import myzujian from "@/components/myzujian.vue";  //导入组件
export default {
  name: 'HomeView',
  components: {
    myzujian   // 注册组件
  }
}
</script>

vue项目是如何执行起来的

入口 main.js 导入了vue和App.vue

  1. 用代码做了关联:index.html 的 id 为 app 的 div,以后,所有的代码,都写在App.vue中,按照vue的开发规范写
  2. main.js 做的,所以它是入口

访问路由显示不同组件

使用路由 :在App.vue中写一个标签<router-view/>

路由表情的配置就在router文件夹中的index文件中

配置路由

在index文件夹中通过在const routes添加对象实现

  1. 将组件导入index文件
  2. 在中添加对象
python 复制代码
{
    path: '/',    // 根路由,斜杆后面写路由
    name: 'xxx',  
    component: HomeView  // 注册组件 
},

其间组件中的通信和ref属性和之前一样

就可以实现通过访问不同的路由显示不同的组件

登录小案例

vue-cil中登录组件

html 复制代码
<script>
import axios from "axios";

export default {
    name: 'Login',
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        handlelogin() {
            axios.post('http://127.0.0.1:8000/login', {
                username: this.username,
                password: this.password
            }).then(res => {
                if (res.data.code == 100) {
                    // 跳转到某个页面
                    console.log('登录成功')
                    this.$router.push(res.data.url)
                } else {
                    alert(res.data.msg)
                }
            })
        }
    }
}

</script>

<template>
    <div class="login">
        <h1>登录页面</h1>
        <p>用户名:<input type="text" v-model="username"></p>
        <p>密码:<input type="password" v-model="password"></p>
        <button @click="handlelogin">登录</button>
    </div>
</template>

<style></style>

django后端交互

python 复制代码
class LoginView(APIView):
    def post(self, request):
        if request.data.get('username') == 'cai1' and request.data.get('password') == '111':
            res = Response(data={'code': 100, 'msg': '成功', 'url': 'home'})
        else:
            res = Response(data={'code': 101, 'msg': '用户名密码错误'})
        res['Access-Control-Allow-Origin'] = '*'
        return res
相关推荐
齐 飞5 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹22 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x1 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43912 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js