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. PCB常用单位转换 mil 英尺

    PCB常用单位转换 mil 英尺 相关常用单位     1mil   = 0.0254mm 100mil = 2.54mm 1英寸   = 1000mil = 2.54cm 1英尺   = 12英寸  ...

  2. eclipse如何查问题?

    问题:从SVN上拉了一个项目,莫名奇妙就报错?看着就很纠结 解决之道:在Window下拉菜单show View 找到Problems 就可以查到具体的原因,我的这个是需要添加一个tomcat服务器

  3. HashSet、LinkHashSet、TreeSet总结

    HashSet:散列集,集合中的元素不允许重复,但是不要求顺序,输出的顺序和进入HashSet的顺序是没有关系的 LinkedHashSet :链表散列集,集合中的元素不允许重复,同时要求和进入Set ...

  4. javascript 返回上一页面

    <a href="<a href="javascript :history.back(-1)">返回上一页</a>或<a href=& ...

  5. 设置Activity进入退出动画

    http://blog.csdn.net/tenpage/article/details/7792689 http://blog.csdn.net/lnb333666/article/details/ ...

  6. Drawing Images and Text

    using System;using UIKit;using Foundation;using CoreGraphics;namespace GraphicsAnimation{ public cla ...

  7. Android SDK 更新不下来解决方法

    国内的小伙伴是不是更新SDK总是更新不动呢,小弟找到一个好的解决方式,把SDK的全部都下载全了也就用了一个小时,匀速2M/s. 解决方法是改动win7的host文件. 路径:C:\Windows\Sy ...

  8. 初识kbmmw 中的smartbind功能

    关于kbmmw smartbind 的开发原因及思路,大家可以参见官方的博客说明和红鱼儿的翻译. 今天我就实例操作一下,给大家演示一下具体实现. 我们新建一个工程 放几个基本的控件 在单元里面加上引用 ...

  9. appium(7)-Automating mobile gestures

    While the Selenium WebDriver spec has support for certain kinds of mobile interaction, its parameter ...

  10. appium(1)-about appium

    about appium Introduction to Appium Appium is an open-source tool for automating native, mobile web, ...