12种vue的做法

Vue是一种流行的前端框架，它提供了一种便捷的方式来构建交互式的用户界面。Vue的核心思想是将页面分解成组件，每个组件有自己的状态和行为。在Vue中，有许多种方式来定义和使用组件，下面我将介绍12种Vue的做法。

1. 全局注册组件：通过Vue.component()方法可以全局注册一个组件，然后在任何地方都可以使用它。示例代码如下：

Vue.component('my-component', {
  // 组件的选项
})

2. 局部注册组件：在某个组件的选项中注册一个局部组件，只能在该组件内部使用。示例代码如下：

new Vue({
  components: {
    'my-component': {
      // 组件的选项
    }
  }
})

3. 使用单文件组件：单文件组件是将组件的模板、样式和逻辑都放在一个文件中的一种方式。示例代码如下：

<template>
  <!-- 组件的模板 -->
</template>
<script>
  // 组件的逻辑
</script>
<style>
  /* 组件的样式 */
</style>

4. 使用Vue.extend()创建组件构造器：Vue.extend()方法可以创建一个组件构造器，然后可以使用该构造器创建多个组件实例。示例代码如下：

var MyComponent = Vue.extend({
  // 组件的选项
})
new MyComponent().$mount('#app')

5. 使用render函数创建组件：通过render函数可以动态地创建组件，可以直接返回一个虚拟DOM节点或者调用其他组件。示例代码如下：

Vue.component('my-component', {
  render: function (createElement) {
    return createElement('div', 'Hello World')
  }
})

6. 使用mixins混入组件选项：mixins是一种复用组件选项的方式，可以将多个组件的选项合并成一个。示例代码如下：

var mixin = {
  // 组件的选项
}
new Vue({
  mixins: [mixin]
})

7. 使用插槽分发内容：插槽是一种将内容分发到组件内部指定位置的方式，可以实现组件的灵活性。示例代码如下：

<my-component>
  <template slot="header">
    <!-- 插槽内容 -->
  </template>
</my-component>

8. 使用动态组件：动态组件是一种根据数据来动态地切换组件的方式，可以实现组件的复用和动态加载。示例代码如下：

<component :is="currentComponent"></component>

9. 使用计算属性：计算属性是一种根据已有的数据计算出新的数据的方式，可以在模板中直接使用。示例代码如下：

new Vue({
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

10. 使用watch监听数据变化：watch是一种监听数据变化并执行相应操作的方式，可以用来处理异步操作或复杂逻辑。示例代码如下：

new Vue({
  watch: {
    counter: function (newVal, oldVal) {
      // 监听counter的变化
    }
  }
})

11. 使用v-model实现双向绑定：v-model是一种实现表单元素和数据双向绑定的方式，可以简化表单的处理。示例代码如下：

<input v-model="message">

12. 使用指令扩展DOM功能：指令是一种自定义的DOM操作方式，可以用来扩展Vue的功能。示例代码如下：

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

以上是12种Vue的做法，它们分别用于不同的场景和需求，可以根据具体情况选择合适的方式来开发Vue应用。