自定义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可以绑定数据, ...
随机推荐
- 关于SQL关键字"having "
HAVING 子句 在 SQL 中增加 HAVING 子句原因是,WHERE 关键字无法与合计函数一起使用. SQL HAVING 语法 SELECT column_name, aggregate_f ...
- 【DSP开发】HyperLink 编程和性能考量
冯华亮/Brighton Feng---Communication Infrastructure 摘要 HyperLink 为两个 KeyStone 架构 DSP 之间提供了一种高速,低延迟,引脚数量 ...
- SolidWorks学习笔记1
鼠标 修改缩放方向 点击工具->选项->视图,点击第一条,翻转鼠标滚轮缩放方向. 平移:Ctrl+ 中键 或者右键空白处 菜单选择平移 缩放:Shift+中键 或者右键空白处 菜单选择放大 ...
- c++ string详解 assign
assign方法可以理解为先将原字符串清空,然后赋予新的值作替换. 返回类型为 string类型的引用.其常用的重载也有下列几种: a. string& assign ( const stri ...
- 安装VMWare tools 及安装后/mnt中有hgfs但没共享文件的解决办法
一.首先是安装VMWare tools打开虚拟机软件,在菜单栏‘虚拟机’子菜单下‘安装VMware Tools' 1.以root身份进入Linux 2.此时把linux的/dev/cdrom设备挂载到 ...
- 结合docker做flask+kafka数据接口与压力测试
一.需求 需要做实时数据接入的接口.数据最终要写入库,要做到高并发,数据的完整,不丢失数据. 二.技术选型 1.因为只是做简单的接口,不需要复杂功能,所以决定用flask这个简单的python框架(因 ...
- 【Usaco2014Open银组】双导航(gpsdual)
题目 [题目描述] FJ 最近网购了一台小车.但是由于他的草率,在选择加装物品时偶然地点击了两次"Submit" ,结果最后他的小车装了两台GPS 导航系统!更糟的是,这两个系统对 ...
- Android Monkey测试入门<1>
第一步:搭建环境:主要是安装和搭建java和sdk环境,说白了,对我们安卓开发来说,只要搭建好了Android开发环境,Monkey测试环境基本就是OK的了.可以参考:http://www.cnblo ...
- 可能是把 Java 内存区域讲的最清楚的一篇文章
出处: 可能是把 Java 内存区域讲的最清楚的一篇文章 Java 内存区域详解 写在前面 (常见面试题) 基本问题 拓展问题 一 概述 二 运行时数据区域 2.1 程序计数器 2.2 Java 虚 ...
- 为什么说Python采用的是基于值的内存管理模式？
Python中的变量并不直接存储值,而是存储了值的内存地址或者引用,假如为不同变量赋值为相同值,这个值在内存中只有一份,多个变量指向同一块内存地址.