自定义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可以绑定数据, ...
随机推荐
- 【AMAD】python-goose -- HTML Content/Article 提取器
动机 简介 用法 个人评分 动机 新闻网页,结构大多是类似的. 所以,能不能用一种通用的爬取方法来提取其中的数据? 简介 Goose最初是一个Java项目,在2011年被转为了scala项目1. Py ...
- 再谈循环&迭代&回溯&递归&递推这些基本概念
循环:不断重复进行某一运算.操作. 迭代:不断对前一旧值运算得到新值直到达到精度.一般用于得到近似目标值,反复循环同一运算式(函数),并且总是把前一 次运算结果反代会运算式进行下一次运算 递推:从初值 ...
- 纯css实现单选框样式
html代码 <h2>你最喜欢的水果</h2> <div class="input-radio"> <!-- 选中状态添加 checked ...
- 【转贴】龙芯内核发展策略 已经支持k8s
龙芯内核发展策略 时间:2019-06-27 15:48 来源:未知 作者:龙芯中科 点击:1002次 http://www.loongson.cn/m/view.php?aid=1118 ...
- Shell脚本编程（一）
shell 脚本编程(一) 1 . shell 的作用 Shell的作用是解释执行用户的命令,用户输入一条命令,Shell就解释执行一条,这种方式称为交互式(Interactive),Shell还有一 ...
- redis缓存穿透00
缓存穿透 缓存穿透,是指查询一个数据库一定不存在的数据.正常的使用缓存流程大致是,数据查询先进行缓存查询,如果key不存在或者key已经过期,再对数据库进行查询,并把查询到的对象,放进缓存.如果数据库 ...
- 面试40-一个数组，有2个数字出现奇数次，其余都是偶数次，求这两个数字O(n) O(1)
#include<iostream> using namespace std; // 题目:数组中只有不多于两个数字出现次数是奇数次,其他都是偶数次,求出出现奇数次的数字(不含0的数组) ...
- angular 4+中关于父子组件传值的示例
home.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-hom ...
- nginx配置详解和原理
1.nginx的配置文件 nginx 配置文件的整体结构 user nobody nobody; # 指定Nginx Worker进程运行用户以及用户组,默认由nobody账号运行,nobody 是系 ...
- 第一篇 HTML 认识HTML
认识HTML 学习一门语言,我们要先了解它,可以不用太资深,但要做到别人问,你能回答得出来! 注:推荐大家去网址:www.w3school.com.cn 前端学习手册(免费的) HTML(超文本标记语 ...