文档章节

vue组件知识总结

爱敲代码的程序员
 爱敲代码的程序员
发布于 2017/09/10 18:30
字数 1395
阅读 62
收藏 2
点赞 0
评论 0

vue组件化开发

  • 将一个页面分割成若干个组件,一个页面js+css+html,将自己类容分割出来,方便开发,更好了维护我们的代码,每个组件封装自己的js+html+css,样式命名冲突

组件分类

  • 页面级组件( 例如详情页页面)

  • 基础组件(页面的一部分,例如轮播图)

  • 组件的目的为了实现复用

指令和组件

  • 在标签内增加的行内属性,实现功能指令

  • 组件就是一个自定义(扩展)的标签<hello></hello>,封装代码的,组件的标签名不能破坏原有的html标签

组件:全局组件(不需要引用),局部组件(需要引用)

  • 在vue中一个对象就是一个组件

  • 在组件中data是一个函数,目的是不受别人干扰,因为组件是独立的

  • 使用组件的步骤,

    • 1.声明组件,并且引入到当前页面

    • 2.在组件的父级模板中调用这个组件

    • 组件名称不能和标签相同

  • 全局组件

  • Vue.component('my-handsone',{
           //template只会有一个根元素,而且不能直接放置文本节点
            template:'<h1>{{msg}}</a></h1>', 
            data(){  
                return { //可以用来定义数据
                    msg:"帅吗",
                    types:[1,2,3]
                }
            }
        });
        let vm=new Vue({
            el:"#app",
            data:{}
        })
  • 局部组件
    • 先在儿子组件上绑定一个属性名,然后赋值给这个属性 :m="msg",

    • 儿子接受父亲传递的数据,用props接收传递的属性名字,例如 props:{m:{type:Array}}

  • //一个对象就是一个组件
     let webeautiful={
            template:'<h1>{{msg}}</h1>',
            data(){
                return {
                    msg:"很帅呀"
                }
            }
        };
        let vm=new Vue({
            el:"#app",
            //挂载在vue实例中components
            components:{
                webeautiful
            }
        })

    组件的数据传递

    • 父传子属性传递 子组件通过props接收

    • props的api

      • type 接收数据的类型

      • default 默认数据的值

      • required 必须传递数据 不能和default同时引用

      • validator 自定义验证

    • 子传父组件,事件触发 $emit->@方法="父组件的方法"

    • 平级交互 eventBus 但是不用 -vuex

    • 父组件调用子类的方法 ref=>this.$ref.xxx.子类方法

    • slot 插槽 (设置一些空闲的位置等等使用)

    父亲传递给儿子数据

let vm = new Vue({
         el:'#app',
         template:'<div>父{{msg}}<child :a.sync="msg"/></div>',
         data:{
             msg:'美女'
         },
         components:{
             child:{
                 props:['a'], //<comp :foo="bar" @update:foo="val => bar = val"></comp>
                 template:'<div>child {{a}} <button @click="change">换</button></div>',
                 methods:{
                     change(){ //固定的写法
                         //2.3.0版本以后才会用
                         //用了sync,下面必须用update
                         this.$emit('update:a','丑女');
                     }
                 }
             }
         }
     })

父亲调用子组件的一些方法

第一步先定义儿子有一个fn方法

methods:{fn(){ console.log("王阿姨好漂亮"); }}

第二步在儿子身上标记一个表示ref

<child ref="msg"></child>

第三步父亲在视图加载完成后,调用儿子的fn方法

mounted(){this.$refs.msg.fn();}

this.$refs.msg 调用儿子身上的msg表示,这时候this.$refs.msg指向的就是儿子的实例

