计算属性和监听属性,生命周期钩子,组件介绍

计算属性

# 计算属性是基于它们的依赖进行缓存的
# 计算属性只有在它的相关依赖发生改变时才会重新求值
# 计算属性就像Python中的property,可以把方法/函数伪装成属性
# 计算属性必须要有返回值

基本使用




    
    Title
    


普通函数---其他数据变化---》函数会重写计算

年龄: 姓名:
{{getAge()}}

计算属性

年龄: 姓名:
{{newAge}}

首字母变大写




    
    Title
    


首字母变大写

---》{{newName}}

通过计算属性,重写过滤案例




    
    Title
    


过滤案例

  • {{item}}

监听属性

只要属性发生变化,就会执行 函数




    
    Title
    


监听属性

生命周期钩子

# vue 组件的生命周期钩子函数
    一个vue的组件,从创建开始---》到最后销毁---》经历一些过程---》每个过程都绑定了一个函数--》当到这个过程的时候,这个函数就会执行
    面向切面编程:AOP
    
 
# 8个生命周期钩子函数
    1.beforeCreate: 组件创建之前实现这个:组件html,js--》html和js都是空的
    2.created:组件创建完成后:js就有值了,html还是空的  (向后端发送ajax请求)
    3.beforeMount:挂载模板之前,js有值,模板(html) 还是空的(向后端发送ajax请求)
    4.mounted:挂载完成:js有值,模板有值
    5.beforeUpdate:刷新之前执行:只要页面发送变化或js变量发生变化,就会触发它的执行
    6.updated:刷新之后执行
    7.beforeDestroy:被销毁之前执行  (资源清理性工作)
    8.destroyed:被销毁之后执行
    
# 实际用途
    1 页面加载完成,向后端发请求拿数据
        写在create中
        
    2 组件中有定时任务,组件销毁,要销毁定时任务、
  


# 补充:定时器和延时器
    setTimeout( ()=>{
        console.log('延时器,3s后执行')
    },3000)
    
    setInterval(()=>{
        console.log('每隔3s执行')
    },3000)

组件介绍

# 组件是:有模板,有js的 ,有方法的 对象  组件和组件直接的 变量,模板都是隔离的

# 定义组件
    Vue.component('Child',{
        template: `
          

我是组件

年龄是:{{ age }}

`, data() { return { age: 19 } }, methods: { haneleClick() { alert('美女') } } }) # 使组件,直接根据组件名使用即可

局部组件和全局组件

 #  全局组件
    - 定义:
    Vue.component('Child',{})
    - 使用,可以在任意位置使用
        
    
# 局部组件-->只能定义在组件内部,只能在当前组件中使用
    -定义
     var vm = new Vue({
        el: '#app',
        data: {},
        components:{局部组件:{}}
    })
    -使用:只能用在被 当前组件管理的 html (#app) 中,放在别的位置找不到

全局组件使用




    
    Title
    


组件的使用


局部组件的使用

局部组件是定义在组件内部,只能在当前组件中使用




    
    Title
    


局部组件的使用

组件间通信

父传子




    
    Title
    


组件通信之父传子:自定义属性

父组件中得名字:{{name}}

子传父




    
    Title
    


组件通信之子传父:自定义事件

子组件的值:{{p_name}}

你可能感兴趣的:(javascript,前端,vue.js)