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

ref属性

1.被用来给元素或子组件注册引用信息(id的替代者)

2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)

3.使用方式:

打标识: ..... 或

获取: this.$refs. xx

props属性

配置项props

        功能:让组件接收外部传过来的数据

            (1).传递数据:

               

            (2).接收数据:

                第一种方式(只接收) :

                    props:['name']

                第二种方式(限制类型) :

                    props:{

                        name:String

                    }

                第三种方式(限制类型、限制必要性、指定默认值) :

                    props:{

                        name:{

                            type:String, //类型

                            required:true, //必要性

                            default:'老王'//默认值

                        }

                    }

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

 Student.vue

App.vue

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

School.vue

App.vue

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

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样式

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

        写法: