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. windows下taskkill命令简介

    1.简介 使用该工具可以按照进程 ID (PID) 或映像名称终止任务. 2.语法 TASKKILL [/S system [/U username [/P [password]]]]        ...

  2. WPF02(concept)

    (转自http://www.cnblogs.com/huangxincheng/archive/2012/06/17/2552322.html)这些天从项目上接触到了wpf,感觉有必要做一个笔记,首篇 ...

  3. (9)launcher3 之 外部 更换主题Theme APP demo 实现原理以及demo

    先说下我的思路: luancher3里面更换图标的逻辑例如以下: 先从APP资源包里查询--数据库查询--其它地方查询ICON 因此,我们仅仅须要把 从数据库获取ICON 代码提前到  从APP资源包 ...

  4. Webkit JNI

    WebCoreFrameBridge.cpp BrowserFrame通过jni传下来的调用都会调用到WebCoreFrameBridge.cpp中的对应函数中,其他webkit的模块想回调信息给Br ...

  5. ios6.0,程序为横屏,出现闪退

    本文转载至 http://blog.csdn.net/huanghuanghbc/article/details/10150355   ios6.0,程序为横屏,出现闪退 *** Terminatin ...

  6. 2251: [2010Beijing Wc]外星联络

    2251: [2010Beijing Wc]外星联络 Time Limit: 30 Sec  Memory Limit: 256 MBSubmit: 801  Solved: 481[Submit][ ...

  7. Win10升级.NET Framework 3.5或2.0遇到错误0x800f081f

    具体方法如下: 1.将WIN10安装光盘ISO文件加载到虚拟光驱中. 2.WIN键+R键一起按,输入CMD后回车. 3.在CMD的命令行窗口里输入: cd C:Windowssystem32 跳转到s ...

  8. webstrom编辑react语法报错解决

    问题: 解决办法:1.把 JavaScript 的版本设置为 JSX Harmony. 2.把<script>type类型改为:text/jsx

  9. ChannelHandler揭秘(Netty源码死磕5)

    精进篇:netty源码死磕5  揭开 ChannelHandler 的神秘面纱 目录 1. 前言 2. Handler在经典Reactor中的角色 3. Handler在Netty中的坐标位置 4. ...

  10. 整形范围 运行Java代码的机器

    Java 无关 C C++ 有关  移植  整形溢出