解析一下vue项目、登录小案例、scoped、ref属性、props其他应用、混入mixin、插件、elementui、vuex的使用
解析一下vue项目
为什么在浏览器中访问某个地址，会显示某个页面组件
1.根组件：App.vue必须是以下代码，里面使用router-view
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
2.配置路由：router文件夹，index.js中配置以下格式
const routes=[
{
path:'/+访问地址'，
name:'名字'，
component: ‘组件’，需要将组件导入
}
]
3.在src文件，中的views中，创建vue文件，写逻辑
在页面组件中使用小组件
1.components中，创建.vue文件
2.在父组件中导入创建的组件
import 创建的vue文件 from "@/components/Child";
@代指src路径
导入在script中导入，会自动生成"@/components/Child";
3.在父组件中，使用components注册组件
components: {
‘创建的vue文件’
}
4.在父组件中使用创建的组件（Child，就是创建的组件）
<Child :msg="msg" @myevent="handleEvent"></Child>
5.自定义属性、自定义事件、插槽和之前一模一i样
6.child.vue
<template>
<div class="child">
<input type="text" v-model="name">--->{{name}}
<button @click="handleSend">点击我上传到父件</button>
</div>
</template>
<script>
export default {
name: "Child",
data(){
return{
name:''
}
},
methods:{
handleSend(){
this.$emit('myevent',this.name)
}
}
}
</script>
<style scoped>
</style>
7.homview,vue
<template>
<div class="home">
<h1>我是首页</h1>
子组件传过来的值：{{ name }}
<Child @myevent="handelEvent"></Child>
</div>
</template>
<script>
import Child from "@/components/Child";
export default {
name: 'HomeView',
data() {
return {
name: ''
}
},
methods: {
handelEvent(name) {
console.log(name)
this.name = name
}
},
components: {
Child
}
}
</script>
登录小案例
1.登录页面：loginview.vue
2.访问/login 显示这个页面组件
3.在LoginView.vue写html，和js，axios
安装 axios
cnpm install -S axios # 把安装的axios放到package.json中
4. 写ajax，向后端发送请求，给按钮绑定两个一个事件
handleSubmit() {
console.log(this.name, this.password)
axios.post('http://127.0.0.1:8000/login/', {
name: this.name,
password: this.password
}).then(res => {
// console.log(res.data)
if (res.data.code == 100) {
//跳转到百度
location.href = 'http://www.baidu.com'
} else {
alert(res.data.msg)
}
})
}
5.写一个后端的登录接口，处理好跨域问题
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'
)
6.后端代码
views.py
class LoginView(ViewSet, APIView):
@action(methods=['POST'], detail=False)
def login(self, request, *args, **kwargs):
name = request.data.get('name')
password = request.data.get('password')
user = User.objects.filter(name=name, password=password)
if user:
return Response({'code': 200, 'msg': '登陆成功', 'results': user})
else:
return Response({'code': 201, 'msg': '登录失败'})
model.py
from django.db import models
class User(models.Model):
name = models.CharField(max_length=32)
password = models.CharField(max_length=32)
路由
from django.contrib import admin
from django.urls import path
from rest_framework.routers import SimpleRouter
from app01.views import LoginView
router = SimpleRouter()
router.register('user', LoginView, 'user')
urlpatterns = [
path('admin/', admin.site.urls),
]
urlpatterns += router.urls
7.前端代码
LoginView.py
<template>
<div class="login">
用户名：<input type="text" v-model="username">
密码：<input type="password" v-model="password">
<button @click="handleLogin">登录</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "LoginView",
data() {
return {
username: '',
password: '',
}
},
methods: {
handleLogin() {
console.log(this.username, this.password)
axios.post('http://127.0.0.1:8000/user/login/', {name: this.username, password: this.password}).then( res=>{
if (res.data.code===200){
alert('登陆成功')
}else{
alert('登录失败')
}
})
}
}
}
</script>
<style scoped>
</style>
router--index.js(路由）
import LoginView from "@/views/LoginView";
const routes = [
{
path: '/login',
name: 'login',
component: LoginView
}
]
scoped
1。使样式只在当前组件生效
2.不加scoped，子组件都会使用这个样式
3.用法 <style scoped> </style>
ref属性
1、放在普通标签上，通过 this.$refs.名字》》》取到的是dom对象，可以直接操作dom
2、放在组件上，通过该this.$refs.名字》》》取到的是组件对象，这样在父组件中，就拿到了子组件对象，对象属性和方法直接用即可
props其他应用
1、基本使用：父组件传给子组件
2、限制类型
props: {
'自定义属性': Boolean
},
3、限制类型，必填，默认值
props: {
msg: {
type: String, //类型
required: true, //必要性
default: '老王' //默认值
}
}
混入mixin
1、包下的index.js,有特殊函数，相当于__init__
之前导入：
import xx from './mixin/index.js'
可以写成：
import xx from './mixin'
2、minxin混入
3、使用步骤
1.在src包下定义混入对象：mixin下index.js
export const lqz = {
data() {
return {
name: 'lqz'
}
},
methods: {
handleName() {
alert(this.name)
}
}
}
2.局部使用，组件中使用
import {lqz} from '@/mixin'
export default {
name: "LoginView",
methods: {
},
mixins:[lqz]
}
3.全局使用混入：每个组件都有效main.js中
import {lqz} from '@/mixin'
Vue.mixin(lqz)
插件
1、插件功能：用于增强Vue，有很多第三方插件
eg：(vuex，router，elemetui)
2、定义自己的插件
本质：
包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
3、使用步骤
1.定义插件：在src中创建一个plugins文件夹，文件夹下创建index.js
export default {
install() {
}
2.在vue实例中放属性
3.在插件定义混入，全局都可以使用混入
4. 在插件中定义全局组件》》全局使用
5.在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)
3.直接复制使用里面组件
vuex的使用
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
使用步骤
1.新建store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num: 10
},
mutations: {
add_mu(state, i) {
state.num += i
}
},
actions: {
add(context, i) {
// 逻辑判断，跟后端交互，通过后在做
context.commit('add_mu', i)
}
},
})
2.组件中使用变量
拿值：this.$store.state.num
修改值：三种方式
直接：this.$store.state.num += 1
间接：this.$store.commit('add_mu',3)
间间接：this.$store.dispatch('add',10)
3.任意组件都都可以使用，实现了组件间通信
浙公网安备 33010602011771号