组件：可以复用的实例。使用 v-component来实现

2.通过props属性添加相应的属性，并且在模板中渲染

当模板中包含多个组件时，则需要用一个div来包裹起来。如下：

可以将原来的的点击事件，写成一个函数，这样可以执行更多的功能。

在子类中通过  emit来触发父类中的一个函数，如下：

主程序vue中写clicknow函数：

可以使用slot插槽写html代码，如下：

Vue知识整理14：组件基础的更多相关文章

  1. Vue知识整理15：组件注册

    采用局部注册组件: 将代码放在vue的一个实例中,而不是单列申明.

  2. Vue知识整理16：单文件组件

    过程较为复杂,这里直接写出视频地址,可以直接查看 https://learning.dcloud.io/#/?vid=14

  3. Vue 知识整理—01-基础

    一:Vue是什么? Vue是一个JS框架. Vue.js是一套构建用户界面的渐进式框架. 库和框架的区别: ☞库:提供一些 API 工具函数,体现了封装的思想,需要我们主动调用: ☞框架:提供一套完整 ...

  4. Vue 知识整理—02-起步

    一:Vue 语法格式: vue vm = new Vue({ //选项 }) 二:Vue 实例: <div id="app"> <p>{{message}} ...

  5. Vue知识整理13：表单输入绑定（v-model）

    text:将输入框等表单,通过data变量实现数据绑定. textbox:数据绑定 3.checkbox和redio组件: 注意:data数据变量中,checkbox有可能会有多个结果,所以用数组: ...

  6. Vue知识整理10：条件渲染（v-if v-show）

    在Vue中使用v-if等条件实现条件的判断来实现对象的显示. 也可以采用 v-show条件来实现对象的显示.

  7. Vue知识整理7：vue中函数的应用

    在vue中使用函数对字符串做相应的处理: split:分割字符,将每个字符分割为一个数组值: reverse:将字符进行逆序排序: join:将字符连接: 最终输出结果.

  8. Vue知识整理6：JavaScript表达式

    可在vue中运用js表达式,完成数据的运算(包括三元运算).比较等操作.

  9. Vue知识整理2：Vue生命周期方法

    在vue执行过程中,可以分为beforeCreate.created.BeforeMount.mounted  .BeforeUpdate.updated 等常用的方法,如下图所示. 除此之外,通过查 ...

随机推荐

  1. DNS 缓存投毒

    原文:[DNS Cache Poisoning]( https://medium.com/iocscan/dns-cache-poisoning-bea939b5afaf) 译者:neal1991 w ...

  2. flutter-常见的基础组件（一）

    flutter 1.Text 文本组件 Text( 'czklove', //文本上的文字 style: TextStyle( // style 代表对文字的描述 fontSize: 18, //文字 ...

  3. websocket之拨云见雾

    websocket是基于http相应的特性弥补其不足(就是个socket,不再是一次请求一次相应) 但缺点就是只有在版本较高的浏览器才支持websocket. 浏览器: <script type ...

  4. SpringBoot02——A Simple SpringBoot Project&Hot Deployment

    1.简单的Controller映射 1.新建一个controller包,包一定在启动器的下一层级 2.可以在application.properties中进行调整端口和context-path参数 s ...

  5. 开发规范总结-java代码

    java8新特性: 开发的时候适当用一些新特性的语法,可以使代码更简洁.譬如List根据某个属性转map.stream.函数式编程.lambda表达式 有一种场景:两个list一个转map 两个lis ...

  6. 认识JWT(转)

    1. JSON Web Token是什么 JSON Web Token (JWT)是一个开放标准(RFC 7519),它定义了一种紧凑的.自包含的方式,用于作为JSON对象在各方之间安全地传输信息.该 ...

  7. 记录手机端h5页面碰到的一些问题

    关于input光标在手机端偏移 问题根本:不要使用line-height垂直居中. 解决方法:可直接定义height,然后高度由上下padding值撑开. 移动端清除input光标 ios input ...

  8. c# 谷歌动态口令对接

    https://www.cnblogs.com/easyauthor/p/11054869.html Google 身份验证器与两步验证功能配合,可在您登录 Google 帐户时为您平添一重安全保障. ...

  9. Java面试之基础篇（5）

    41.a.hashCode() 有什么用?与 a.equals(b) 有什么关系?        hashCode() 方法对应对象整型的 hash 值.它常用于基于 hash 的集合类,如 Hash ...

  10. weblogic 10c and 12c 打补丁

    https://pan.baidu.com/s/17IaK1SYwHxwt-CRb0zDqXw