一、Vue项目解析

1 为什么浏览器中访问某个地址，会显示某个页面组件

根组件：App.vue 必须是

<template>
          <div id="app">
            <router-view></router-view>
          </div>
    	</template>

配置路由

router----》index.js---》const routes = [
                {
                path: '/lqz',
                name: 'lqz',
                component: Lqz  # 组件，需要导入
            },
        ]


放心大胆的写页面组件  -src---->views文件夹

2 在页面组件中使用小组件

-1 写一个小组件，我们写了个Child.vue
    -2 在父组件中，导入组件
    	# @ 代指src路径
		import Child from "@/components/Child";
    -3 父组件中，注册组件
    	  components: {
            Child
          }
    -4 父组件中使用组件
	    <Child :msg="msg" @myevent="handleEvent"></Child>
    -5 自定义属性，自定义事件，插槽，跟之前一模一样

二、登录小案例

1 登录页面：LoginView.vue

<template>
  <div>
    <p>用户名：<input type="text" v-model="name"></p>
    <p>密码：<input type="password" v-model="password"></p>
    <button @click="handleClick">登录</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "LoginView",
  data() {
    return {
      name: '',
      password: '',
    }
  },
  methods: {
    handleClick() {
      console.log(this.name, this.password)
    }
  }
}
</script>

<style scoped>

</style>

2 访问/login 显示这个页面组件

3 在LoginView.vue写html，和js，axios

-安装 axios
-cnpm install -S axios

- 把安装的axios放到package.json中

4 写ajax，向后端发送请求，给按钮绑定两个一个事件

#安装axios，导入axios
	    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)
            }
          })
        }

4 写个后端的登录接口，处理好跨域问题，处理跨域如下

1 安装

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'
        )

三、scoped

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

<style scoped>
</style>

四、ref属性

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

<template>
  <div class="home">
    <h1>refs的使用 原生标签</h1>
    <input type="text" v-model="name" ref="myinput">--->{{ name }}
    <br>
    <button @click="handleClick">点我看控制台</button>
    <br>
    <h1>refs的使用 组件</h1>
    <HiWord ref="myhiword"></HiWord>

    <h1>父传子的props</h1>
    <HiWord msg="辛弃疾"></HiWord>
    <hr>

    <h1>混入</h1>
    <button @click="handleName">点我弹名字</button>

  </div>
</template>

<script>

import HiWord from "@/components/HiWord";

export default {
  name: 'HomeView',
  components: {
    HiWord
  },
  data() {
    return {
      name
    }
  },
  methods: {
    handleClick() {
      console.log(this.$refs)
      // this.$refs.myinput.value = 'xxx
      // this.$refs .myhello就是组件对象
      // console.log(this.$refs.myhiword.name)
      this.$refs.myhiword.name = 'ssss'
    }
  }
}
</script>

组件：

<template>
  <div>
    <h1>我是hiword组件：{{ name }}</h1>
    <button @click="handleClick">点我看帅哥</button>
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: "HiWord",
  data() {
    return {
      name: '彭于晏'
    }
  },
  methods: {
    handleClick() {
      alert(this.name)
    },

  },
  // 方式一
  // props: ['msg']
  // 方式二
  // props: ['msg',Boolean]
  // 方式三
  props: {
    msg: {
      type: String,//类型
      // required: true,//必要性
      // default: '老王'//默认值
    }
  }
}

</script>

<style scoped>

</style>

五、props其它

功能：让组件接收外部传过来的数据

传递数据：

接收数据：

第一种方式（只接收）：props:['name']

第二种方式（限制类型）：props:{name:String}

第三种方式（限制类型、限制必要性、指定默认值）：

1 基本使用

<h1>父传子的props</h1>
    <HiWord msg="辛弃疾"></HiWord>
    <hr>

2.限制类型

// 方式一
  // props: ['msg']
  // 方式二
  // props: ['msg',Boolean]
  // 方式三
  props: {
    msg: {
      type: String,//类型
      // required: true,//必要性
      // default: '老王'//默认值
    }

六、混入

mixin(混入)
功能：可以把多个组件共用的配置提取成一个混入对象

使用方式：

第一步定义混入：

export const hunhe = {
  methods: {
    showName() {
      alert(this.name);
    },
  },
  mounted() {
    console.log("你好啊！");
  },
};
export const hunhe2 = {
  data() {
    return {
      x: 100,
      y: 200,
    };
  },
};

第二步：使用混入（全局）

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import {hunhe,hunhe2} from './mixin'
//关闭Vue的生产提示
Vue.config.productionTip = false

Vue.mixin(hunhe)
Vue.mixin(hunhe2)


//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

第三步：使用混入（局部）

<template>
  <div>

  </div>
</template>

<script>
import {hunhe,hunhe2} from '../mixin'

export default {
  name: "App",
  data() {
    return {
      name: "lqz",
    };
  },
  mixins:[hunhe,hunhe2]
};
</script>

七、插件

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件：plugins/index.js

import Vue from "vue";

export default {
    install(a) {
        console.log('执行了插件', a)
        // 定义指令
        //定义全局指令：跟v-bind一样，获取焦点
        Vue.directive("fbind", {
            //指令与元素成功绑定时（一上来）
            bind(element, binding) {
                element.value = binding.value;
            },
            //指令所在元素被插入页面时
            inserted(element, binding) {
                element.focus();
            },
            //指令所在的模板被重新解析时
            update(element, binding) {
                element.value = binding.value;
            },
        });

        //定义混入，所有vc和vm上都有name和lqz
        Vue.mixin({
            data() {
                return {
                    name: '彭于晏',
                    age: 19,
                };
            },
        });

        // 原型上放方法，所有vc和vm都可以用hello
        Vue.prototype.hello = () => {
            alert("你好啊");
        };


    }
}

使用插件：main.js中

App.vue中

<template>
  <div>
  {{name}}
    <input type="text" v-fbind:value="v">
    <br>
    <button @click="hello">点我</button>
  </div>
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      v:'xxx'
    };
  },
};
</script>