ref
ref被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象vc
使用方式
a 打标识：
或
b 获取：this.$refs.xxx
<template>
<div>
<h1 v-text="msg" ref="title"></h1>
<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
<School ref="sch"/>
</div>
</template>
<script>
import School from './components/School'
export default {
name:'App',
components:{ School },
data() {
return {
msg:'欢迎学习Vue！'
}
},
methods: {
showDOM(){
console.log(this.$refs.title) // 真实DOM元素
console.log(this.$refs.btn) // 真实DOM元素
console.log(this.$refs.sch) // School组件的实例对象（vc）
}
},
}
</script>props 配置项
props让组件接收外部传过来的数据
传递数据
接收数据
第一种方式（只接收）props:['name', 'age']
第二种方式（限制类型）props:{name:String, age:Number}
第三种方式（限制类型、限制必要性、指定默认值）
props: {
name: {
type: String, // 类型
required: true,// 必要性
default: 'cess'// 默认值
}
}备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中，然后去修改data中的数据
Student.VUE
<template>
<div id="app">
<School name="付强" sex="男" v-bind:age=18+5></School>
</div>
</template>
<script>
// import的名称就是组件的name
import StudentXinxi from './components/Student.vue';
export default {
name: 'App',
components: {School:StudentXinxi},
}
</script>APP.VUE
<template>
<div id="app">
<School name="付强" sex="男" v-bind:age=18+5></School>
</div>
</template>
<script>
// import的名称就是组件的name
import StudentXinxi from './components/Student.vue';
export default {
name: 'App',
components: {School:StudentXinxi},
}
</script>mixins局部混入以及xixin全局混入
mixins混入
mix可以实现组件的复用性，通过引入让多个页面(组件)的代码使用一个文件引入即可。
在外部引入复用文件
export const mixin={
methods:{
showName(){
alert(this.name);
}
},
}
在要用的页面引入代码并且使用mixinx[]来完成代码的复用
import {mixin} from './showSize'
mixins:[mixin]当然你要是在一个页面进行代码xinins也是可以的
代码实例：
var mixin = {
created: function () { console.log(1) }
}
var vm = new Vue({
created: function () { console.log(2) },
mixins: [mixin]
})全局混入
全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。
请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。
例如：你要是在混入代码中加入了生命周期，然后里面写了alter弹窗，那么你想想你的每个页面(组件)的vc里面都会有你写的弹窗你有几个组件就弹几次。
在main.js里面进行引入
import {mixin} from './components/showSize'
Vue.mixin(mixin)混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。这句话是啥意思勒？按照我的思路就是你放在哪里哪里之后的vc实例就会被全局混入。
插件
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：
Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
CODE
定义插件 plujins.js
export default{
install(){
console.log('install')
}
}
调用插件 main.js
Vue.use(obj)scoped样式
1作用：让样式在局部生效，防止冲突
2写法： <style scoped>
<style scoped>
#color{
background: skyblue;
}
</style>其他
Vue中的webpack并没有安装最新版，导致有些插件也不能默认安装最新版，如 npm i less-loader@7，而不是最新版
查看webpack版本：
npm view webpack versions
查看less-loader版本：
npm view less-loader versions
