ref属性
1.被用来给元素或子组件注册引用信息(id的替代者)
2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
3.使用方式:
打标识: <h1 ref="xx">.....</h1> 或<School ref="xxx" ></School>
获取: this.$refs. xx
<template >
<div>
<h1 v-text="msg" ref="title"></h1>
<button @click="showDOM" ref="btn">点我输出上方DOM元素</button>
<School ref="sch"/>
</div>
</template>
<script>
// 引入School组件
import School from './components/School'
export default {
name:'App',
components:{School},
data(){
return {
msg:'欢迎您'
}
},
methods:{
showDOM:function(){
console.log(this.$refs.title),//真实DOM元素
console.log(this.$refs),//真实DOM元素
console.log(this.$refs.sch)//School组件实例对象(vc)
}
}
}
</script>
props属性
配置项props
功能:让组件接收外部传过来的数据
(1).传递数据:
<Demo name= " xxx"/>
(2).接收数据:
第一种方式(只接收) :
props:['name']
第二种方式(限制类型) :
props:{
name:String
}
第三种方式(限制类型、限制必要性、指定默认值) :
props:{
name:{
type:String, //类型
required:true, //必要性
default:'老王'//默认值
}
}
备注: props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份, 然后去修改data中的数据。
Student.vue
<template >
<div class="school">
<h1>{{msg}}</h1>
<h2>学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}</h2>
<h2>学生年龄:{{myAge+1}}</h2>
<button @click="updateAge">尝试修改收到的年龄</button>
</div>
</template>
<script>
export default {
name:'Student',
data(){
return {
msg:'我是一个学生',
myAge:this.age
}
},
methods: {
updateAge(){
this.myAge++
}
},
//简单声明接受
props:['name','age','sex']
// 接受的同时对数据进行类型限制
/* props:{
name:String,
age:Number,
sex:String
} */
// 接受的同时对数据进行类型限制+默认值的指定+必要性的限制
/* props:{
name:{
type:String,//name的类型是字符串
required:true//name是必须要有的
},
age:{
type:Number,//age的类型是数字型
default:99//age可有可无,如果有先设一个默认值99
},
sex:{
type:String,
required:true
},
} */
}
</script>
App.vue
<template lang="">
<div>
<Student name="李四" sex="女" :age="18" />
<!-- <Student name="张三" sex="男" age="19" /> -->
</div>
</template>
<script>
// 引入Student组件
import Student from './components/Student'
export default {
name:'App',
components:{Student},
}
</script>
mixin混入
功能:可以把多个组件共用的配置提取成个混入对象
使用方式:
第一步定义混合,例如:
{
data(){...},
methods:{....}
...
}
第二步使用混入,例如:
(1).全局混入: Vue.mixin(xxx)
(2).局部混入: mixins:['xxx']
mixin.js
// 此处用的是分别暴露,故引用需要花括号
export const hunhe = {
methods: {
showName(){
alert(this.name)
}
},
mounted() {
console.log('你好啊')
},
}
export const hunhe2 = {
data(){
return {
x:100,
y:200
}
}
}
Student.vue
<template >
<div>
<h2 @click="showName">学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}</h2>
</div>
</template>
<script>
// 这些为局部混合
// import {hunhe,hunhe2} from '../mixin'
export default {
name:'Student',
data(){
return {
name:'张三',
sex:'男'
}
},
// mixins:[hunhe,hunhe2]
}
</script>
School.vue
<template >
<div>
<h2 @click="showName">学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</template>
<script>
// 引入一个hunhe
// import {hunhe,hunhe2} from '../mixin'
export default {
name:'School',
data(){
return {
name:'尚硅谷',
address:'北京',
x:666
}
},
// mixins:[hunhe,hunhe2],
/* mounted() {
console.log('你好啊人世间!')
}, */
}
</script>
App.vue
<template lang="">
<div>
<School></School>
<hr>
<Student></Student>
</div>
</template>
<script>
// 引入Student组件
import Student from './components/Student'
import School from './components/School'
export default {
name:'App',
components:{Student,School},
}
</script>
mian.js(全局混入)
// 引入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)
})
plugins插件
插件
功能:用于增强Vue
本质:包含install方法的一个对象,install的第一个参数是Vue, 第二个以后的参数是插件使用者传递的数据。
定义插件:
对象.install = function(Vue, options) {
// 1.添加全局过滤器
Vue . filter(....)
// 2.添加全局指令
Vue. directive(....)
// 3.配置全局混入(合)
Vue . mixin(....)
// 4.添加实例方法
Vue.prototype.$myMethod = function(){...}
Vue.prototype.$myProperty = xxxx
}
使用插件: Vue.use()
App.vue
<template lang="">
<div>
<School></School>
<hr>
<Student></Student>
</div>
</template>
<script>
// 引入Student组件
import Student from './components/Student'
import School from './components/School'
export default {
name:'App',
components:{Student,School},
}
</script>
plugins.js
export default {
install(Vue){
// 全局过滤器
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 = function(){
alert('你好啊')
}
}
}
main.js
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入插件
import plugins from './plugins'
// 关闭Vue生产提示
Vue.config.productionTip = false
// 应用(使用)插件
Vue.use(plugins)
// 创建vm
new Vue({
el:"#app",
render: h => h(App)
})
scoped样式
作用:让样式在局部生效,防止冲突。
写法: <style scoped>
例如:在App组件下属两个子组件Student和School中,都有名为demo的class属性,若在style标签内添加scoped样式,那么两个demo不会互相影响,否则根据导入顺序,后导入的覆盖
<style scoped>
.demo{
background-color: orange;
}
</style>