Vue组件基础

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Vue组件基础</title>
   </head>
   <body>
       <div id="app">
           <button-counter></button-counter>

           
           <button-counter></button-counter>
           <button-counter></button-counter>
       </div>

       
       <div id="app1">
           <blog-post title="组件"></blog-post>
           <blog-post title="组件的"></blog-post>
           <blog-post title="组件的复用"></blog-post>
       </div>

       
       <div id="app2">
           <blog-post v-for="item in list" v-bind:key="item.id" v-bind:title="item.name"></blog-post>
       </div>
       <script src="vue.js"></script>
       <script>
           Vue.component('button-counter', {
               data: function() {
                   return {
                       count: 0
                   }
               },
               template: '<button v-on:click="count++">你好{{count}}</button>'
           })

           var app = new Vue({
               el: "#app"
           });

           //通过prop向子组件传递数据
           Vue.component('blog-post', {
               props: ['title'],
               template: '<h3>{{title}}</h3>'
           })

           var app1 = new Vue({
               el: "#app1"
           })

           // prop的典型应用
           var app2 = new Vue({
               el: "#app2",
               data: {
                   list: [{
                           id: 1,
                           name: "java"
                       },
                       {
                           id: 1,
                           name: "C#"
                       },
                       {
                           id: 1,
                           name: ".Net"
                       },
                       {
                           id: 1,
                           name: "Vue"
                       }
                   ]
               }
           })
       </script>
   </body>
</html>

Vue组件基础

推荐阅读