Vue组件常用

组件的基本使用(最常用用法)

增加数值案例

<div id="app">
    <my-component></my-component>
  </div>

  <template id="temp1">
    <div>
      <h1>这是标题</h1>
      <p>{{count}}</p>
      <button @click="add">增加数值</button>
    </div>
  </template>

  <script>
Vue.component('myComponent', {
      template: '#temp1',
      data() {
        return {
          count: 0
        }
      },
      methods:{
        add(){
          this.count++
        }
      }
    })

    var vue = new Vue({
      el: '#app',
      data: {
        
      }
    })
  </script>

坑爹指南:
组件中的data:

 data() {
        return {
          count: 0
        }
      }

最坑method(注意是methods):

methods:{
        add(){
          this.count++
        }
      }

秘籍:多敲就好啦！！！