Vue的基本使用笔记 （三）

vue-cli 的使用

        安装vue-cli ：npm install -g @vue/cli

        在终端下运行如下的命令，创建指定名称的项目： vue cerate 项目的名称

        vue 项目中 src 项目的构成

                assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源
                components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下
                main.js 是项目的入口文件。整个项目的运行，要先执行 main.js
                App.vue 是项目的根组件。

Vue 组件的三个组成部分

                template ：组件的模板结构

                script ：组件的 javascritp 行为

                style ：组件的样式

<template>
  
</template>

<script>
export default {
    data () {
        
        return {
            username : 'xx'

        }

    },

}
</script>

<style>

</style>

        【注】.vue 组件中的 data 数据源 必须是一个函数，由 return 返回数据，不能直接指向一个数据对象。

        style标签中的两个属性

                lang = '值',  指定编写css的语法  （值：css（默认）,less）

                scoped ，自动为每个组件分配唯一的自定义属性，使得该组件样式只对该组件生效

                        【注】当前组件样式对其子组件不生效

                                解决方法： 使用 /deep/深度选择器 

                                                /deep/    选择器    {  样式  }

        

Vue 组件的使用

        注册私有组件

                在app.vue组件中做出以下步骤

        步骤一：在 script 标签中导入子组件  (Left是子组件名, @/components/Left.vue是子组件路径)

                import  Left  form  '@/components/Left.vue'

        步骤二：在 script 标签的  export default { }  中注册组件

                components : {

                        Left,

                }

        步骤三：在 template 标签中使用子组件

                <Left>   </Left>

        注册全局组件

                在 main.js中做出以下步骤

                 import  Left  form  '@/components/Left.vue'

                 Vue.component('MyLeft',Left)

        组件之间的数据共享

                组件之间的数据共享分为三种情况：

                        父向子传递数据，

                        子向父传递数据，

                         兄弟之间传递数据

                父向子传递数据

                                通过自定义属性实现

                                父组件

<template>
    
       <div>

            // :name='usename'代表传入变量 usename的值，:age='18'代表传入数字18，
            //    mes='你好'代表传入字符串你好
            <Left :name='usename' :age='18' mes='你好'>   </Left>

        </div

</template>



<script>

    import Left from '@/components/Left.vue'

    export default {

        components: {
        
            Left,    
        
        },
        
        data() {

            return {
                usename: '张三'
            
            }
        }
    }

</script>

                                子组件

                                【注】props中的属性是只读的，不能在子组件中重新给这些属性赋值，要想修改 props 的值，可以把 props 的值转存到 data 中。props中的属性在子组件中的用法与数据源用法相同

<script>

    export default {

        //语法格式,但该格式不能定义属性类型
       // props : ['name','age','mes']

        // 语法格式二
        props: {
            
            name:{
                //default 定义属性的默认值
                default: '',
                
                //type定义属性的类型
                type: String,

                //required 定义属性是否为必填选项
                required : true,

            },

            age:{
                //default 定义属性的默认值
                default: 0,
                
                //type定义属性的类型
                type: Number,

                //required 定义属性是否为必填选项
                required : true,

            },

            mes:{
                //default 定义属性的默认值
                default: '',
                
                //type定义属性的类型
                type: String,

                //required 定义属性是否为必填选项,默认为false
                required : false,

            },
        
        },

        data() {
            return {
                username: this.name,
                userage: this.age
            }

        }
    }

</script>

                        子向父传递数据

                                        通过自定义事件来实现

                                        父组件

<template>
    
       <div>

            //获取子组件传递过来的值 @子组件的自定义事件名='事件函数名'
            <Left @getName='name'>   </Left>

        </div

</template>



<script>

    import Left from '@/components/Left.vue'

    export default {

        components: {
        
            Left,    
        
        },
        
       methods: {
            name(val) {
                //val 就是从子组件传递过来的值
                console.log(val)

            }

        }
    }

</script>

                                       子组件

<script>

    export default {
        
        data() {

            return {
                usename: '张三'
            
            }
        },

        methods: {
            
            方法名 () {
                // 格式：this.$emit('自定义事件名',要传的数据)
                this.$emit('getName',this.name)

            }

        }
    }

</script>

                     

                         兄弟之间传递数据           

                                        通过中间文件 EventBus.js 实现

                                        【注】该方法也适用于深层嵌套的父子组件

                                        在components文件中创建 EventBus.js文件

import Vue from 'vue'


export default new Vue()

                                        发送方

<script>

    import Bus from '@/components/EventBus.js'

    export default {
        
        data() {

            return {
                usename: '张三'
            
            }
        },

        methods: {
            sendData() {
                //bus.$emit('事件名称', 要发送的数据) 
                bus.$emit('share',this.usename)

            }

        }
    }

</script>

                               接受方

<script>

    import Bus from '@/components/EventBus.js'

    export default {
        
      //created()是生命周期中的一个函数
      created() {

            //bus.$on('事件名称', 事件处理函数)
            bus.$on('share',val => {

                //val就是发送方所发送过来的数据
                console.log(val)

            })

        }
    }

</script>

         

                        ref引用

                                        ref可以在不依赖于 jQuery 的情况下，获取 DOM 元素或子组件实例，并且可以使用子组件实例中的属性与方法。

                                        【注】每一个实例都有属性 $refs

<template>
    
       <div>
            //给 this.$refs 添加一个属性 h1ref,值是h1这个Dom元素
            <h1 ref='h1ref'>  ref获取DOM元素h1  </h1>

            给 this.$refs 添加一个属性 Leftref,值是Left这个组件的实例
            <Left ref='Leftref'>   </Left>

        </div

</template>



<script>

    import Left from '@/components/Left.vue'

    export default {

        components: {
        
            Left,    
        
        },
        
        methods: {
            getElm() {

                //输出获取的DOM元素
                console.log(this.$refs.h1ref)

                //输出获取的Left实例
                console.log(this.$refs.Leftref)

            }
        }
    }

</script>

                      this.$nextTick(cb) 方法

                                作用：等组件的 DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。

methods: {

    show() {

        this.$nextTick( () => {

            //函数体

        } )

    }
    
}