• vue基础学习(三)


    宝宝博客都是自己写了记录一下问题哟,也便于帮助其他同事,请不要随意复制vue基础学习(三)因为小编的博客是会放在简历上去的~~~

    vue基础学习(三)

    1、组件

    01-什么是组件

    vue基础学习(三)

    02-组件的创建

    1、组件创建的三种方式

    (1)     Vue.extend() + Vue.component()  定义 

    
    // 1. 使用vue.extend()定义组件模板
    
    
    var dv = Vue.extend({
    
    
       template:'
    
    我是一个组件
    '
    
    
    })
    
    
    // 2. 使用Vue.component()注册组件Vue.component(组件名,组件模板)
    
    
    Vue.component('com',dv)
    
    
    // 3. Vue托管区域像使用普通HTML标签一样使用组件
    
    
    

    注意:

    1、模板template只能有一个根节点

    2、组件名是驼峰,那么使用需要以-连接  indexA 使用就是 index-A

    (2)     Vue.component() 定义

    
    // 1. 使用Vue.component定义组件
    
    
    Vue.component('com',{
    
    
       template:'
    

    我是一个组件中的元素

    我也是组件中的元素
    '
    
    
    })
    
    
    // 2. 使用组件
    
    
    

    (3)     使用template标签定义模板

    
    // 1. 使用Vue.component定义组件,并且使用选择器选择模板
    
    
    Vue.component('com',{
    
    
       template:'#temp'
    
    
    }) 
    
    
    // 2. 使用template标签定义模板,并且给template标签添加id
    
    
    注意:template模板需要在vue范围外写
    
    
    
    
    
    
    
    我是p元素

    
    我是span元素
    
    
    
    
    
    
    或者:
    

    <</span>scripttype="x-template"id="heima">

     

    indexD

    </</span>script>

    
    // 3. 使用组件
    
    
    

    03-组件中使用事件和指令

    https://cn.vuejs.org/v2/guide/components.html#data-必须是一个函数

     

    注意:data是一个函数,而且函数中以返回值的形式返回数据对象,其他的在跟vue实例是一样的

     

    vue基础学习(三)

    04-父子组件的创建

    注意:子组件需要写在父组件里面

    方法1

    vue基础学习(三)

    方法2

    vue基础学习(三)

    05-父组件传值给子组件

    1、步骤分析:

    (1)     父组件:父组件中的值传给子组件 使用绑定的方式传递

    (2)     子组件接收父组件传过来的值即可在子组件中使用

    
    在子组件中定义一个props属性,该属性是一个数组,数组中定义用于接收传过来的变量。这个变量和第一步绑定的这个属性同名
    

    vue基础学习(三)

    06-子组件传值给父组件

    vue基础学习(三)

    提示:template可以接模板字符串

     

    
    // 1. 在父组件中定义好要传递的数据
    
    
    Vue.component(“father”,{
    
    
    template:`
    
    
       
    父亲年纪大了,记性不好,我儿子告诉我他叫{{mySonName}}

    
       
    
    
    `
    
    
       data:{
    
    
    mySonName:'???'
    
    
    },
    
    
       components:{
    
    
           son:{
    
    
               template:'<</span>button>点击我就告诉我爸爸我叫{{myName}}</</span>button>',
    
    
           data(){
    
    
                  myName:”小明  
    
    
              }
    
    
           },
    
    
       }
    
    
    })
    
    
    // 2. 在子组件中使用this.$emit触发一个自定义的方法名,然后传递数据
    
    
    // 第一个参数就是自定义的事件名
    
    
    // 第二个参数就是需要传递给父组件的数据
    
    
    this.$emit('func',this.myName)
    
    
    // 3. 在父组件中使用子组件时,绑定一个事件,事件名称和子组件触发的事件名同名
    
    
    
    
    
    父亲年纪大了,记性不好,我儿子告诉我他叫{{mySonName}}

    
    func = 'getmsg'>
    
    
    
    
    // 4. 在父组件的methods中定义一个事件处理函数
    
    
    methods:{
    
    
       getmsg:function(data){
    
    
           // data就是子组件传过来的数据
    
    
       }
    
    
    }
    

    07-兄弟组件间传值

    
    步骤分析:
    
    
    1、创建好兄弟组件
    
    
    2、传递方式:创建一个空的实例事件总线 var eventBus=new Vue();
    
    
    3、daughter传递方式 实例事件总线.$emit(“事件名称”,需传递的值)
    
    
    4、brother获取方式 实例事件总线.$on(“事件名称”,函数)函数中参数即传递过来的值
    

    vue基础学习(三)

    08-创建动态组件  (is动态组件)

    1is属性和component实现组件切换

    
    // comname 是哪个组件名,component就会被渲染成哪个组件
    
    
    // component 就是一个占位标签 
    
    
    
    
    new Vue({
    
    
       el:'#app',
    
    
       comname:'login' //此时显示login组件
    
    
    })
    

    vue基础学习(三)

    2、:is=”correntCom”is=”correntCom”的区别

    (1):is=”correntCom”是绑定事件   原型是v-on:is=”correntCom”

    (2)is=”correntCom” 是默认值

    09-局部过滤器和局部自定义指令

    局部自定义指令和过滤器只能在局部使用,不能在外部全局使用

    // 自定义指令通过Vue.directive()创建,它包含两个参数,一个是自定义指令的名字,

    可以随便取,但是全部小写另一个是一个对象,表示自定义指令的配置项

    // inserted钩子函数,它表示自定义指令插入到标签中的时候就执行

    // inserted钩子函数有两个参数(el,bindingel表示使用自定义指令的元素,binding表示自定义指令的信息

    
    1、局部过滤器
    
    
       filters:{
    
    
           '过滤器的名称':function(value){ 注意:过滤器的名称是一个函数
    
    
               return 处理完毕的数据
    
    
           }
    
    
    }
    
    
    2、局部自定义指令
    
    
    directives:{
    
    
       '自定义指令的名称':{自定义指令的名称必须小写
    
    
           inserted:function(){},
    
    
       }
    
    
    }
    
    
    3、全局指令
    
    
    Vue.directive('指令名称',{注意:指令名称必须全部小写
    
    
       // 当前指令所在元素插入到父节点时调用(不保证DOM已经渲染完毕)
    
    
       inserted:function(){},
    
    
    })
    
    
     
    
    
    

    10-例生命周期

    回调函数:一个函数被当做参数进行传递的时候,称作这个函数为回调函数

    构造函数:一个函数被new 关键字引导执行的时候,称作这个函数为构造函数

    钩子函数: 一个应用程序或者框架内部提前定义好的一批函数,这些函数会在特定的时间段自动执行

    生命周期: 一个程序会存在初始化 - 运行 - 销毁等阶段,这些阶段统称为该程序的生命周期

    
    new Vue({
    
    
       el:'#app',
    
    
       data:{},
    
    
       methods:{},
    
    
       beforeCreated(){},
    
    
       // data中的数据和methods中的方法已经初始化完毕会去自动执行created方法
    
    
       created(){
    
    
           // 用于发生数据请求,也可以初始化一些数据
    
    
       },
    
    
       beforeMount(){},
    
    
       // 真实DOM已经渲染完毕会执行mounted函数
    
    
       mounted(){
    
    
           // 操作真实DOM
    
    
       }
    
    
       beforeUpdate(){},
    
    
       // data中的发生了变化而且被重新渲染到了界面上时才会执行
    
    
       updated(){
    
    
           // 数据更新后重新操作DOM
    
    
       },
    
    
       // 实例销毁之前,实例上面的各种属性和方法都还可以正常访问,通常可以在这里手动回收一些页面没有被释放的变量,比如清楚定时器的操作。
    
    
       beforeDestroy(){},
    
    
       // 实例已经从内存中被销毁
    
    
       destroyed(){}
    
    
    })
    
    
     
    

  • 相关阅读:
    Collatz Conjecture(BAPC2017)
    P3377 【模板】左偏树(可并堆)
    Mergeable Stack
    B. Our Tanya is Crying Out Loud(cf)and 5918: 改变(中石油)
    bzoj 4488: [Jsoi2015]最大公约数
    Zoj
    牛客练习赛43 回顾
    哈尔滨工程大学ACM预热赛 补题
    April Fools Day Contest 2019: editorial回顾补题
    第一周总结
  • 原文地址:https://www.cnblogs.com/guanhuohuo/p/12526222.html
Copyright © 2020-2023  润新知