Vue 脚手架基础特性
一、ref属性
1.被用来给元素或子组件注册引用信息（id的替代者）
2.应用在html标签上获取的是真实DOM元素，用在组件标签上是组件实例对象
3.使用方式：
(1).打标识：<h1 ref="xxx">...</h1> 或 <School ref="xxx" />
(2).获取：this.$refs.xxx
<template><div><h2 v-text="msg" ref="text"></h2><button @click="showDOM" ref="btn">点击获取DOM元素</button><School ref="sch"/></div>
</template><script>import School from './Components/School'export default {name:'App',components:{School},data() {return {msg:'欢迎学习CLI！！！'}},methods: {showDOM(){console.log(this.$refs.text) //真实DOM元素console.log(this.$refs.btn) //真实DOM元素console.log(this.$refs.sch) //School组件的实例对象}},}
</script>二、props配置
功能：让组件接收外部传过来的数据
(1).传递数据：
<Demo name="xxx">
(2).接收数据：
第一种方式（只接收）：
props:['name']
第二种方式（限制类型）：
props：{
name:String
}
第三种方式（限制类型、限制必要性、指定默认值）：
props：{
name:{
type:String, //类型
required:true, //必要性
default:'张三' //默认值
}
}
备注：props是只读的，Vue底层会监测你对props的修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
School.vue:
<template><div class="school"><h2>{{ msg }}</h2><h2>{{ name }}</h2><h2>{{ myAge+1 }}</h2><h2>{{ sex }}</h2><button @click="updateAge">点击修改年龄</button></div>
</template><script>export default {name:'Student',data() {return {msg:'欢迎学习CLI！！！',myAge:this.age}},methods: {updateAge(){this.myAge++}},// 简单声明接收props:['name','age','sex']//接收的同时对数据进行类型限制// props:{// name:String,// sex:String,// age:Number// }//接收的同时对数据进行类型限制+默认值的指定+必要性的限制// props:{// name:{// type:String,// required:true// },// age:{// type:Number,// default:18// },// sex:{// type:String,// required:true// }// }}
</script>App.vue:
<template><div><Student name="张三" :age="18" sex="男"/></div>
</template><script>import Student from './Components/Student'export default {name:'App',components:{Student},}
</script>三、mixin配置
1.功能：可以把多个组件共用的配置提取成一个混入对象
2.使用方式：
(1).定义混合：
{
data(){...},
methods:{...},
...
}
(2).使用混合：
(1.全局混入：Vue.mixin(xxx)
(2.局部混入：mixins:['xxx']
/* 定义mixin.js */
export const mixin = {methods: {showName(){alert(this.name)}},mounted() {console.log('你好啊!')},
}export const mixin2 = {data() {return {x:100,y:200}},
}
/* 全局混入 */
//全局混入会在所有的Vue节点上混入
import Vue from "vue";
import App from "./App"
import {mixin,mixin2} from './mixin'Vue.mixin(mixin)
Vue.mixin(mixin2)Vue.config.productionTip = falsenew Vue({el:'#App',render: h => h(App)
})
/* 局部混入 */
<template><div><h2 @click="showName()">{{ name }}</h2><h2>{{ sex }}</h2></div>
</template><script>import {mixin,mixin2} from '../mixin'export default {name:'Student',data() {return {name:'张三',sex:'男',x:666 //若组件中已有定义变量，则优先使用组件中定义的变量}},//若组件中已经定义相同生命周期钩子，则使用两遍对应的生命周期钩子mounted(){alert('你好啊!') },mixins:[mixin,mixin2]}
</script>四、插件
1.功能：用于增强Vue
2.本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的参数。
3.定义插件：
对象.install = function (Vue,options) {
Vue.filter(......) //添加全局过滤器
Vue.directive(......) //添加全局指令
Vue.mixin(......) //配置全局混入
//添加实例方法
Vue.prototype.$myMethod = function () {......}
Vue.prototype.$myProperty= xxx
}
4.使用插件：Vue.use()
/* 定义plugins插件 */
export default {install(Vue){console.log("@@install",Vue)//过滤器Vue.filter('mySlice',function(value) {return value.slice(0,2)})//自定义指令Vue.directive('fbind',{bind(element,binding){element.value = binding.value},inserted(element,binding){element.focus()},updat(element,binding) {element.value = binding.value},})//mixinVue.mixin({data() {return {x:100}},})//在Vue原型上添加一个方法Vue.prototype.hello = () => (alert('你好呀!'))},
}
/* 在main.js中使用插件 */
import Vue from "vue";
import App from "./App"
import plugins from "./plugins";Vue.config.productionTip = falseVue.use(plugins)new Vue({el:'#App',render: h => h(App)
})
/* School.vue */
<template><div><h2>{{ name | mySlice }}</h2><h2>{{ address }}</h2><button @click="test">点击我</button></div>
</template><script>export default {name:'School',data() {return {name:'清华大学',address:'北京'}},methods:{test(){this.hello()}}}
</script>/* Student.vue */
<template><div><h2>{{ name }}</h2><h2>{{ sex }}</h2><input type="text" v-fbind:value="name"></div>
</template><script>export default {name:'Student',data() {return {name:'张三',sex:'男',}},}
</script>五、scoped样式
1.作用：让样式在局部生效，防止冲突。
2.写法：<style scoped>
当两个组件的css样式名相同时，后导入的组件会覆盖掉先导入组件中相同样式名的样式，style中引入scoped样式即可分割作用域。
/* School.vue */
<template><div class="demo"><h2>{{ name | mySlice }}</h2><h2>{{ address }}</h2></div>
</template><script>export default {name:'School',data() {return {name:'清华大学',address:'北京'}},}
</script><style scoped>.demo{background-color: orange;}
</style>/* Student */
<template><div class="demo"><h2 class="font-color">{{ name }}</h2><h2>{{ sex }}</h2></div>
</template><script>export default {name:'Student',data() {return {name:'张三',sex:'男',}},}
</script><style lang="less" scoped>.demo{background-color: skyblue;.font-color{color: orange;}}
</style>