Vue2中的组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src='../../js/vue.js'></script> </head> <body> <!-- 组件是可复用的 Vue 实例【它的原型prototype在vue实例的原型上】，且带有一个名字 组件化和 nodejs 里的模块化是有区别的 组件化：是从ui界面角度进行划分的,前端的组件化，方法ui组件的重用 模块化：是从代码逻辑角度来分类的，方便代码分层开发，保证每个模块职能单一 --> <div id="app"> <my-component></my-component>
<!-- 直接吧组件名称以标签形式放到页面上就是自定义组件的应用 -->
</div> </body> <script> //组件的定义方式1 let component = Vue.extend({ //1.定义组件模板html， 这里打印component，其实是一个构造函数，
template:'<h3>这是定义的组件的内容</h3>'
})
Vue.component('myComponent',component) //注册为一个真正的Vue组件 第一个参数为组件名，使用驼峰命名法的话， //在<body>里使用就要用-来分割高峰位置,直接全小写的话，引用也直接和命名一样即可
//方式二：不使用中间变量，直接把extend传入Vue.component('myComponent',Vue.extend({}) )
//方式三 直接 Vue.component('name', { 传入对象 // template:'html code' 无论哪种方式创建的组件，template只能有一个根元素 // })
//方式四： Vue.component('name', { 传入对象 // template:'#tplid' // data:function(){return {} } ,
组件内部可以有自己的私有数据，但是data必须是一个function，而且内部必须返回一个对象【主要原因是为了避免多次使用组件时，组件间数据的干扰，因为每次return 一个新的对象，多个组件实例间互不会干扰】，也可以有自己的私有方法，定义跟vue示例中的methods一样即可
无论哪种方式创建的组件，template只能有一个根元素，并且必须提供一个根标签元素
// 使用vue 提供的<template id='tplid'></template> 模板标签 把组件代码全部写到vue提供的 //标签中去 ！！！ 这里的id就是Vue.component（'mycon',{template:'#tplid'}）中注册的模板对象中的id
//只要定义在 vue 实例外的组件，都是全局组件，整个html里的vm实例都可以用到这个组件 // // data:function(){return {} }
组件可以有自己的data属性【使用方式和vm实例一样】，但是data属性值必须是一个预定义函数，
并且返回值必须是一个对象 let vm = new Vue({ el:'#app', data:{}, methods:{ }, components:{ //定义私有的组件 privatecomp:{ template:'#tplid' } } }) </script> </html>
复习生命周期：
Created():vue实例初始化创建完毕，此时vue实例中的data数据和methods方法都可以取到并使用，所以一般页面加载就要执行的操作或者ajax异步请求数据等操作放在Created这个生命周期函数中比较合适。
Mounted()：将最终渲染好的html页面渲染到页面文档中去【内存中渲染好的DOM树已经挂载到真实的页面中去】，据开发中的经验，一些第三方js库，结合vue使用的话，因为大多数js库使用前都需要初始化一些配置，配置的初始化最好放到Mounted这个生命周期钩子中！
