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>