Vue创建全局组件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<body>

<div id="app">

<my></my>

<!-- 现在想要我的组件实现的效果和<div><span></span></div>的实现效果一样 -->

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<!--

分类 页面级组件：1.一个页面是一个组件

2.将可复用的部分抽离出来 基础组件

-->

<!-- vue中的组件是一个自定义标签 -->

<!-- vue可以给这些标签赋予一定的意义 -->

<!-- 根据用法划分 全局组件：可以声明一次在任何地方使用 局部组件：必须告诉这个组件属于谁

一般写插件的时候 用全局组件的时候多一些

-->

<script>

// 注意：

// 组件名尽量不要带有大写 多个单词用-

//

Vue.component('my',{

 

//一个对象可以看成一个组件

 

// 这里的意思是 用template这个模板里面的内容 替换标签中的内容

// 这里依然可以在自己的模板中拿到自己的数据

 

template:'<div>{{msg}}</div>',

 

data(){//组件中的数据必须是函数类型 返回一个实例（对象） 作为实例的数据

　　return {msg:'嘻嘻嘻ixixiixixi'}

}

})

let vm=new Vue({

el:'#app',

})

</script>

</body>

</html>