1、设置一个div显示数值(这个数值不要设置在组件内部)

2、设置组件的名字

<!DOCTYPE html>
<html> <head>
<title> hello world vue </title>
<meta charset="utf-8" />
</head> <body>
<div id="app" v-cloak>
<!-- 给子组件的变量赋值为1 -->
<child-component :count="3"></child-component> </div>
</body> </html> <script src="jquery-3.1.1.js"></script>
<script src="vue.js"></script> <script>
$(document).ready(function() { });
</script> <script>
Vue.component('child-component', {
template: '<div> <child-component :count = "count+1" v-if="count<100"></child-component> {{count}} </div>',
name: 'child-component',
props: {
count: {
type: Number,
default: 5
}
},
data: function() {
return {}
},
methods: {}
}); var app = new Vue({
el: '#app',
data: {},
computed: {},
methods: {},
components: {},
mounted: function() {}
});
</script>

vue自定义组件的递归的更多相关文章

  1. vue自定义组件(vue.use(),install)+全局组件+局部组件

    相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...

  2. Vue自定义组件实现v-model指令

    Tips: 本文所描述的Vue均默认是Vue2版本 在我们初次接触Vue的时候,一定会了解到一个语法糖,那就是v-model指令,它带给我们的第一印象就是它可以实现双向绑定 那么,什么是双向绑定?通俗 ...

  3. [转] vue自定义组件(通过Vue.use()来使用)即install的使用

    在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue<te ...

  4. vue 自定义组件销毁

    今天在开发电商vue前端项目时,用户每次登出再换其它用户登录时,页面显示的用户名和左则导航都还是上个用户的,刚开始以为是localStorage中没有清除全局数据,然后在用户点击退出系统时手动清除lo ...

  5. Vue自定义组件插入值

    我们自定义组件的时候有时候需要往组件里面插一些内容: //定义一个组件test,插值内容用slog来代替 export default { name: 'test', template:` <d ...

  6. VUE 自定义组件之间的相互通信

    一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...

  7. vue自定义组件并使用

    以下是使用自己写的一个简单的文件上传框为例 1.自定义组件结构(一个js文件,一个vue文件),最好单独放一个文件 2.upload.vue 内容 其中,action是父组件传递给子组件的参数,使用p ...

  8. vue自定义组件中的v-model简单解释

    在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...

  9. 8、VUE自定义组件

    1.为什么要使用自定义组件? 自定义组件是用来封装复杂的内容,提高可重用性,比如封装复杂的表格组件.日历组件.图片轮播组件等. 2.自定义组件 2.1. 全局组件 全局组件是每个Vue对象都能使用的组 ...

随机推荐

  1. C++ 已知两个时间(年月日)求日期差

    转载:https://blog.csdn.net/flyyufenfei/article/details/79796035 #include<iostream> #include < ...

  2. shebang是啥

    在计算领域中,Shebang(也称为 Hashbang )是一个由井号和叹号构成的字符序列 #! ,其出现在文本文件的第一行的前两个字符. 在文件中存在 Shebang 的情况下,类 Unix 操作系 ...

  3. Android Studio运行Hello World程序

    老的神舟本本装上了深度LINUX了...应该是基于ubuntu的,安装软件用的apt-get而不是yum 想重装学下android原生开发,官网下载了android studio, 发现不用FQ也能下 ...

  4. 如何将本地jar包放入本地maven仓库和远程私服仓库

    1.将本地jar包放入本地仓库.只需执行如下命令即可: mvn install:install-file -Dfile=D:/demo/fiber.jar -DgroupId=com.sure -Da ...

  5. C++排序算法比较

    排序有内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存. 我们这里说说八大排序就是内部排序.          ...

  6. 大数据分析常用去重算法分析『Bitmap 篇』

    大数据分析常用去重算法分析『Bitmap 篇』  mp.weixin.qq.com 去重分析在企业日常分析中的使用频率非常高,如何在大数据场景下快速地进行去重分析一直是一大难点.在近期的 Apache ...

  7. 安装 mysql-5.6.41-winx64

    REF:https://www.cnblogs.com/cwb292/p/9888039.html https://dev.mysql.com/get/Downloads/MySQLInstaller ...

  8. 【Spring Boot学习之十一】整合mongoDB

    环境 eclipse 4.7 jdk 1.8 Spring Boot 1.5.2 参考: SpringBoot+Mongodb的使用

  9. 一款新的好用的SSH工具——FinalShell

    FinalShell是一体化的的服务器,网络管理软件,不仅是ssh客户端,还是功能强大的开发,运维工具,充分满足开发,运维需求.特色功能:免费海外服务器远程桌面加速,ssh加速,双边tcp加速,内网穿 ...

  10. Java白皮书(总结一些题目)

    java基础 1.      简述JVM的运行原理? Java平台由Java 虚拟机和Java 应用程序接口搭建,Java语言则是进入这个平台的通道, 用Java语言编写并编译的程序可以运行在这个平台 ...