05.Vue组件的核心概念(1):属性

代码地址:

https://github.com/tangjinzhou/geektime-vue-1/blob/master/%E6%BC%94%E7%A4%BADEMO%E6%BA%90%E7%A0%81/src/views/1.1/Props.vue

三个核心概念

1分44秒

第一种属性的写法,平时开发的时候不推荐这么做,对系统后期的维护是不利的

推荐使用的方式:

这是自定义的校验

list是一个数组,默认是一个空的数组

isVisible默认是false ,如果你不写默认值的,vue也会帮你处理的

onChange这里是一个属性:

使用这个组件

把属性罗列在这里

没有什么特别的展示效果。只是把我们父组件传递的值罗列在这里

这里我们看到挂载了一个title,这就是原生属性,默认自动挂载到我们的根元素

如果你并不想要这个自动挂载的功能

我们把它设置为false 就可以了inheritAttrs:false

这样title就不见了

按钮的事件,不要去这么做

如果放开这段代码就会报错。因为我们的属性是一个单行数据流的,不能够在子组件内修改父组件传递过来的值

可以使用回调的方式,但是这不是最好的方式,后续会讲到

极客时间_Vue开发实战_05.Vue组件的核心概念(1):属性的更多相关文章

  1. 极客时间_Vue开发实战_06.Vue组件的核心概念(2):事件

    06.Vue组件的核心概念(2):事件 通过emit传递给父组件 我们点击了重置失败,上层的div的click=handleDivClick是接收不到.重置失败的点击的行为的 通常情况下,你不用.st ...

  2. 极客时间_Vue开发实战_07.Vue组件的核心概念(3):插槽

    07.Vue组件的核心概念(3):插槽 严格来的说在2.0之后已经不分区这两种插槽的概念了. 因为它底层的实现已经趋向于相同了. 2.6为了兼容2.5的版本,现在依然可以用这两种写法 作用域插槽就是多 ...

  3. 极客时间_Vue开发实战_汇总贴

    视频地址: https://time.geekbang.org/course/intro/163 https://github.com/tangjinzhou/geektime-vue-1 电脑dem ...

  4. 极客时间_Vue开发实战_04.开发环境搭建

    Vue CLI的形式搭建环境: vue create hello-world 我们选择default默认的配置,提供babel和eslint的支持.如果你已经对工程化的东西非常了解了.你可以选择自定义 ...

  5. 2.基础:Vue组件的核心概念

    一.组件基础和注册 组件概念 组件系统是 Vue 的另一个重要概念,他的核心就是封装和复用. 细节 组件的name必须是全局唯一. 二.属性.事件和插槽 组件的三大核心概念:属性.事件和插槽. 属性, ...

  6. Vue学习笔记:Vue组件的核心概念(下)

    1.双向绑定和单向数据流: 本质上还是单向数据流 视图<——>数据 v-model:仅仅是一个简写,用更少代码去实现功能. 自定义事件 .sync 修饰符 2.虚拟DOM及KEY属性作用 ...

  7. 极客时间 Mysql实战45讲 07讲行锁功过:怎么减少行锁对性能的影响笔记 极客时间

    极客时间 Mysql实战45讲 07讲行锁功过:怎么减少行锁对性能的影响笔记 极客时间极客时间 Mysql实战45讲 07讲行锁功过:怎么减少行锁对性能的影响笔记 极客时间 笔记体会: 方案一,事务相 ...

  8. Mysql实战45讲 06讲全局锁和表锁:给表加个字段怎么有这么多阻碍 极客时间 读书笔记

    Mysql实战45讲 极客时间 读书笔记 Mysql实战45讲 极客时间 读书笔记 笔记体会: 根据加锁范围:MySQL里面的锁可以分为:全局锁.表级锁.行级锁 一.全局锁:对整个数据库实例加锁.My ...

  9. 【视频合集】极客时间 react实战进阶45讲 【更新中】

    https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553702519936.mp4 01 React出现的历史背景及特性介绍 ...

随机推荐

  1. 笔记09 saveFileDialog

    C# saveFileDialog用法: #region 保存对话框private void ShowSaveFileDialog(){//string localFilePath, fileName ...

  2. 用户'sa'登录失败(错误18456)解决方案图解

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://thenear.blog.51cto.com/4686262/865544 htt ...

  3. 一起talk GDB吧(第二回:GDB单步调试)

    各位看官们,大家好.我们在上一回中说简单地介绍了GDB.这一回中,我们介绍GDB的调试功能:单步 调试. 闲话休提,言归正转. 让我们一起talk GDB吧! 看官们,我们先说一下什么是单步调试.大家 ...

  4. Ipython基础功能

    ipython:交互式的python命令行 直接在终端敲命令即可进入 安装:pip install ipython 使用:在终端敲“ipython” 与python解释器的使用方法一致 TAB键自动补 ...

  5. HTTPS那些事儿(一)-HTTPS原理

    HTTPS那些事儿(一) 近期看了<http权威指南>的几个章节.对HTTPS有了部分了解,同一时候在网上查阅了一些资料,遂打算记录一下心得,写的仓促,肯定有非常多错误的地方.欢迎大家指正 ...

  6. 构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(62)-EF链接串加密

    前言: 这一节提供一个简单的功能,这个功能看似简单,找了一下没找到EF链接数据库串的加密帮助文档,只能自己写了,这样也更加符合自己的加密要求 有时候我们发布程序为了避免程序外的SQL链接串明文暴露,需 ...

  7. Java之运行时异常与编译时异常区别

    Java中用2种方法处理异常: 1.在发生异常的地方直接处理: 2.将异常抛给调用者,让调用者处理. Java异常可分为3种: (1)编译时异常:Java.lang.Exception (2)运行期异 ...

  8. 1022. Fib数列

    https://acm.sjtu.edu.cn/OnlineJudge/problem/1022 Description 定义Fib数列:1,1,2,3,5,8,13,…1,1,2,3,5,8,13, ...

  9. this.triggerEvent()用法

    在对组件进行封装时 在当前页面想要获取组件中的某一状态,需要使用到this.triggerEvent(' ',{},{}),第一个参数是自定义事件名称,这个名称是在页面调用组件时bind的名称,第二个 ...

  10. android vector pathData探究,几分钟绘制自己的vectordrawable

    之前经常看到一些酷酷的图标效果, 深入进去发现不是直接用的图片, 而是一些以Vector标签开头的xml文件, 于是就看到了如下代码: <vector xmlns:android="h ...