自定义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可以绑定数据, ...
随机推荐
- 微擎-T
微擎菜单栏对应的数据库表 ims_modules_bindings 小程序前端uniacid的配置,微擎后台进入小程序应用时鼠标移动至管理查看链接即可(不点击) ims_account_wxapp微擎 ...
- mariadb数据库备份与恢复
1.查询日志: 记录每一条sql语句,建议不开启,因为如果访问量较大,会占用相当大的资源,影响性能; vim /etc/my.cnf.d/server.cnf general_log = ON| OF ...
- PhpMyAdmin提示未加密
新版本的PhpMyAdmin 增强了安全性,需要在配置文件设置一个短语密码.否则进入之后会有“配置文件现在需要一个短语密码.”的红色警叹提示. 解决方法: .将 phpMyAdmin/librarie ...
- 【Linux开发】linux设备驱动归纳总结（十三）：1.触摸屏与ADC时钟
linux设备驱动归纳总结(十三):1.触摸屏与ADC时钟 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- [转帖]JVM总结--JVM体系结构
JVM总结--JVM体系结构 https://blog.csdn.net/samjustin1/article/details/52215274 需要不断的学习才可以. 2016年08月15日 22: ...
- # ACM奇淫技巧
目录 ACM奇淫技巧 差分操作 坐标旋转 ACM 卡常优化 vsc代码块(头文件模板) 读入输出优化 逗号表达式 内联函数inline 寄存器变量register 条件判断加减代替取模 自增运算符优化 ...
- 数据绑定-集合List绑定
users.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- PHP高级进阶之路
一:常见模式与框架 学习PHP技术体系,设计模式,流行的框架 常见的设计模式,编码必备 Laravel.ThinkPHP开发必不可少的最新框架 YII.Symfony4.1核心源码剖析 二:微服务架构 ...
- Python的__hash__函数和__eq__函数
Python的__hash__函数和__eq__函数 可哈希的集合(hashed collections),需要集合的元素实现了__eq__和__hash__,而这两个方法可以作一个形象的比喻: 哈希 ...
- dedecms 公共模板写法 提高生成速度
{dede:include file="/temp/liuxingfushi.html" ismake='no'/}