1、组件
官网 https://cn.vuejs.org/v2/guide/components-registration.html
1、认识组件
2、组件的创建与复用
<!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"> <!--组件的复用 --> <Vheader></Vheader> <Vheader></Vheader> <Vheader></Vheader> </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> //组件的创建 Vue.component('Vheader',{ //一定是函数 必须要有返回值 data:function(){ return{ // 必须要return，哪怕是空对象 } }, template:` <div class="header"> <div class="w"> <div class="w-l"> <img src="./images/logo.gif" alt=""> </div> <div class="w-r"> <button>登录</button> <button>注册</button> </div> </div> </div>` }) // vue实例 var app = new Vue({ el: "#app", data:{ }, computed:{ }, methods:{ } }) </script> </body> </html>
3、组件传递数据
生命周期：刚开始的时候，取数据