实例.fn() 这就调用到了儿子的fn方法

  •  

    // ref如果写在dom上,表示获取dom,如果写在组件上,表示当前组件的实例
         let vm=new Vue({
             el:"#app",
             template:'<child ref="c"></child>',
             //一定要放在mounted下面,因为mounted方法表示数据和视图渲染完成,
             mounted(){
                 //当前的ref指向的是child组件的实例,通过实例调用下面的fn方法
                 this.$refs.c.fn();
             },
             components:{
                 child:{
                     template:'<div>child</div>',
                     methods:{
                         fn(){
                             alert("王阿姨好漂亮")
                         }
                     }
                 }
             }
         })

    兄弟组件之间的数据通讯(就是平级组件之间的数据通讯)

    • 兄弟组件之间数据互通,要借助第三个vue实例

    • eventBus使用起来不好管理,命名冲突,而且复杂,一般不用

      • 我们通常叫这个实例叫eventBus

        • let eventBus=new Vue;

      • 将兄弟发射的自定义事件方法,挂载到eventBus实例上

        • eventBus.$emit('aa',''c');

      • 然后通过$on方法,将兄弟发射的自定义事件方法绑定里面去

      • 后面的回调函数一定要是箭头函数,不改变实例的this,方便赋值

        • 例如 eventBus.$on('aa',(data)=>{console.log(data) }

         

        let eventBus=new Vue;
            //eventBus使用起来不好管理,命名冲突,而且复杂,一般不用
            let C={
                template:'<div>{{val}}<button @click="ss">变C</button></div>',
                data(){
                    return {
                        val:"C"
                    }
                },
                methods:{
                    ss(){
        
                    eventBus.$emit('bb','C');
                    }
                },
                created(){
                    //
                    eventBus.$on('aa',(data)=>{
                        this.val=data;
                    })
                }
            };
            let D={
                template:'<div>{{val}}<button @click="ee">变D</button></div>',
                data(){
                    return {
                        val:"D"
                    }
                },
                created(){
                    //
                    eventBus.$on("bb",(data)=>{
                        this.val=data;
                    })
                },
                methods:{
                    ee(){
        //
                            eventBus.$emit('aa','D');
                        }
                    }
            }
            let vm = new Vue({
                el:'#app',
                //1,找共同父级,时间交互,非常复杂,不采用
                template:'<div><C></C><D></D></div>',
                data:{
        
                },
                components:{
                    C,
                    D
                }
            })

         

        使用 slot 分发内容

        slot 可以将不同的标签分开发送到指定的节点中

        slot 有一个name属性

        slot上的name属性,有一个默认值default

        没有指定slot名字的都叫default 会塞到name=default的组件内

         

        <div id="app">
              <hello>
                  123
                  <ul slot="bottom">
                      <li>我很帅</li>
                  </ul>
                  <ul slot="top">
                      <li>你丑</li>
                  </ul>
                  456
              </hello>
          </div>
          <template id="hello">
              <div>
                  <!--slot是vue提供的内置插件,具名slot 在写内容时第一预留出来slot插口,如果没有使用则使用默认内容,没有指定slot名字的都叫default 会塞到name=default的组件内-->
                  <slot name="default">nihao </slot>
                  <slot name="top">这是上</slot>
                  <slot name="bottom">这是下</slot>
              </div>
          </template>
          <script>
              let vm = new Vue({
                  el:'#app',
                  components:{
                      hello:{
                          template:'#hello'
                      }
                  }
              })
          </script>

         

        vue动画组件 transition

        • transition有一个name属性

          • 假设我们name="fade"

        • transition动画组件对应三个css样式

        • 进入开始 .fade-enter 的样式

        • 开始过渡阶段 .fade-enter-active

        • 出去终点 .fade-leave-active

        • 这三个样式里面,我们可以任意写样式

© 著作权归作者所有

共有 人打赏支持
爱敲代码的程序员
粉丝 74
博文 42
码字总数 82530
作品 0
海淀
程序员
西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理。 情景再现...

闰土大叔 ⋅ 04/25 ⋅ 0

Vue组件一-父组件传值给子组件

Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消...

mdiep ⋅ 05/13 ⋅ 0

Vue.js视频教程

Vue.js 1.0 免费中文视频教程在线观看和网盘下载地址收集 原文地址:http://phpecshop.blog.51cto.com/6296699/1834208 NideShop:基于Node.js+MySQL开发的高仿网易严选开源B2C商城(微信小...

ch10mmt ⋅ 2016/08/04 ⋅ 0

人人都能懂的Vue源码系列(二)—Vue构造函数

上篇博文中说到Vue源码的目录结构是什么样的,每个目录的作用应该也有所了解。我们知道core/instance目录主要是用来实例化Vue对象,所以我们在这个目录下去寻找Vue构造函数。果然找到了Vue构...

淼淼真人 ⋅ 05/21 ⋅ 0

在Vue中使用JSX的正确姿势(有福利)

姿势很重要,末尾有福利 vue-antd-ui开源了一段时间后,收到了一些反馈,尤其是Form组件上线后,很多用户对JSX的使用感到迷惑和不习惯,为此专门介绍下Vue JSX的使用姿势及注意事项。 Form组...

zeka ⋅ 06/14 ⋅ 0

Vue + ElementUI 后台管理系统项目心得(二)

此篇是关于 Vue 的总结。Js 的总结请见前一篇:Vue + ElementUI 后台管理系统项目心得(一) 话说过完年回来,仿佛一夜之间身边的人都在谈论 Vue,相关的组件也如雨后春笋一般涌现出来,比如...

OSIMLY ⋅ 2017/03/27 ⋅ 0

【vue/axios/vue-router】制作一个精致的美团项目

一、项目展示: 注意:如果gif动态图看不了,麻烦大家点击github美团项目中mt-app/src/assets/美团.gif便可以观看! 如果大家需要项目源码,请到我的GitHub上下载即可。 二、项目涉及到技术栈...

浪里行舟 ⋅ 05/17 ⋅ 0

vue中需要注意的问题总结(上)

文章首发于个人博客 前言 使用vue的时候经常会遇到一些问题,其实仔细阅读查阅官方文档,就会发现文档中已提到一些格外需要注意的点; 为了深入的理解官方文档中对这些问题的解释,查阅了一些资料...

funnycoderstar ⋅ 04/17 ⋅ 0

JavaScript 开发框架横向比对(Vue、React 和 Angular)

1 背景比对 MIT license 与 BSD-license 之间的区别是:MIT license 允许衍生软件加上我们自己的名字做推广,而 BSD license 不可以。 MVVM(Model-View-ViewModel):将其中的View 的状态和...

deniro ⋅ 05/30 ⋅ 0

你或许不知道Vue的这些小技巧

前言 用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候...

OBKoro1 ⋅ 06/04 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

如何使用serverchan微信推送告警

之前实现推送告警信息到微信的方法有如下几种: 1、通过企业公众号实现----收费: 2、通过QQ邮箱,在微信平台上开启收到邮件进行提醒; 3、第三方告警平台API,一般也是收费的; 不过最近看文...

问题终结者 ⋅ 33分钟前 ⋅ 0

TCP的RPC

RPC就是远程方法调用(Remote Process Call ),包含了客户端和服务端,涉及了对象的序列化传输。 1.服务端启动,注册远程调用的类2.客户端发送请求信息包含类、方法、参数的一些信息、序列化传...

Cobbage ⋅ 54分钟前 ⋅ 0

IOS-UI UI初步代码布局添加事件

ISO开发界面,UI是必须学习的一部分,其实很早之前想学来了,一直没有沉下心来学习。看到IOS的代码风格和布局就别扭的不行,跟java代码和android布局比较显得不是那么方便,所以一直到现在。...

京一 ⋅ 今天 ⋅ 0

浅谈OpenDaylight的二次开发

OpenDaylight作为一款开源SDN网络控制器,依托于强大的社区支持以及功能特性,成为了目前主流的SDN网络控制器开发平台。在比较稳定的OpenDaylight Helium版本中,已经为开发者提供了大量的网...

wangxuwei ⋅ 今天 ⋅ 0

API 开发中可选择传递 token 接口遇到的一个坑

在做 API 开发时,不可避免会涉及到登录验证,我使用的是jwt-auth 在登录中会经常遇到一个token过期的问题,在config/jwt.php默认设置中,这个过期时间是一个小时,不过为了安全也可以设置更...

等月人 ⋅ 今天 ⋅ 0

Java NIO之文件处理

程序要操作本地操作系统的一个文件,可以分为以下三个部分: 对文件位置的操作 对文件的操作 对文件内容的操作 其中,对文件内容的操作在 Java NIO之Channel 中已经有了介绍,通过FileChann...

士别三日 ⋅ 今天 ⋅ 0

Maven的pom.xml配置文件详解

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.......

小海bug ⋅ 今天 ⋅ 0

解决httpclient超时设置不生效的问题

最近公司有项目需要通过http调用第三方服务,且第三方服务偶有超时,故需要设置一定的超时时间防止不响应的情况出现。 初始设置如下: [java] view plain copy //超时设置 RequestConfig re...

Mr_Tea伯奕 ⋅ 今天 ⋅ 0

过滤器Filter和拦截器HandlerInterceptor

过滤器 依赖于servlet容器。在实现上基于函数回调,可以对几乎所有请求进行过滤,但是缺点是一个过滤器实例只能在容器初始化时调用一次。使用过滤器的目的是用来做一些过滤操作,获取我们想要...

hutaishi ⋅ 今天 ⋅ 0

Redis入门详解(转)

Redis入门详解 Redis简介 Redis安装 Redis配置 Redis数据类型 Redis功能 持久化 主从复制 事务支持 发布订阅 管道 虚拟内存 Redis性能 Redis部署 Redis应用场景 Redis总结 Redis简介: Redi...

xiaoyaoyoufang ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部