vue自定义组件
1、局部组件，局部组件必须要手动挂载，不然无法生效
2、全局组件，全局组件不需要手动挂载，但是不常用，尽量不要在全局上挂载变量或者组件（可能会影响浏览器性能）
3、配合模板使用实现组件间的嵌套
example：局部组件和全局组件的使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
<hello></hello>
<world></world>
</div>
<script type="text/javascript"> //自定义组件(组件注册一定要在实例化vue之前),组件内部也支持钩子方法 //1、局部组件 必须要手动挂载 不然不生效 var Hello = { template:"<h1 @click='clickFn'>{{ msg }}</h1>", //自定义组件（局部组件和全局组件都是）和vue实例不一样的是，vue实例的data是一个json，而自定义组件的data是一个函数，并且格式固定！必须以json形式return data: function(){ return { msg:"点我" } }, methods:{ clickFn: function(){ alert("Don't touch me!") this.msg = "Don't touch me!"; } }, //钩子方法，在模板渲染之前 //vue 没有控制器的概念，因此我们通过钩子来代替控制器 beforeCreate : function(){ console.log('I am ready') }, //钩子方法，在模板渲染完成之后 mounted : function(){ console.log('I have finished') } } //2、全局组件 无需手动挂载 不常用（尽量不要在全局上挂载变量或者组件） //注册组件 Vue.component('world',{ template:"<h1 @click='clickFn'>{{ msg }}</h1>", data: function(){ return { msg:'点我' } }, methods:{ clickFn: function(){ alert('You can touch me~') this.msg = "You can touch me~"; } } }) //实例化vue对象并且手动挂载自定义组件 var vm = new Vue({ el:'#example', components:{//在这个方法里面挂载自定义组件，前面是标签名称，后面是首字母大写的变量名 'hello':Hello } }); </script>
</body>
</html>example：配合模板自定义局部组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue测试2</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <style type="text/css"> *{ list-style: none; } </style> </head> <body> <div id="example"> <!-- 组件调用 --> <hello></hello> <!-- {{title}} title is not defined --> </div> <!-- 编写模板（模板在HTML页面中会默认display：none） --> <template id="example01"> <!-- vue2.0以后，模板内不支持多个代码片段，必须要有层级关系 --> <div> <ul> <!-- <li>{{msg}}</li> msg is not defined --> <li>{{title}}</li> <li>03</li> <li>04</li> <li>05</li> </ul> </div> </template> <script type="text/javascript"> //Vue自定义组件（配合模板使用方法） 自定义的组件**默认**是不能和vue实例共享数据的 //自定义局部组件 var Hello = { //使用模板 template : '#example01',//选择器 data : function(){ return { title : 'I am son' } } } //挂载组件 var vm = new Vue({ el:'#example', data : { msg : " I am father" }, components: { 'hello':Hello } }); </script> </body> </html>example：配合模板自定义局部组件并实现组件间的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue组件间的套用 -->
<div id="example">
<!-- 父组件 -->
<parent></parent>
</div>
<!-- 定义模板 -->
<!-- 一定要注意，使用模板配合组件套用的时候，不要直接把子组件放在父组件标签里面，要放在模板里，因为渲染时模板会替换标签，所以标签里的内容都会被忽略的 -->
<template id="example01">
<div>
<h1>我是父组件</h1>
<!-- 子组件 -->
<child></child>
</div>
</template>
<script> //注意顺序，子组件注册必须在父组件之前，不然无法调用！（JS域解析原理） var Child = { template : '<h2>我是子组件</h2>' } var Parent = { template : '#example01', components : { 'child':Child } } var vm = new Vue({ el:'#example', components : { 'parent': Parent } }); </script>
</body>
</html>