定义使用组件
定义组件
- 在 components 文件夹中创建Vue文件
- 在
<template><\template>
中写组件样式 - 在
<script><script>
中写导出语法 - 在导出语法中写组件的配置项vue
html
<script>
export default {
name:'myzujian', //组件名字
data(){
return {myname:"caimin"}
}
}
</script>
<template>
<div>组件1{{myname}}</div>
</template>
<style></style>
使用组件
- 在使用组件的位置导入组件
- 在
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
- 用代码做了关联:index.html 的 id 为 app 的 div,以后,所有的代码,都写在App.vue中,按照vue的开发规范写
- main.js 做的,所以它是入口
访问路由显示不同组件
使用路由 :在App.vue
中写一个标签<router-view/>
路由表情的配置就在router文件夹中的index文件中
配置路由
在index文件夹中通过在const routes
添加对象实现
- 将组件导入index文件
- 在中添加对象
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