解析Vue项目

// 1 为什么浏览器中访问某个地址，会显示某个页面组件
	-根组件：App.Vue必须是：
        <template>
             <div id="app">
                 <router-view></router-view>
        </div>
        </template>
	-配置路由：
		// 先导入
		import yang from '../views/yang'
		// 配置路由
		const routes = [
            {
                path: "/yang",
                name: "yang",
                component: yang //导入的组件
            }
        ]
// 2 在页面组件中使用小组件
    -1、在components中写一个小组件，我写的是child
    -2、在父组件中导入组件：
    	 // @ 代指src路径
    	import Child from "@/components/child.vue";
    -3、在父组件中注册组件：
    	components: {Child},
    -4、在父组件中使用组件：
    	在 <template></template> 中以标签形式引入：
			 -<Child :msg="msg" @myevent="handleEvent"></Child>
	-5 自定义属性，自定义事件，插槽，跟之前一模一样

登录小案例

1、创建一个登录的组件
2、访问/login显示这个组件
3、在LoginView.vue写html，和js，axios
	-安装 axios
    -cnpm install -S axios  // 把安装的axios放到package.json中
4、写ajax，向后端发送请求，给按钮绑定两个一个事件



////// 解决后端跨域问题
1、安装：
	pip 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'
)

Vue代码

<template>
  <div>
    <p>账号：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="password"></p>
    <p>
      <button @click="login">登录</button>
    </p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "LoginView",
  data() {
    return {
      username: "",
      password: ""
    }
  },
  methods: {
    login() {
      console.log(this.username, this.password)
      axios.post('http://127.0.0.1:8000/login/login/', {
        username: this.username,
        password: this.password
      }).then(res => {
        if (res.data.code === 100) {
          location.href = 'https://www.baidu.com/'
        } else {
          alert(res.data.msg)
        }
      })
    }
  }
}
</script>

<style>

</style>

drf 代码

class Login(ViewSet):
    @action(methods=["POST"], detail=False)
    def login(self, request):
        username = request.data.get("username")
        password = request.data.get("password")
        if username == "kevin" and password == "123":
            return Response({"code": 100, "msg": "登录成功"})
        else:
            return Response({"code": 101, "msg": "登录失败账号或密码输入错误"})

scoped

// 新建的组件   加了scoped，表示样式只在当前组件生效，如果不加，子组件都会使用这个样式
<style scoped>
</style>

ref属性

// ref属性
	-放在普通标签上，通过  this.$refs.名字---》取到的是dom对象，可以直接操作dom
    -放在组件上，通过该this.$refs.名字---》取到的是组件对象，这样在父组件中，就拿到了子组件对象，对象属性和方法直接用即可

props

// 父传子之自定义属性

  // 1 基本使用
    props: ['msg'],
  // 2 限制类型：
    props: {'msg': Boolean},
  // 3 限制类型，必填，默认值
     props: {
        msg: {
          type: String, //类型
          required: true, //必要性
          default: '老王' //默认值
        }
      }

混入mixin

// 包下的 index.js  有特殊函数，
	-之前导入 
    import xx from './mixin/index.js'
    -可以写成
	import xx from './mixin'

mixin(混入)：
 	功能：可以把多个组件共用的配置提取成一个混入对象
    
使用步骤：
	-1、定义混入对象：
        export const yang = {
            data() {
                return {
                    name: "mixin"
                }
            },
            methods: {
                handerone() {
                    alert(this.name)
                }
            }
        }
    -2、使用局部混入：
    	import {yang} from '@/mixin'
		mixins: [yang]
    -3、全局使用混入：每个组件都有效main.js中
        import {yang} from '@/mixin'
        Vue.mixin(yang)

插件

插件功能：用于增强Vue，有很多第三方插件
	有哪些第三方插件：
    	vuex，router，elemetui
        
// 定义自己的插件
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

使用步骤：
	1、定义插件：plugins---->index.js--->：
        export default {
            install() {
                // 1 在vue实例中放属性
                // 2 定义混入，全局都可以使用混入
                // 3 自定义指令(不讲了)--->以后我们可能使用了一个第三方插件，它提供了一些指令  v-lq
                // 4 定义全局组件--->全局
            }
        }
	 2、在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';       // 把对象引入

Vuex

# 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

# 使用步骤：
	-1、在store/index.js中
    	import Vue from '../../../vueprojact/Vue'
        import Vuex from 'vuex'

        Vue.use(Vuex)

        export default new Vuex.Store({
            state: {
                name: "我是彭于晏"
            },
            mutations: {
                add_name(state) {
                    console.log("---+++ 来到了mutations")
                    state.name = name
                }
            },
            actions: {
                add(context) {
                    console.log("+++++ 来到了action")
                    context.commit("add_name")
                }
            },
        })
    -2、在组件中使用变量
        -2.1、拿值：this.name = this.$store.state.name
        -2.2、 修改值：三种方式
            -直接：this.$store.state.num += 1
            -间接：this.$store.commit('add_mu',3)
            -间间接：this.$store.dispatch('add',10)
    -3、任意组件都都可以使用，实现了组件间通信