vue-day06

解析一下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、基本使用：父组件传给子组件

props: ['自定义属性'],

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实例中放属性

Vue.prototype.$属性名=‘值’

3.在插件定义混入，全局都可以使用混入

Vue.prototype.$混入=‘值’

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.任意组件都都可以使用，实现了组件间通信