Vue脚手架学习_Vue中的一些属性和方法

今天主要对脚手架的属性做了学习

目录

1.ref属性，

2.props属性

3.mixin混入属性

4.Vue插件的使用

5.scoped样式

---

1.ref属性，

       1-1 作用：被用来给元素或子组件注册引用信息，也就是Vue版的id,如果获取的对象是html标签元素，则返回的就是该元素的真实DOM元素，如果是组件元素，获取的就是该组件的组件实例对象。

       1-2.获取方式：通过this.$ref.xxx(上文设置ref的名字)方式获取

2.props属性

        2-1 作用：父组件向子组件传值的方式，可以让组件接受从外部来的数据

        2-2 写法：<Student name="申屠" sex="男" :age="55"/>   此处的age需要注意，首先数据传递的值必须加引号（不加报错），但是传递引号后就证明传入的是一个字符串，如果要对一些number类型的数据操作的话，就会比较麻烦，解决方法：在传递数据类型是nunber类的标签前加：即可，那么传输的字符串会自动转换成number类型

        2-3 接收数据的三种方式

                   1.props:['name','age','sex']

                   2.props:{ name:String,age:Number,sex:String} 该方法可以限定传入值的类型，如果不是对应类型，会在控制台报错以提示程序员

                   3.props:{name:{type:String, required:true},
                                  age:{ type:Number,default:100},
                                  sex:{type:String,required:true}}

更加具体的一种方式，不仅可以限定类型，而且可以设置默认值（如果不传值，那么值就为默认），同时还可以限定这个值是不是必须要的值（required），否则报错。

tips：一般不修改传入后的内容，如果非要修改那么请复制props的内容到data中一份，然后去修改data中的数据。

3.mixin混入属性

        1.作用：可以将组件中相同功能的部分（或数据）整合成一个混入对象

        2.使用方式：

                一、定义一个混合对象  例如：mixin={methods:{showName(){this.name}}}

                二、使用混入   全局混入：Vue.mixin(xxx) ​ 局部混入：mixins:['xxx']

4.Vue插件的使用

1. 功能：用于增强Vue

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件：

   对象.install = function (Vue, options) {
       // 1. 添加全局过滤器
       Vue.filter(....)

       // 2. 添加全局指令
       Vue.directive(....)

       // 3. 配置全局混入(合)
       Vue.mixin(....)

       // 4. 添加实例方法
       Vue.prototype.$myMethod = function () {...}
       Vue.prototype.$myProperty = xxxx
   }

5.scoped样式

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

2. 写法：<style scoped>，同时可以通过<style lang="css(或者less等)"> 限定你要使用哪种样式处理语言，注意在初次使用时要在脚手架安装less-load，否则处理不了less属性

继续加油