vue04---计算属性/监听(侦听)属性/Vue生命周期/组件介绍和使用/组件间通信/ref属性

计算属性

# 1 计算属性是基于它们的依赖变量进行缓存的
# 2 计算属性只有在它的相关依赖变量发生改变时才会重新求值，否则不会变（函数只要页面变化，就会重新运算）
# 3 计算属性就像Python中的property，可以把方法/函数伪装成属性
# 4 计算属性，必须有返回值

基本使用

    
    
    



    
实现输入input中后名字首字母大写
    
    --->{{getUpperCase()}}
    

    ---->{{age}}

    
通过计算属性实现--->当属性用
    --->{{getName}}

重写过滤案例

    
    
    




    
    

    

        
{{item}}
    

监听(侦听)属性

# 属性如果发生变化，就会执行某个函数

    
    
    



    
监听属性
     --->{{username}}

Vue生命周期

# new Vue()---->创建出来---》页面关闭---》被销毁掉----》整个整个过程经历了一个周期----》vue帮咱们提供了一些钩子函数[写了就会执行，不写就不执行]，到某个阶段，就会触发某个函数的执行

# 8 个生命周期钩子函数
    beforeCreate            创建Vue实例之前调用
    created                    创建Vue实例成功后调用
    beforeMount                渲染DOM之前调用
    mounted                    渲染DOM之后调用
    beforeUpdate            重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
    updated                    重新渲染完成之后调用
    beforeDestroy            销毁之前调用
    destroyed                销毁之后调用
    
    
    
    
    
    
 # vue实例有生命周期，每个组件也有这8个生命周期

# 8个声明周期钩子，什么情况会用到
    -created:用的最多，变量初始化完成了(data中得数据)，在这里，我们发送ajax请求
    -beforeDestroy：组件销毁之前会执行
        -组件创建，就执行一个定时任务[每隔1s，打印一个helloworld]
        -组件销毁，定时任务要销毁，如果定时任务不销毁，会一直执行
 

    
    
    



    
生命周期钩子
     --->{{username}}

    
使用组件
    显示组件，隐藏组件
    

    
    

组件介绍和使用

# 组件就是：扩展 HTML 元素，封装可重用的代码，目的是复用
例如：有一个轮播图，可以在很多页面中使用，一个轮播有js，css，html
组件把js，css，html放到一起，有逻辑，有样式，有html

#组件的分类：
    全局组件：可以放在根中,可以在所有组件中使用
    局部组件：只能在当前组件中使用

# 1 全局组件是使用Vue.component定义的，可以在全局任意组件中使用
#  2 局部组件是定义在某个组件内的：components，只能用在当前组件中
# 3 组件可以嵌套定义和使用

# 扩展：elementui，提供给咱们很多全局组件

定义全局组件

    
    
    



    
组件的使用
    

    
    


    
第二次出现
    

定义局部组件

    
    
    



    
组件的使用
    

组件间通信

# 组件嵌套，
    -父组件被数据传递给子组件
        -自定义属性
        -1 在子组件中自定义属性，使用属性指令绑定父组件的变量
        -2 在子组件中，使用props接受 ['属性名','属性名2']
        -3 在子组件中，使用属性名即可
    -子组件把数据传递给父组件
        -自定义事件
        -1 父组件中自定义事件：
        -2 子组件中只要执行 this.$emit('myevent'),就会触发自定义事件对应的函数
    

组件间通信值父传子

    
    
    



    
组件的使用
    

    
    

组件间通信之子传父

    
    
    



    
组件的使用
    接受到的子组件输入的内容是：{{username}}
    

    
    

ref属性

# ref属性，vue提供的，写在标签上
    可以写在普通标签：在vue中使用 this.$refs.名字  拿到dom对象，可以原生操作
    可以写在组件上:在vue中使用 this.$refs.名字  拿到[组件]对象，组件属性，方法直接使用即可

    
    
    



    
ref属性放在普通标签上
    
    

    


    
ref放在组件上
    

    
    


    点我执行函数

    

    {{username}}