ref属性+props属性+mixin属性+plugins插件+scoped属性

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>