源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Vue组件</title>
  7.     <script src="vue.js"></script>
  8.     <style type="text/css">
  9.     body {
  10.         padding: 15px;
  11.     }
  12.     </style>
  13.     <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
  14. </head>
  16. <body>
  17.     <div id="app">
  18.         <praise-component title="赞↑" pclass="btn btn-info"></praise-component>
  19.         <praise-component title="踩↓" pclass="btn btn-danger"></praise-component>
  20.     </div>
  21.     <!-- 直接用这个标签写是不会被 html 去解析的  但是可以再下面的 vue 中引用这个模板 -->
  22.     <template id="praise-template">
  23.         <h3>{{ title }}</h3>
  24.         <input @click="updateCount" class="{{ pclass }}" type="button" value="{{ count }}">
  25.     </template>
  26.     <script>
  27.     Vue.component('praise-component',{
  28.         props:['title','pclass'],//给这个组件添加默认的属性，使其可以调用
  29.         template:"#praise-template",
  30.         data:function() {
  31.             return {
  32.                 //return 出去一个值 这样的话每个组件上引用的数据就不会是同一个值了 虽然初始值看起来是一样的
  33.                 count:0
  34.             }
  35.         },
  36.         methods:{
  37.             updateCount:function(){
  38.                 this.count ++;
  39.             }
  40.         }
  41.     })
  42.     new Vue({
  43.         el: "#app"
  44.     });
  45.     </script>
  46. </body>
  48. </html>
  • 需要注意的是如果组件的名称写成了驼峰式的命名 vue 默认会将其识别为全部是小写的，所以建议是使用连词符来进行命名 如果是非得使用驼峰的话需要使用一个 npm 包
    decamelize 来进行转换 — 它可以将你写的驼峰式命名的组件名称转换成连词的那种写法

image.png

  • 可以在 chrome 浏览器中配合 vue 扩展程序实时的看到使用的组件以及对应组件其数据的变化

image.png