使用vue自定义组件以及动态时间
使用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 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreat ...
- Vue自定义组件之时间跨度选择器
时间跨度选择器 该组件是个时间跨度选择器. 基于 vue自定义组件之选择器 和 Vue自定义组件之日期时间范围选择器 点击选框,下拉列表中有四个选项,点击自定义时间,后边会出现 日期时间范围选择 代码 ...
- vue 自定义组件双向数据绑定
文章目录 序 属性&事件传值双向绑定 v-model组件双向绑定 .sync修饰符双向绑定 总结 !!!这边文章记录的是 vue2 的概念,vue3 对双向绑定进行了改动,不要把一下代码放到 ...
- vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口 学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
- vue自定义组件,插槽,自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件 语法 Vue.component('自定义组件名', {pr ...
- vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件 目录结构 index.html components/component1 components/ ...
- vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
- Vue自定义组件封装及使用Excel
Vue自定义组件封装及使用Excel 一.js-xlsx 组件安装 二. 创建vue组件 三.使用 四.效果图 一.js-xlsx 组件安装 npm install xlsx --savenpm in ...
- Vue自定义组件npm上传私服,且从私服下载使用
Vue自定义组件npm上传私服,yarn私服下载使用 安装镜像源管理工具nrm 发布自定义组件到公司私服 若未下载nrm源管理工具直接使用npm设置私服地址也可以 以下步骤都是基于npm命令 从私服下 ...
- Vue自定义组件及组件传值
vue自定义组件: 1.在src中components中,新建文件,后缀名为.vue组件(首字母建议大写)例如:Weekly.vue 2.Weekly.vue: 3.在app.vue中引用组件: js ...
最新文章
- HDR sensor 原理介绍
- java文件下载文件名乱码
- 自定义grains_module pillar
- Makefile总结
- 加密货币的时代,真的来临了吗?
- Example of Zookeeper and Solr cluster with Docker networking
- Python进阶:并发编程之Asyncio
- C++程序员Protocol Buffers基础指南
- php中的冒泡排序和选择排序d
- js动态生成表格(添加删除行操作)
- 小米允许安装未知来源不用sim卡_视频能独立通话的小米手表,会像小米手机一样好用吗?...
- 按键精灵通过句柄获取窗口坐标_学会用按键精灵获取子窗口句柄
- 微波和射频信号的区别是什么?两者的信号发生器该如何选择?
- 量子领域又有新突破:量子态持续时间可超5秒
- C#调用系统蜂鸣,警报声
- 宇视网络视频录像机走廊模式配置指导
- SGU133 Border
- 2021 年,Python 开发者用什么操作系统最香?
- alt标签的写法两种
- oracle设置会计科目管理器,系列之四:ORACLE EBS基础设置要点简介(E) - season的日志 - 网易博客...
热门文章
- 关联——Apriori算法详解
- 2021-06-22列表样式与背景图片
- 2021-06-16异步调用 CompletableFuture
- 列车运行图的编制原则是什么_列车运行图编制规则
- 区块链 自私挖矿(selfish mining)是什么
- FISCO BCOS Solidity 智能合约 批量插入新增数据
- 浅析bin,lib,src的区别
- 大华平台linux命令,大华平台软件简介.docx
- linux创建表空间 没有权限,ORA-12913: 无法创建字典管理的表空间
- nginx php访问阻塞,php-cgi和php-fpm,Windows环境下解决Nginx+php并发访问阻塞问题。