Vue(九)_.vu、“m 9 ! 、。`′ !?? ?-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44482737/article/details/126063777

vue.config.js配置文件

下面的图粉色框可改，红色不可改
在这里插入图片描述

使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
使用vue.config.js可以对脚手架进行个性化定制

文件命名为 vue.config.js 详情见：https://cli.vuejs.org/zh
在这里插入图片描述

实例代码如下

module.exports = {
  pages: {
    index: {
      //入口
      entry: 'src/main.js',
    },
  },
	lintOnSave:false, //关闭语法检查
}

entry: ‘src/main.js’, 这里可以修改入口函数的名称，一般使用默认。

ref属性

被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
使用方式：
1. 打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
2. 获取：this.$refs.xxx

示例代码：

<template>
	<div>
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<School ref="sch"></School>
	</div>
</template>
<script>
	import School from './components/School'

	export default {
		name: 'App',
		components: {
			School
		},
		data() {
			return {
				msg: 'Welcome to the school'
			}
		},
		methods: {
			showDOM() {
				console.log(this.$refs.title);
				console.log(this.$refs.btn);
				console.log(this.$refs.sch);
			}
		}
	}
</script>

运行结果
在这里插入图片描述

props配置项

功能：让组件接收外部传过来的数据
传递数据：<Demo name="xxx"/>在组件标签中写传递的数据
接收数据：（props比data的优先级更高）
1. 第一种方式（只接收）：props:['name']
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型、限制必要性、指定默认值）：

细节一：第一种方式，如果标签要传入的是数字，那么需要加v-bind数字绑定，这样的话穿过去的就是一个数字而不是字符串，这样在后续进行数值加减就不会出现问题。如下图所示
在这里插入图片描述

细节二：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据 如下图所示
在这里插入图片描述
三种方式的示例代码

 		//第一种方式
        props: ['name', 'age']

        第二种方式 限制方式
        props: {
            name: String,
            age: Number
        }

        //第三种方式
        props: {
            name: {
                type: String,
                require: true,
            },

            age: {
                type: Number,
                default: 99
            }
        }

mixin(混合）

功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：

第一步定义混合：
```
{
    data(){....},
    methods:{....}
    ....
}
```
第二步使用混入：

全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

示例如下
定义一个mixin.js在src目录下
在这里插入图片描述

从组件中导入， 如果组件中也带mounted()钩子那么两个钩子函数都会执行，如果mixin中的data(){}和组件中的data(){}有相同的属性，那么以组件中的为主。 运行结果如下图：
在这里插入图片描述

在这里插入图片描述
运行结果

全局混入

插件

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

 对象.install = function (Vue, options) {
        // 1. 添加全局过滤器
        Vue.filter(....)
    
        // 2. 添加全局指令
        Vue.directive(....)
    
        // 3. 配置全局混入(合)
        Vue.mixin(....)
    
        // 4. 添加实例方法
        Vue.prototype.$myMethod = function () {...}
        Vue.prototype.$myProperty = xxxx