Vue CLI中的属性

ref属性

ref被用来给元素或子组件注册引用信息（id的替代者）

• 应用在html标签上获取的是真实的DOM元素
• 应用在组件标签上获取的是组件实例对象vc（如果组件用id属性标识，那么通过ref获取的也是真实的DOM元素）

使用方式：

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"/>
	</div>
</template>

<script>
	//引入School组件
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue！'
			}
		},
		methods: {
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象（vc）
			}
		},
	}
</script>

props配置项

props让组件接收外部传过来的数据

• 传递数据<Demo name='xxx' :age="18" />这里age前加:，通过v-bind使得内部的18解析为数字。

• 接收数据

  1. 只接收：props:['name', 'age']

  2. 限制类型：props:{name: String, age: Number}

  3. 限制类型、必要性、指定默认值：

     //接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
     		props:{
     			name:{
     				type:String, //name的类型是字符串
     				required:true, //name是必要的
     			},
     			age:{
     				type:Number,
     				default:99 //默认值
     			},
     			sex:{
     				type:String,
     				required:true
     			}
     		}

注意：

1. props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中，然后去修改data中的数据。

   [如果想在子组件中改父组件传递过来的数据，需要用到组件间的通信（全局事件总线，自定义事件）]

2. 当props中与当前组件配置同名时，props中的配置优先级高于当前组件。

3. props还可以从父组件向子组件传递函数值，这样子组件就可以this.函数来使用父组件的函数。

mixin混入

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

使用方式：

1. 定义混入

   const mixin = {
   	data(){...},
   	methods: {...}
   	....
   }

2. 使用混入

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

备注

1. 组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，在发生冲突时以组件优先。

   var mixin = {
   	data: function () {
   		return {
   			message: 'hello',
   			foo: 'abc'
   		}
   	}
   }
   
   new Vue({
   	mixins: [mixin],
   	data () {
   		return {
   			message: 'goodbye',
   			bar: 'def'
   		}
   	},
   	created ()  {
   		console.log(this.$data)
   		// => { message: "goodbye", foo: "abc", bar: "def"}
   	}
   })

2. 同名生命周期钩子将合并为一个数组，因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。

   var mixin = {
   	created () {
   		console.log('混入对象的钩子被调用')
   	}
   }
   
   new Vue({
   	mixins: [mixin],
   	created () {
   		console.log('组件钩子被调用')
   	}
   })
   
   // => "混入对象的钩子被调用"
   // => "组件钩子被调用"

plugin插件

功能：用于增强Vue

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

定义插件：见代码示例

使用插件：Vue.use()

export default {
	install(Vue,x,y,z){
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义全局指令
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import plugins from './plugins'
//关闭Vue的生产提示
Vue.config.productionTip = false

//应用（使用）插件
Vue.use(plugins,1,2,3)
//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

scoped样式

作用：让样式在局部生效，防止冲突

写法：<style scoped>