vue文件包含3个部分

  <template>

      <div></div>

  </template>

  <script>

    export default {

       props: []/{}

          data(){},

        computed: {}

          methods: {},

       watch: {}

        filters: {}

          directives: {}

          components: {}

     }

 </script>

 <style>

 </style>

组件化编码的基本流程

1). 拆分界面, 抽取组件

2). 编写静态组件

3). 编写动态组件

初始化数据, 动态显示初始化界面

实现与用户交互功能

组件通信的5种方式

props

vue的自定义事件

pubsub第三方库

slot

vuex(查看vuex核心概念)

props:

父子组件间通信的基本方式

属性值的2大类型:

一般: 父组件-->子组件

函数: 子组件-->父组件

隔层组件间传递: 必须逐层传递(麻烦)

兄弟组件间: 必须借助父组件(麻烦)

vue自定义事件

子组件与父组件的通信方式

用来取代function props

不适合隔层组件和兄弟组件间的通信

pubsub第三方库(消息订阅与发布)

适合于任何关系的组件间通信

slot

通信是带数据的标签

注意: 标签是在父组件中解析

vuex

多组件共享状态(数据的管理)

组件间的关系也没有限制

功能比pubsub强大, 更适用于vue项目

vue组件化编程的更多相关文章

  1. vue组件化编程应用2

    写几个小案例来理解vue的组件化编程思想,下面是一个demo. 效果图示: 需求: header部输入任务,进行添加,在list中显示; list中每个item项,鼠标移入时,背景变灰并显示delet ...

  2. vue组件化编程应用

    写几个小案例来理解vue的组件化编程思想,下面是一个demo. 效果图示: 功能: Add组件用于添加用户评论,提交后右边评论回复会立马显示数据.Item组件点击删除可以删除当前用户评论.当List组 ...

  3. vue - Vue组件化编程

    今天是对vue组件化的一个理解,最主要的单文件组件,然后就可以脚手架的学习了,本来昨晚就该上传的,但是用的那个上传博客园的Python脚本不行了,换了一个新的. 组件化让我越来越感觉到框架的力量了 一 ...

  4. vue组件化之模板优化及注册组件语法糖

    vue组件化之模板优化及注册组件语法糖 vue组件化 模板 优化  在 https://www.cnblogs.com/singledogpro/p/12054895.html 这里我们对vue.js ...

  5. vue组件化的应用

    前言:vue组件化的应用涉及到vue-cli的内容,所以在应用之前是需要安装node和vue-cli的,具体如何安装我就不一一赘述了.可能一会儿我心情好的时候,可以去整理一下. 1.应用的内容:在一个 ...

  6. React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题

    React 面向组件化编程 面向对象 ----> 面向模块 ----> 面向组件 套路: 注意: 组件名必须大写开头: 只能有一个根标签: <input />虚拟DOM 元素必 ...

  7. 初探CORBA组件化编程

    1.掌握组件化开发的概念,了解CORBA模型及ORB机制:2.掌握CORBA组件编程方法.二.实验内容(一).步骤1.配制环境JDK环境.2.编写编译IDL接口.3.编写编译服务端程序.4.编写编译客 ...

  8. Vue组件化开发

    Vue的组件化 组件化是Vue的精髓,Vue就是由一个一个的组件构成的.Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解.这时候又有可能无从下手,因此在这里阐释一下 ...

  9. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

随机推荐

  1. VMware安装VMware tool后mount /dev/cdrom /mnt成功挂载含rpm包的镜像

    安装虚拟机后如果不安装vmware tool使用mount /dev/cdrom /mnt可以成功挂在含rpm包的镜像,但是安装VMware tool后挂在后/mnt中是错误的内容.查了半天后无果,自 ...

  2. Quarzt定时调度任务

    简介 Quarzt是一个项目中定时执行任务的开源项目,Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独 ...

  3. Hibernate多对多关联关系

    今天遇到一个问题:有一个的类Reckoning,一个类AccountItem.这两个类之间的关系时多对多的关联关系. 一开始是由AccountItem来维护关联关系的,也就是Reckoning.hbm ...

  4. shiro集成spring&工作流程&DelegatingFilterProxy

    1.集成Spring 参考文献: 新建web工程: ehcache-core来自Hibernate wen.xml <?xml version="1.0" encoding= ...

  5. java中prepareStatement与createStatement的区别

    首先来看两段代码: 第一个使用createStatement() public void delete( int id){ try { Connection c = DBUtil.getConnect ...

  6. HDU 1014 Uniform Generator(模拟和公式)

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1014 Uniform Generator Time Limit: 2000/1000 MS (Java ...

  7. react系列(一)JSX语法、组件概念、生命周期介绍

    JSX React中,推出了一种新的语法取名为JSX,它给了JS中写HTML标签的能力,不需要加引号.JSX的语法看起来是一种模板,然而它在编译以后,会转成JS语法,只是书写过程中的语法糖. JSX的 ...

  8. 苹果内购小结 - iOS

    此篇针对 iOS 支付进行一次小结,很久没碰这块了,有些方法 Apple 官方也进行了优化,故也将随之进行更新. 首先,code 部分将分为两部分,一部分在 appdelegate 中,另一部分单独封 ...

  9. iOS之estimatedHeightForRowAtIndexPath避免程序EXC_BAD_ACCESS

    在你的项目中把estimatedHeightForRowAtIndexPath方法写实现以下,返回一个估计高度(随便估,笔者建议还是按照正常思路来写,大概高度是多少就返回多少),这样就不会报EXC_B ...

  10. LeetCode 中级 - 组合总和II(105)

    给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字在每个组合中只能使用一次. ...