<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> #app{ width:100%; height:100px; background:red; } .box{ width:100%; height:30px; background:yellow; } </style> </head> <body> <div id="app" @click="onmessage()"> {{ message }} <one-component todo="haha"></one-component> <two-component a="enen"></two-component> <div class="box" v-for="(item,index) in lala" :key="index"> <laaaaaa :bbb="item"></laaaaaa> </div> </div> <script> var objarr=[ {id:0,text:"二"}, {id:1,text:"三"}, {id:2,text:"四"}, {id:3,text:"五"}, {id:4,text:"六"}, {id:5,text:"七"} ] Vue.component('one-component',{//全局注册 template:`<div>我是组件{{ todo }}</div>`, props:['todo'] }); Vue.component('two-component',{//全局注册 data(){ return{ bb:"值" } }, template:`<div>我是第二个全局组件{{ a }}{{ bb }}</div>`, props:["a"] }); var componentA = { //局部注册组件 template:`<div>我是局部组件{{ hehe }}{{ bbb.id }}{{ bbb.text }}</div>`, data(){ return{ hehe:"我是子组件的值" } }, props:["bbb"] } var app=new Vue({ el:"#app", components:{ "laaaaaa":componentA }, data:{ message:'页面加载于' + new Date().toLocaleString(), lala:objarr }, methods: { onmessage(){ this.message='haha' } }, mounted() { console.log(this.lala); } }); </script> </body> </html>