Vue——脚手架

一、ref属性

用于获取DOM 且避免使用原生DOM操作

实为vc这个组件实例在起作用

eg：

<template>
    <h2 ref='hm'>
        helllo
    </h2>
</template>


<script>
    export default{
        methods:{
            showDOM() {
                console.log('this.$refs.hm'); // <h2>hello</h2>
            }
        }
    }
</script>
// 若ref给的是组件标签 则获取的是vc

1.被用来给元素或子组件注册引用信息(id的替代者) 2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc ) 3.使用方式: 打标识:

.....

或获取: this . $refs . xxx(name叫啥就是啥)

二、数据的传递—props

实现动态数据： name age sex 等都在App.vue里面的div中写成标签的属性

// Student.vue
//简单声明接收
 props:['name' , 'age' ,'sex']
//接收的同时对数据进行类型限制
 props:{
name: String,
age: Number,
sex: string
} 
//接收的同时对数据进行类型限制+默认值的指定+必要性的限制
props:{
    name: {
        type :String, //name的类 型是字符串
        required:true, //name 是必要的
    }
},
// App.vue
<template>
    <div>
        <Student name = '静待' :age = '19' sex = 'man'>// 动态绑定的目的：让age接收为number类型
    </div>
</template>

功能:让组件接收外部传过来的数据
(1).传递数据:
    <Demo name=" xxx"/>
(2).接收数据:
    第一种方式(只接收) :
    props: [ name']
    第二种方式(限制类型) :
    props :{
        name : String
    }
    第三种方式(限制类型、限制必要性、指定默认值) :
    props:{
        name :{
            type:String, //类型
            required:true, //必要性
            default:'老王' //默认值 当然一般有required 不同时出现default
        }
    }

备注:

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

2.父传子，常用props完成子传父，常用自定义事件完成

三、mixin—混入

功能:可以把多个组件共用的配置提取成一个混入对象使用方式: 第一步定义混合，例如: { data(){....}, methods :{....} } 第二步使用混入，例如: (1).全局混入: Vue . mixin(xxx) (2).局部混入: mixins:['xxx']


功能:用于增强Vue
本质:包含install方法的 一个对象，instal1的第一 个参数是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(xx)

四、scoped样式

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

# Vue——脚手架