<!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>
<script src="vue.js"></script>
<body>
<div id="app">
<!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式，引用到页面中去，即可 -->
<!-- 注意使用规则 -->
<!-- // 注意：如果使用vue.componentd定义全局组件的时候，组件使用了驼峰命名，则在引用的时候，需要把大写的驼峰改为小写字母同时，
// 在两个单词之间用-链接；如果不使用驼峰，则直接拿名称来使用即可 -->
<my-com1></my-com1>
<!-- <myCom1></myCom1> -->
</div>
<script>
// 1.使用vue.extend来创建全局组件
var com1= Vue.extend({
template:'<div><h1>这是直接用Vue.componet创建出来的组件</h1><span>123</span></div>'
// 通过temolate属性；指定了组件要展示的html结构
})
// 返回一个模板对象
// 1.2使用vue.componnet('组件名称'，创建出来的组件模板对象);然后注册一个组件
Vue.component('myCom1',com1)
// 注意：如果使用vue.componentd定义全局组件的时候，组件使用了驼峰命名，则在引用的时候，需要把大写的驼峰改为小写字母同时，
// 在两个单词之间用-链接；如果不使用驼峰，则直接拿名称来使用即可
var vm=new Vue({
el:'#app',
data:{
msg:'父组件中的数据123'
},
})
</script>
</body>
</html>
简写方式
<!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>
<script src="vue.js"></script>
<body>
<div id="app">
<!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式，引用到页面中去，即可 -->
<!-- 注意使用规则 -->
<!-- // 注意：如果使用vue.componentd定义全局组件的时候，组件使用了驼峰命名，则在引用的时候，需要把大写的驼峰改为小写字母同时，
// 在两个单词之间用-链接；如果不使用驼峰，则直接拿名称来使用即可 -->
<my-com1></my-com1>
<!-- <myCom1></myCom1> -->
</div>
<script>
// 1.使用vue.extend来创建全局组件
// var com1= Vue.extend({
// template:'<div><h1>这是直接用Vue.componet创建出来的组件</h1><span>123</span></div>'
// // 通过temolate属性；指定了组件要展示的html结构
// })
// // 返回一个模板对象
// // 1.2使用vue.componnet('组件名称'，创建出来的组件模板对象);然后注册一个组件
// Vue.component('myCom1',com1)
// 上面的写法可以简化为
Vue.component('myCom1',Vue.extend({
template:'<div><h1>这是直接用Vue.componet创建出来的组件</h1><span>123</span></div>'
// 通过temolate属性；指定了组件要展示的html结构
}))
// 注意：Vue.component第一个参数：组件的名称，将来在引用组件的时候，就是一个标签形式来引入它的
// 第二个参数是：Vue.extend创建的组件，其中tempalte就是组件将来要展示的html内容
var vm=new Vue({
el:'#app',
data:{
msg:'父组件中的数据123'
},
})
</script>
</body>
</html>
组件的创建方式第二种方式
vue.component
<!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>
<script src="vue.js"> </script>
</head>
<body>
<div id="app">
<!-- 还是使用标签的形式引用自己的组件 -->
<mycom2></mycom2>
</div>
<script>
Vue.component('mycom2',{
template:'<div><h1>这是直接用Vue.componet创建出来的组件</h1><span>123</span></div>'
// 注意：无论是哪种方式创建的组件，组件的tempalte属性指向的模板内容，必须有且只能有唯一的一个根元素
})
var vm=new Vue({
el:'#app'
}) </script>
</body>
</html>
组件的创建方式第三种方式:把模板抽离出去的方式
<!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>
<script src="vue.js"> </script>
</head>
<body>
<div id="app">
<mycom3></mycom3>
</div>
<!-- 注意：在被控制的#app外面，使用template元素，定义组件的html模板结构 -->
<template id="temp1">
<div>
<h1>这是通过tempale元素，在外部定义的组件结构，这个方式，有代码的只能提示和高亮</h1>
<span>好用，不错</span>
</div>
</template>
<script>
Vue.component('mycom3',{
template:'#temp1'
})
var vm=new Vue({
el:'#app'
}) </script>
</body>
</html>
注意：以上是全局组件的创建方式
<!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>
<script src="vue.js"> </script>
</head>
<body>
<div id="app">
<mycom3></mycom3>
</div>
<div id="app2">
<mycom3></mycom3>
</div>
<!-- 注意：在被控制的#app外面，使用template元素，定义组件的html模板结构 -->
<template id="temp1">
<div>
<h1>这是通过tempale元素，在外部定义的组件结构，这个方式，有代码的只能提示和高亮</h1>
<span>好用，不错</span>
</div>
</template>
<script>
Vue.component('mycom3',{
template:'#temp1'
})
var vm=new Vue({
el:'#app'
})
var vm2=new Vue({
el:'#app2'
}) </script>
</body>
</html>
下面来看下怎么定义局部组件
使用components定义私有组件
<!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>
<script src="vue.js"> </script>
</head>
<body>
<div id="app">
<mycom2></mycom2>
<!-- <login></login> -->
<!-- 注释这里会报错，因为他是vm2实例的私有组件 -->
</div>
<div id="app2">
<mycom2></mycom2>
<login></login>
</div>
<script>
// 全局组件
Vue.component('mycom2',{
template:'<div><h1>这是直接用Vue.componet创建出来的全局组件</h1><span>123</span></div>'
// 注意：无论是哪种方式创建的组件，组件的tempalte属性指向的模板内容，必须有且只能有唯一的一个根元素
}) var vm=new Vue({
el:'#app'
});
var vm2 =new Vue({
el:'#app2',
components:{
// 定义实例内部的私有组件
login:{
// template:'#temp2'
template:'<h1>这是私有的login组件</h1>'
}
}
})
</script>
</body>
</html>
可以把私有组件的模板分离出去 改写成这样
<!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>
<script src="vue.js"> </script>
</head>
<body>
<div id="app">
<mycom2></mycom2>
<!-- <login></login> -->
<!-- 注释这里会报错，因为他是vm2实例的私有组件 -->
</div>
<div id="app2">
<mycom2></mycom2>
<login></login>
</div>
<template id="temp2">
<h1>这是私有的login组件</h1>
</template>
<script>
// 全局组件
Vue.component('mycom2',{
template:'<div><h1>这是直接用Vue.componet创建出来的全局组件</h1><span>123</span></div>'
// 注意：无论是哪种方式创建的组件，组件的tempalte属性指向的模板内容，必须有且只能有唯一的一个根元素
}) var vm=new Vue({
el:'#app'
});
var vm2 =new Vue({
el:'#app2',
components:{
// 定义实例内部的私有组件
login:{
template:'#temp2'
// template:'<h1>这是私有的login组件</h1>'
}
}
})
</script>
</body>
</html>