Vue基础第四篇

一、计算属性

计算属性是基于它们的依赖进行缓存的

计算属性只有在它的相关依赖发生改变时才会重新求值

计算属性就像Python中的property，可以把方法/函数伪装成属性

1.通过计算属性实现名字首字母大写

    
    
    



    
    模板插值：
    {{myText.substring(0,1).toUpperCase()+myText.substring(1)}}
    
普通方法：{{getNameMethod()}}
    
    
计算属性：{{getName}}
    

2.通过计算属性重写过滤案例

    
    
    



    

    

        
{{data}}
    

二、监听属性

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

示例：

    
    
    



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

三、Vue生命周期

1.生命周期

钩子函数	描述
beforeCreate	创建Vue实例之前调用
created	创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
beforeMount	渲染DOM之前调用
mounted	渲染DOM之后调用
beforeUpdate	重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated	重新渲染完成之后调用
beforeDestroy	销毁之前调用
destroyed	销毁之后调用

create

let vm = new Vue()

mount

挂载，把div挂载到组件中

update

let vm = new Vue({
    el: '#box',
    data: {
        isShow: true    // 修改这个内容
    },
    methods: {
        handleClick() {
            console.log('我是根组件')
        }
    }
})

组件销毁 - 给组件写一个定时器

setTimeout()    // 延迟3s干什么事
setInterval()    // 延迟3s干什么事

示例：

    
    
    



    
    

    删除子组件
    显示子组件

四、组件介绍及使用

1.组件是什么？有什么用？

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

组件的分类：

• 全局组件：可以放在根中
• 局部组件：

工程化开发之后：

1个组件 就是1个xx.vue

2、组件的注册方式

定义全局组件，绑定事件，编写样式

示例：

    
    
    


    

    
我是根部组件
    
    

        

            
        
    

    

3. 定义局部组件

① 局部组件 放在 Vue实例(根组件) 中

② 局部组件 放在 全局组件 中

注意点：

• 定义的组件（body中的位置）必须要放在Vue实例（这也是一个组件 根组件）中
• 局部组件 必须放在 全局组件/根组件 中，无法单独使用
• 定义的组件必须在Vue实例的上方

五、组件间通信

1.组件间父传子

• 在全局组件中自定义属性：
• 在组件中获取：{{myname}}

示例：

属性验证

• 限制父传子的变量类型

props: {
    myname: String,
    isshow: Boolean
}

• 父传子时候注意以下区别

示例：

2.子传父（通过事件）

示例：

3.子传父（控制子组件的显示和隐藏）

点击子组件，就会触发父组件的某个函数执行

示例：

小案例

• 子组件有1个按钮 和 1个输入框，子组件输入完内容后，数据在父组件中展示

    
    
    




    
    

    
父组件接收到的数据：{{name}}

4.ref属性（也可以实现组件间通信：子和父都可以实现通信）

• ref放在标签上，拿到的是原生的DOM节点
• ref放在组件上，拿到的是组件对象 ，对象中的数据、函数 都可以直接使用
• 通过这种方式实现子传父（this.$refs.mychild.text）
• 通过这种方式实现父传子（调用子组件方法传参数）

    
    
    




    
    点我