自定义Vue组件
自定义Vue组件的三步骤
1、创建组件
2、注册组件
3、使用组件
创建组件
//创建组件
var myclock = {
data(){
return {
clock: new Date().toLocaleString(),
_timer:null
}
},
methods:{
updateTime(){
this.clock = new Data().toLocaleString();
}
},
created(){
this._timer = setInterval(this.update,1000);
},
beforeDestroy(){
this._timer.cancel();
},
template:`<div>{{clock}}</div>`
};
注册组件
//注册组件,名为myclock
Vue.component("myclock",myclock);
var vm = new Vue({
el: "#app"
});
使用组件
<div id="app">
<h3>组件示例</h3>
<div>
<!-- 使用组件 -->
<myclock></myclock>
</div>
</div>
运行结果
一些简单例子代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="js/incbutton.js"></script>
<script src="js/vue.js"></script>
<div id="app">
<h3>组件示例</h3>
<div>
<!-- 使用组件 -->
<incbutton></incbutton>
<br />
<myclick></myclick>
<br/>
<myclock></myclock>
</div>
</div> <script>
//定义组件
var mytemplate1 = {
template: `<div>
<button @click='dianzan' v-bind:style="{color:colors}" >点赞</button>
<button @click='guanzhu' v-bind:style="{color:colors1}" >关注</button>
<myclock></myclock>
</div>`,
data() {
return {
isNumber: 1,
isCount: 1,
colors:'',
colors1:''
}
},
methods: {
dianzan(){
this.isNumber = this.isNumber +1 ; if(this.isNumber % 2 == 0 ){
this.colors ="red";
}else{
this.colors ="black";
} },
guanzhu(){
this.isCount = this.isCount +1 ; if(this.isCount % 2 == 0 ){
this.colors1 ="red";
}else{
this.colors1 ="black";
}
}
}
}; //注册组件
var myclock = {
data(){
return {
clock: new Date().toLocaleString(),
_timer:null
}
},
methods:{
updateTime(){
this.clock = new Data().toLocaleString();
}
},
created(){
this._timer = setInterval(this.update,1000);
},
beforeDestroy(){
this._timer.cancel();
},
template:`<div>{{clock}}</div>`
}; //注册组件，名为myclock
Vue.component("myclock",myclock); //注册组件，名为myclick
Vue.component("myclick", mytemplate1) //注册组件,名为incbutton
Vue.component("incbutton", myTemplate);
var vm = new Vue({
el: "#app"
});
</script>
</body>
</html>
将组件封装成js文件 然后调用。incbutton.js
//定义组件
var myTemplate = {
// ` 模板字符串 ` es6,随便换行,缺点 --> 兼容性不太行 只能在es6环境中运行
// ''
// ""
template:`
<div>使用说明
<ul>
<li>点击一下，数字增加</li>
<li>如果大于0,鼠标移到按钮上去减1啦</li>
</ul>
<button @click='incr' @mouseover='decr' >你已经点击了{{count}}</button>
</div>`,
data() {
return {
count:0
}
},
methods:{
incr(){
this.count = this.count +1 ;
},
decr(){
this.count = this.count >0 ? this.count -1:0;
}
}
};
自定义Vue组件的更多相关文章
- 自定义Vue组件打包、发布到npm以及使用
本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 先附 ...
- 自定义vue组件之仿百度分页逻辑
<template> <div> <ul :total="total" :pageSize="pageSize" :pageNum ...
- vue2 自定义全局组件（Loading加载效果）
vue2 自定义全局组件(Loading加载效果) github地址: https://github.com/ccyinghua/custom-global-component 一.构建项目 vue ...
- vue里在自定义的组件上定义的事件
事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...
- 自定义vue全局组件use使用(解释vue.use()的原理)
我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...
- Vue组件绑定自定义事件
Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...
- vue-gemini-scrollbar（vue组件-自定义滚动条）
vue-gemini-scrollbar(vue组件-自定义滚动条) https://segmentfault.com/a/1190000013338560
- vue 自定义报警组件
1.自定义报警组件 Alarm.vue <!-- 报警 组件 --> <template> <div class="alarm"> <!- ...
- vue自定义select组件
1.目的 看了很多element-ui的源码,决定自己实现一个简单的select组件,遇到的几个难点,便记录下来. 2.难点一 element-ui中的select组件通过v-model可以绑定数据, ...
随机推荐
- C和C++的静态函数和静态变量
1.C程序的静态变量和函数 引用自:https://blog.csdn.net/thanklife/article/details/78476737 作者:零点零一 C程序一直由下列部分组成 ...
- javascript预编译练习（变态篇）
例1. <!DOCTYPE html> <html> <head> <title></title> </head> <bo ...
- 闲记Windows 取证艺术
是不是很好奇,别人能够在你电脑上查看你运行程序历史,文档使用痕迹,浏览器浏览历史种种历史痕迹,没错,通过简单的系统了解以及配合相对应的工具,这一切就是这么的简单,看起来很高大上的操作,其实是 ...
- 企业邮箱 Webmail 通讯录导入 Outlook
企业邮箱暂不支持直接将通讯录同步至客户端软件,可以通过将通讯录在 Webmail 邮箱中导出,再导入所用软件的间接方法进行使用. 以Outlook 2010为例,如下详细导入通讯录步骤: 1.打开Ou ...
- C学习笔记-typedef
typedef是一种高级数据特性,它能使某一类型创建自己的名字 typedef unsigned char BYTE; typedef struct man MAN; BYTE b = 0x12; 与 ...
- DDOS常见攻击类型和防御措施
DDOS 攻击类型: SYN Flood 攻击 ACK Flood 攻击 UDP Flood 攻击 ICMP Flood 攻击 Connection Flood 攻击 HTTP Get 攻击 UDP ...
- 【有奖征集】报表模板库邀您提反馈，轻松赢取P30！
>>立即参赛 赛事初衷 大数据时代,数据的价值愈发彰显,什么样的报表才能真正帮助业务决策?这几乎是所有信息化建设的企业和个人都在思考的问题. 作为报表领域标杆企业,葡萄城于2017年推出了 ...
- 如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教 ...
- Codeforces 1178D. Prime Graph
传送门 首先每个点至少要有两条边连接 那么容易想到先保证这一点然后再慢慢加边 那么先构成一个环即可:$(1,2),(2,3),(3,4)...(n,1)$ 然后考虑加边,发现一个点加一条边还是合法的, ...
- leecode刷题（28）-- 二叉树的前序遍历
leecode刷题(28)-- 二叉树的前序遍历 二叉树的前序遍历 给定一个二叉树,返回它的 前序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,2,3] 思路 ...