Vue-面向组件的架构

面向组件的架构

Vue采用了一种组件化的架构，可以把一个页面划分为多个独立的、可复用的组件。每个组件都包含了自己的模板、逻辑和样式。

组件可以嵌套在其他组件中，形成复杂的应用程序。通过组合和嵌套不同的组件，构建出各种不同的用户界面。

• 下面是一个简单的例子，展示了一个Counter组件，该组件包含了一个按钮和一个计数器。

<div id="app">
  <counter></counter>
</div>

<script>
  // 定义计数器组件
  Vue.component('counter', {
    data: function() {
      return {
        count: 0
      }
    },
    template: `
      <div>
        <button @click="count++">Increment</button>
        <p>Count: {{count}}</p>
      </div>
    `
  })

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

在这个例子中，我们定义了一个名为 Counter 的组件，它有一个 count 属性和一个递增按钮。当按钮被点击时， count 会自动增加，并且视图会更新。