zoukankan      html  css  js  c++  java
  • 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(){}
    
    
    })
    
    
     
    

  • 相关阅读:
    shell进行mysql统计
    java I/O总结
    Hbase源码分析:Hbase UI中Requests Per Second的具体含义
    ASP.NET Session State Overview
    What is an ISAPI Extension?
    innerxml and outerxml
    postman
    FileZilla文件下载的目录
    how to use webpart container in kentico
    Consider using EXISTS instead of IN
  • 原文地址:https://www.cnblogs.com/guanhuohuo/p/12526222.html
Copyright © 2011-2022 走看看