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
相关推荐
拼图20926 分钟前
Vue.js开发基础——数据绑定/响应式数据绑定
前端·javascript·vue.js
刘志辉31 分钟前
vue反向代理配置及宝塔配置
前端·javascript·vue.js
oliveira-time1 小时前
爬虫学习8
开发语言·javascript·爬虫·python·算法
星叔1 小时前
ARXML汽车可扩展标记性语言规范讲解
java·前端·汽车
编程老船长1 小时前
第18章 从零开始:春节门联网页设计,用DIV+CSS打造传统与现代的完美融合
前端·css·html
sky.fly1 小时前
HTML5+css3(浮动,浮动的相关属性,float,解决浮动的塌陷问题,clear,overflow,给父亲盒子加高度,伪元素)
前端·css·html
Coisini_甜柚か1 小时前
打字机效果显示
前端·vue3·antv
海绵波波1071 小时前
Webserver(4.5)复用
android·开发语言·javascript
老胡说前端2 小时前
vue3 elemnetPlus table 数据id 相同的合并单元格
javascript·vue.js·elementui
废柴小z2 小时前
从零创建vue+elementui+sass+three.js项目
javascript·vue.js·elementui