使用vue自定义组件以及动态时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head> <body>
<script src="js/Vue.js"></script>
<div id="app"> <incbutton></incbutton>
</div>
<div id="app1">
<component-a></component-a> <timesa></timesa>
</div> <script type="text/javascript"> Vue.component('timesa',{
template:`<h2>你好，当前时间是:{{time1}}</h2>`,
data(){
return {
time1: new Date().toLocaleTimeString(),
_ti:null
}
},
methods:{
updatetime(){
this.time1=new Date().toLocaleTimeString()
}
},
created(){
this._ti=setInterval(this.updatetime,1000);
},
breforeDestory(){
//释放
this._ti.claer();
}
}) Vue.component('component-a',{
template:`<h1>你好，现在时间是：{{date}}</h1>`,
data(){
return {
date:new Date().toLocaleTimeString(),
timer:null
}
},
methods:{
updateTime(){
this.date=new Date().toLocaleTimeString();
}
},
created(){
this.timer=setInterval(this.updateTime,1000);
},
beforeDestory(){
//释放
this.timer.claey();
} }) new Vue({el:'#app1'})
//定义组件
var my ={
template:`<button @click='incr' @mouseover='del()'>你已经点击了{{count}}</button>`,
data(){
return{
count :0
}
},
methods:{
incr(){
this.count = this.count +1;
},
del(){
this.count=this.count-1;
}
}
}
//注册组件名
Vue.component('incbutton',my);
//使用组件
var vm=new Vue({
el:"#app"
});
</script>
</body>
</html>
运行效果：
使用vue自定义组件以及动态时间的更多相关文章
- Vue自定义组件实现v-model指令
Tips: 本文所描述的Vue均默认是Vue2版本 在我们初次接触Vue的时候,一定会了解到一个语法糖,那就是v-model指令,它带给我们的第一印象就是它可以实现双向绑定 那么,什么是双向绑定?通俗 ...
- vue自定义组件（vue.use()，install）+全局组件+局部组件
相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...
- Vue组件的操作-自定义组件，动态组件，递归组件
作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件.v-model指 ...
- VUE 自定义组件之间的相互通信
一.自定义组件 1.全局自定义组件 我们在var vm = new Vue({});的上面并列写上Vue.component('自定义组件名',{组件对象});来完成全局自定义组件的声明.示例代码如下 ...
- 8、VUE自定义组件
1.为什么要使用自定义组件? 自定义组件是用来封装复杂的内容,提高可重用性,比如封装复杂的表格组件.日历组件.图片轮播组件等. 2.自定义组件 2.1. 全局组件 全局组件是每个Vue对象都能使用的组 ...
- Vue | 自定义指令和动态路由实现权限控制
功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue<te ...
- vue 自定义组件销毁
今天在开发电商vue前端项目时,用户每次登出再换其它用户登录时,页面显示的用户名和左则导航都还是上个用户的,刚开始以为是localStorage中没有清除全局数据,然后在用户点击退出系统时手动清除lo ...
- Vue自定义组件插入值
我们自定义组件的时候有时候需要往组件里面插一些内容: //定义一个组件test,插值内容用slog来代替 export default { name: 'test', template:` <d ...
随机推荐
- Linux抓包工具：tcpdump
tcpdump 是一个命令行实用工具,允许你抓取和分析经过系统的流量数据包.它通常被用作于网络故障分析工具以及安全工具. tcpdump 是一款强大的工具,支持多种选项和过滤规则,适用场景十分广泛.由 ...
- MySql存储引擎MyISAM和InnoDB的区别
1.MySQL默认采用的是MyISAM. 2.MyISAM不支持事务,而InnoDB支持.InnoDB的AUTOCOMMIT默认是打开的,即每条SQL语句会默认被封装成一个事务,自动提交,这样会影响速 ...
- Windows未能启动 由于关键系统驱动程序丢失或损坏 电脑无法开机
该错误导致系统无法开机,其实也好解决 错误描述: Windows未能启动.原因可能是最近更改了硬盘或软件.解决此问题的步骤…… 1.…… 2.…… 3.…… …… 文件:\windows\system ...
- c#中日期的处理
DateTime.Now.ToShortDateString()//只取日期DateTime.Now.ToLongTimeString();//只取时间搞定DateTime.Now.ToShortTi ...
- Xcode10 闪退问题
最新更新了iOS12,mac10.13.6,xcode10之后,打开之前的项目,只要进行import,xcode就会闪退.那么就来看一下解决方案: Xcode10 新增了一个构建系统起名“New Bu ...
- 关于消息推送的补充，主要介绍服务端的实现，包含object c 版本 c 版本 java 版本 php 版本 （转）
要实现消息推送功能,我们可以采用第三方(腾讯:信鸽:百度:云推送:极光推送:友盟):当然,因为各种原因,我们不能使用第三方的推送服务,那我们就需要自己编写服务端.在网上寻觅了很久,找到一篇很不错的讲解 ...
- myeclipse 2014 闪退问题解决
1.删掉Workspace下面的 \.metadata\.plugins\org.eclipse.core.resources一整个文件夹 2.删掉Workspace 下面的 \.metadata\ ...
- Flowchart
1. 工具可使用 https://www.processon.com 2.
- PHP 运用rsa加密和解密实例
1.加密解密的第一步是生成公钥.私钥对,私钥加密的内容能通过公钥解密(反过来亦可以) 下载开源RSA密钥生成工具openssl(通常Linux系统都自带该程序),解压缩至独立的文件夹,进入其中的bin ...
- 使用Unicode写文本文件：一个简单类的示例
参考了http://forums.codeguru.com/showthread.php?457106-Unicode-text-file示例. class WOFSTREAM : public st ...