Vue基础第六篇

一、Vue项目解析

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

根组件：App.vue  必须是

配置路由

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 父组件中使用组件
	    
    -5 自定义属性，自定义事件，插槽，跟之前一模一样

二、登录小案例

1 登录页面：LoginView.vue

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 安装

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

三、scoped

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

四、ref属性

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

组件：

五、props其它

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

传递数据：

接收数据：

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

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

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

1 基本使用

父传子的props
    
    

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

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

 七、插件

1. 功能：用于增强Vue

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件：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中