写在template标签里的模板
<template id="demo2">
<h2 style="color:red">我是template标签模板</h2>
</template>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
template:'#demo2'
})
</script>
写在script标签里的模板
<script type="x-template" id="demo3">
<h2 style="color:red">我是script标签模板</h2>
</script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
template:'#demo3'
})
</script>
组件
全局组件
- 全局化就是在构造器的外部用Vue.component来注册，我们注册现在就注册一个
<wzj></wzj>的组件来体验一下。
<div id="app">
<wzj></wzj>
</div>
<script type="text/javascript">
//注册全局组件
Vue.component('wzj',{
template:`<div style="color:red;">全局化注册的wzj标签</div>`
})
var app=new Vue({
el:'#app',
data:{
}
})
</script>
- 说明：组件全局注册后，就可以像一个标签一样在页面上使用，到时候通过vue渲染后就是模板里的内容
局部组件
- 说明：局部注册组件局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。
<div id="app">
<panda></panda>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
components:{
"panda":{
template:`<div style="color:red;">局部注册的panda标签</div>`
}
}
})
</script>
- 比较：从代码中你可以看出局部注册其实就是写在构造器里，但是你需要注意的是，构造器里的components 是加s的，而全局注册是不加s的。
组件与指令的区别？
- 组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，这只是个人观点。
父子组件中的通信
- 父组件通过props属性给子组件传值，子组件通过$emit事件向父组件传值，可以参考父子组件间的通信
组件在实际项目中的使用
- 实际的项目中，xxx.vue的的vue页面就是一个组件，一个页面可以由一个或多个组件组成，每一个组件都是由三个部分组成，形如：
<template></template>
<script></script>
<style></style>
- 说明template里是放html页面，script里写逻辑（vue实例在这里面，需要引入的组件也在这里引入），style里写样式
当a组件需要b组件，我们怎么做？
- 只需在a组件先引入b组件，最好是用import b from 'b.vue',这是ES6的引入方法，vue支持ES6语法的，然后在a组件的vue实例中注册b组件，这样注册：
var app=new Vue({
el:'#app',
data:{ },
components:{
b:b
}
})
- 这样就a组件中就引入了b组件，然后你在template里
<b></b>,这样a组件里就成功的引入并使用了b组件
