vue定义全局组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div id="app">
<my-com1></my-com1>
<my2></my2>
<mycon3></mycon3>
<counter></counter>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
let com1 = Vue.extend({
template:'<h2>vue创建组件</h2>'
})
Vue.component('myCom1',com1);
Vue.component('my2',{
template:'<div><h1>myw</h1></div>'
})
Vue.component('mycon3',{
template:'<h1>{{msg}}</h1>',
data:function(){
return{
msg:'组件定义data数据'
}
}
})
//var dataObj = {count:0}//共享
Vue.component('counter',{
template:'<div><input type="button" value="+1" @click="inc"><h3>{{count}}</h3></div>',
data:function(){
return {count:0};
},
methods:{
inc(){
this.count++;
}
}
})
var vm = new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
</body>
</html>
vue定义全局组件的更多相关文章
- vue（3）—— vue的全局组件、局部组件
组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...
- vue 定义全局函数，监听android返回键事件
vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...
- TZ_16_Vue定义全局组件和局部组件
1.定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <co ...
- vue定义全局方法 调用其他组件的方法
官网的写法 vue实例.$on就可以在根实例上定义全局方法 this.$root就是获取根实例 如果没有根实例 就表示当前实例 this.$root.$on 不需要.eventHub 不需要下面这 ...
- vue.2.0-自定义全局组件
App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> < ...
- vue 的全局组件和 局部组件
vue组件局部与全局注册的区别 //局部注册 var mycomponent = new extend({ <!--Vue.extend()是Vue构造器的扩展,调用Vue.e ...
- vue定义全局date过滤器（自定义JS文件模块和Moment.js库）
自定义dateFormat.js文件模块 dateFormat.js /** * 时间字符串 转 时间戳 * @param {String} time_str 时间字符串(格式"2014-0 ...
- vue中全局组件与局部组件的注册，以及动态绑定props值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue创建全局组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Python核心编程笔记 第二章
2.1 程序输出:print语句 可以使用print语句显示变量的字符串表示,或者仅用变量名查看该变量的原始值. 2.2 程序输出和raw_input()内建函数 ...
- CentOS命令登录MySQL时，报错ERROR 1045 (28000): Access denied for user root@localhost (using password: NO)错误解决方法
1.停用mysql服务:# /etc/rc.d/init.d/mysqld stop 2.输入命令:# mysqld_safe --user=mysql --skip-grant-tables --s ...
- mysql 8.0~MGR多成员读一致性
一 背景:当在读节点多成员查询时可能导致数据不一致 二 三种场景 1 读多写少 AFTER 2 读写相当 AFTER_AND_BEFORE 3 读少写多 BEFORE三 数据不一致 ...
- 关于lamp环境搭建过程的教程
一.搭建lamp 的网址 https://lamp.sh/install.html 二.对于linux下上传图片或音频失败原因? 1.必须将文件夹的权限设置为apache 命令为:chown -R a ...
- Spring框架-AOP详细学习[转载]
参考博客:https://blog.csdn.net/qq_22583741/article/details/79589910#4-%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85% ...
- Appnium-API-Execute Mobile Command
Execute Mobile Command Java:driver.executeScript("mobile: scroll", ImmutableMap.of("d ...
- 算法——八皇后问题（eight queen puzzle）之回溯法求解
八皇后谜题是经典的一个问题,其解法一共有种! 其定义: 首先定义一个8*8的棋盘 我们有八个皇后在手里,目的是把八个都放在棋盘中 位于皇后的水平和垂直方向的棋格不能有其他皇后 位于皇后的斜对角线上的棋 ...
- web文件下载
web页面实现文件下载的几种方法 今天碰到文件下载的一些问题,本着知其然也要知其所以然的精神,站在巨人的肩膀上深入学习和测试了一下,抛砖引玉,现在总结结论如下: 1)标准URL下载方式可以通过在web ...
- shiro 错误登陆次数限制
第一步:在spring-shiro.xml 中配置缓存管理器和认证匹配器 <!-- 缓存管理器 使用Ehcache实现 --><bean id="cacheManager& ...
- 如何配置adb环境变量
如何配置adb环境变量? 1.我的电脑---控制面板---高级系统设置 2.点击[高级系统设置],弹出系统属性的弹框, 3.点击[环境变量],弹出环境变量弹框,新建一个系统变量,命名为Android ...