console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
  <site-info
    v-for="site in sites"
    :id="site.id"
    :title="site.title"
  ></site-info>
</div>
 <div>
    类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。
    每当父组件的数据变化时，该变化也会传导给子组件。
 </div>
<script>
const Site = {
/*
全局数据，先绑定到组件上，例如： 
 <site-info
    v-for="site in sites"
    :id="site.id"
    :title="site.title"
  ></site-info>
  然后组件内部模板通过props获取绑定的数据。

*/
  data() {
    return {
      sites: [
        { id: 1, title: 'Google'},
        { id: 2, title: 'Runoob'},
        { id: 3, title: 'Taobao'}
      ]
    }
  }
}
 
const app = Vue.createApp(Site)
 
app.component('site-info', {
  props: ['id','title'],
  template: `<h4>{{ id }} - {{ title }}</h4>`
})
 
app.mount('#app')
</script>
</body>
</html>