<!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定义全局组件的更多相关文章

  1. vue（3）—— vue的全局组件、局部组件

    组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...

  2. vue 定义全局函数，监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  3. TZ_16_Vue定义全局组件和局部组件

    1.定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <co ...

  4. vue定义全局方法 调用其他组件的方法

    官网的写法  vue实例.$on就可以在根实例上定义全局方法 this.$root就是获取根实例  如果没有根实例 就表示当前实例 this.$root.$on 不需要.eventHub 不需要下面这 ...

  5. vue.2.0-自定义全局组件

    App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> < ...

  6. vue 的全局组件和 局部组件

    vue组件局部与全局注册的区别   //局部注册 var mycomponent = new extend({        <!--Vue.extend()是Vue构造器的扩展,调用Vue.e ...

  7. vue定义全局date过滤器（自定义JS文件模块和Moment.js库）

    自定义dateFormat.js文件模块 dateFormat.js /** * 时间字符串 转 时间戳 * @param {String} time_str 时间字符串(格式"2014-0 ...

  8. vue中全局组件与局部组件的注册，以及动态绑定props值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue创建全局组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. ssm多数据源配置

    1.在.properties配置文件中 添加第二个数据源信息(type2,driver2, url2,username2,pawwword2) 2.修改spring-context.xml(src/m ...

  2. dml并行

    Enabling Parallel DMLA DML statement can be parallelized only if you have explicitly enabled paralle ...

  3. 源码解析Django CBV的本质

    Django CBV模式的源码解析 通常来说,http请求的本质就是基于Socket Django的视图函数,可以基于FBV模式,也可以基于CBV模式. 基于FBV的模式就是在Django的路由映射表 ...

  4. 数据库六大约束用法：主键(primary key)、外键(foreign key)、非空(not null)、默认(default)、检查(check)、唯一(unique)

    1. 数据库有六大约束 主键(primary key) 外键(foreign key):被参照的键必须有唯一约束或是主键 非空(not null) 默认(default) 检查(check):orac ...

  5. Linux cpu 内存 压力测试

    stress --cpu 8 --io 4 --vm 2 --vm-bytes 128M --timeout 10s

  6. A页面跳转到B页面后打开指定tabs标签

    A页面: <!DOCTYPE html><html lang="en" class="no-js">    <head>   ...

  7. python3下的twistedPOST请求网页

    在python2中我们使用twisted比较方便,网上资料也比较多,但是通常在python3中使用的时候,并不能成功.我也是找了好多资料没有成功之后,自己去尝试做小白鼠,测试了很久之后,发现传递给tw ...

  8. C# 获取版本号

    Text = Text + " [V." + Assembly.GetExecutingAssembly().GetName().Version + "]";

  9. 函数式编程-compose与pipe

    函数式编程中有一种模式是通过组合多个函数的功能来实现一个组合函数.一般支持函数式编程的工具库都实现了这种模式,这种模式一般被称作compose与pipe.以函数式著称的Ramda工具库为例. cons ...

  10. ELK配置

    安装logstash docker pull logstash docker run -it --rm logstash -e 'input { stdin { } } output { stdout ...