组件:可以复用的实例。使用 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. Java面试总结 -2018(补录)

    参考详见:https://blog.csdn.net/jackfrued/article/details/44921941 https://blog.csdn.net/jackfrued/articl ...

  2. PL/SQL中判断字段为空

    功能写完发现数据库里好多关键字段是空的,可以直接删掉,可直接: DELETE FROM 表名 WHERE 字段 IS NULL OR TRIM(字段) = ''

  3. 架构师必备,带你弄清混乱的JAVA日志体系!

    作者:孤独烟 出处:http://rjzheng.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任 ...

  4. 交叉工具链和makefile

    交叉工具链: arm-linux-gcc:交叉编译器 arm-linux-ld:交叉连接器 arm-linux-readelf:交叉ELF文件工具 arm-linux-objdump:交叉反汇编器 a ...

  5. 解决ssh登录很慢的问题以及jumpserver登录主机出现:Authentication timeout

    一.问题 登录ssh输入用户名后,等待很长时间20-30秒左右才显示输入密码提示框,从而导致通过jumpserver堡垒机登录主机时,报错:Authentication timeout Opt> ...

  6. nslookup 工具的使用方法记录

    查询IP地址 nslookup最简单的用法就是查询域名对应的IP地址,包括A记录和CNAME记录,如果查到的是CNAME记录还会返回别名记录的设置情况.其用法是: nslookup 域名 定查询记录类 ...

  7. UEditor富文本编辑器简单使用

    UEditor富文本编辑器简单使用 一.下载地址:https://ueditor.baidu.com/website/ 官网中并没有 python 版本的 UEditor 富文本编辑器,本文简单介绍 ...

  8. 移动端布局基础viewport

    划重点 手机屏幕相对着桌面浏览器小,传统网页的设计在手机上体验糟糕 Apple 在移动版 Safari 中定义了 viewport meta 标签(如果没记错最早提出的话),用于创建一个虚拟窗口(la ...

  9. rediscli命令

    一.rediscli xxx 发送命令 二.进入客户端后的命令

  10. 5G技术被夸大?专家来测试一下

    像大多数新技术一样,5G也带来了大量媒体宣传.这种炒作中有些伴随着事实的严重扭曲和5G技术实际功能的放大.但是,有一个普遍共识的说法是5G将实现“极速”,换句话说,与前几代产品相比,带宽要高得多. 这 ...