自定义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可以绑定数据, ...
随机推荐
- filter_var()函数
我们使用 payload :?url=javascript://comment%250aalert(1) ,可以执行 alert 函数: 实际上,这里的 // 在JavaScript中表示单行注释,所 ...
- NoSQL--couchdb
Couchdb CouchDB是Apache组织发布的一款开源的.面向文档类型的NoSQL数据库.由Erlang编写,使用json格式保存数据.CouchDB以RESTful的格式提供服务可以很方便的 ...
- C#4.0中的协变和逆变
原文地址 谈谈.Net中的协变和逆变 关于协变和逆变要从面向对象继承说起.继承关系是指子类和父类之间的关系:子类从父类继承所以子类的实例也就是父类的实例.比如说Animal是父类,Dog是从Anima ...
- 关于虚拟机docker 启动mysql 启动成功但未挂载到端口
首先排查了防火墙和其他权限相关问题 然后检查了mysql 用户权限问题 docker logs 查看日志 正常应该是到3306 问题是我的mysql my.cnf 文件是挂在在本地.当第二次启动容器时 ...
- kibana 查询例子
1.数字比较和布尔查询 account_number:< AND balance:>
- PTA(Basic Level)1037.在霍格沃茨找零钱
如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 -- 就如海格告诉哈利的:"十七个银西可(Sickle)兑一个加隆(Galleon),二十九个纳特(Knut)兑一个西可,很容易.& ...
- 依赖作用域之<scope>test</scope>
经常在代码中看到依赖的作用域为<scope>test</scope>,它的作用是,只能在test目录(通过右键->Make Directory as->Test S ...
- 多模块环境下修改包名Rename directory与Rename package
选中包名->右键Refactor->Rename,如果会弹出的警告框让选择Rename directory和Rename package时,若选择Rename directory,则是只修 ...
- Smarty内置函数之config_load
config_load的作用是: 用于从配置文件中加载变量,属性file引入配置文件名,另外若配置文件包含多个部分,可以使用属性section指定从那部分取得变量(若不指定,将会引入失败). 实例: ...
- MYSQL中的UNION和UNION ALL
SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每 ...