一、ref属性
1.被用来给元素或子组件注册引用信息（id的替代者）
2.应用在html标签上获取的是真实DOM元素，用在组件标签上是组件实例对象
3.使用方式：
(1).打标识：<h1 ref="xxx">...</h1> 或 <School ref="xxx" />
(2).获取：this.$refs.xxx
javascript
<template>
<div>
<h2 v-text="msg" ref="text"></h2>
<button @click="showDOM" ref="btn">点击获取DOM元素</button>
<School ref="sch"/>
</div>
</template>
<script>
import School from './Components/School'
export default {
name:'App',
components:{School},
data() {
return {
msg:'欢迎学习CLI！！！'
}
},
methods: {
showDOM(){
console.log(this.$refs.text) //真实DOM元素
console.log(this.$refs.btn) //真实DOM元素
console.log(this.$refs.sch) //School组件的实例对象
}
},
}
</script>二、props配置
功能：让组件接收外部传过来的数据
(1).传递数据：
<Demo name="xxx">
(2).接收数据：
第一种方式（只接收）：
props:['name']
第二种方式（限制类型）：
props：{
name:String
}
第三种方式（限制类型、限制必要性、指定默认值）：
props：{
name:{
type:String, //类型
required:true, //必要性
default:'张三' //默认值
}
}
备注：props是只读的，Vue底层会监测你对props的修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
School.vue:
javascript
<template>
<div class="school">
<h2>{{ msg }}</h2>
<h2>{{ name }}</h2>
<h2>{{ myAge+1 }}</h2>
<h2>{{ sex }}</h2>
<button @click="updateAge">点击修改年龄</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
msg:'欢迎学习CLI！！！',
myAge:this.age
}
},
methods: {
updateAge(){
this.myAge++
}
},
// 简单声明接收
props:['name','age','sex']
//接收的同时对数据进行类型限制
// props:{
// name:String,
// sex:String,
// age:Number
// }
//接收的同时对数据进行类型限制+默认值的指定+必要性的限制
// props:{
// name:{
// type:String,
// required:true
// },
// age:{
// type:Number,
// default:18
// },
// sex:{
// type:String,
// required:true
// }
// }
}
</script>App.vue:
javascript
<template>
<div>
<Student name="张三" :age="18" sex="男"/>
</div>
</template>
<script>
import Student from './Components/Student'
export default {
name:'App',
components:{Student},
}
</script>三、mixin配置
1.功能：可以把多个组件共用的配置提取成一个混入对象
2.使用方式：
(1).定义混合：
{
data(){...},
methods:{...},
...
}
(2).使用混合：
(1.全局混入：Vue.mixin(xxx)
(2.局部混入：mixins:['xxx']
javascript
/* 定义mixin.js */
export const mixin = {
methods: {
showName(){
alert(this.name)
}
},
mounted() {
console.log('你好啊!')
},
}
export const mixin2 = {
data() {
return {
x:100,
y:200
}
},
}
javascript
/* 全局混入 */
//全局混入会在所有的Vue节点上混入
import Vue from "vue";
import App from "./App"
import {mixin,mixin2} from './mixin'
Vue.mixin(mixin)
Vue.mixin(mixin2)
Vue.config.productionTip = false
new Vue({
el:'#App',
render: h => h(App)
})
javascript
/* 局部混入 */
<template>
<div>
<h2 @click="showName()">{{ name }}</h2>
<h2>{{ sex }}</h2>
</div>
</template>
<script>
import {mixin,mixin2} from '../mixin'
export default {
name:'Student',
data() {
return {
name:'张三',
sex:'男',
x:666 //若组件中已有定义变量，则优先使用组件中定义的变量
}
},
//若组件中已经定义相同生命周期钩子，则使用两遍对应的生命周期钩子
mounted(){
alert('你好啊!')
},
mixins:[mixin,mixin2]
}
</script>四、插件
1.功能：用于增强Vue
2.本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的参数。
3.定义插件：
对象.install = function (Vue,options) {
Vue.filter(......) //添加全局过滤器
Vue.directive(......) //添加全局指令
Vue.mixin(......) //配置全局混入
//添加实例方法
Vue.prototype.$myMethod = function () {......}
Vue.prototype.$myProperty= xxx
}
4.使用插件：Vue.use()
javascript
/* 定义plugins插件 */
export default {
install(Vue){
console.log("@@install",Vue)
//过滤器
Vue.filter('mySlice',function(value) {
return value.slice(0,2)
})
//自定义指令
Vue.directive('fbind',{
bind(element,binding){
element.value = binding.value
},
inserted(element,binding){
element.focus()
},
updat(element,binding) {
element.value = binding.value
},
})
//mixin
Vue.mixin({
data() {
return {
x:100
}
},
})
//在Vue原型上添加一个方法
Vue.prototype.hello = () => (alert('你好呀!'))
},
}
javascript
/* 在main.js中使用插件 */
import Vue from "vue";
import App from "./App"
import plugins from "./plugins";
Vue.config.productionTip = false
Vue.use(plugins)
new Vue({
el:'#App',
render: h => h(App)
})
javascript
/* School.vue */
<template>
<div>
<h2>{{ name | mySlice }}</h2>
<h2>{{ address }}</h2>
<button @click="test">点击我</button>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name:'清华大学',
address:'北京'
}
},
methods:{
test(){
this.hello()
}
}
}
</script>
/* Student.vue */
<template>
<div>
<h2>{{ name }}</h2>
<h2>{{ sex }}</h2>
<input type="text" v-fbind:value="name">
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name:'张三',
sex:'男',
}
},
}
</script>五、scoped样式
1.作用：让样式在局部生效，防止冲突。
2.写法：<style scoped>
当两个组件的css样式名相同时，后导入的组件会覆盖掉先导入组件中相同样式名的样式，style中引入scoped样式即可分割作用域。
javascript
/* School.vue */
<template>
<div class="demo">
<h2>{{ name | mySlice }}</h2>
<h2>{{ address }}</h2>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name:'清华大学',
address:'北京'
}
},
}
</script>
<style scoped>
.demo{
background-color: orange;
}
</style>
/* Student */
<template>
<div class="demo">
<h2 class="font-color">{{ name }}</h2>
<h2>{{ sex }}</h2>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name:'张三',
sex:'男',
}
},
}
</script>
<style lang="less" scoped>
.demo{
background-color: skyblue;
.font-color{
color: orange;
}
}
</style>