vue中常用方法的用法汇总

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="showMessage">点击显示消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    showMessage() {
      alert(this.message);
    }
  }
}
</script>

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}

export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log('message changed from', oldVal, 'to', newVal);
    }
  }
}

export default {
  mounted() {
    console.log('Component mounted');
  }
}

export default {
  beforeDestroy() {
    console.log('Component about to be destroyed');
  }
}

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

data() {
  return {
    message: 'Hello Vue!'
  }
}

methods: {
  showMessage() {
    alert(this.message);
  }
}

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

watch: {
  message(newVal, oldVal) {
    console.log('message changed from', oldVal, 'to', newVal);
  }
}

mounted() {
  console.log('Component mounted');
}

beforeDestroy() {
  console.log('Component about to be destroyed');
}

created() {
  console.log('Component created');
}

updated() {
  console.log('Component updated');
}

destroyed() {
  console.log('Component destroyed');
}

props: {
  message: String
}

components: {
  MyComponent: { /* ... */ }
}

directives: {
  focus: { /* ... */ }
}

filters: {
  reverse: function (value) {
    return value.split('').reverse().join('');
  }
}

mixins: [/* ... */]

provide() {
  return {
    message: 'Hello from parent component'
  }
}

inject: ['message']

const myRef = ref('Hello Vue!')

nextTick(() => {
  console.log('This will run after the next DOM update cycle');
})

onMounted(() => {
  console.log('Component mounted');
})

onUpdated(() => {
  console.log('Component updated');
})

onBeforeUpdate(() => {
  console.log('Component about to update');
})

onUnmounted(() => {
  console.log('Component unmounted');
})

onActivated(() => {
  console.log('Component activated');
})

onDeactivated(() => {
  console.log('Component deactivated');
})

onErrorCaptured(error, instance, info) {
  console.log('Error captured:', error);
}

onSuspended(() => {
  console.log('Component suspended');
})

onReactivated(() => {
  console.log('Component reactivated');
})

onRendered(() => {
  console.log('Component rendered');
})

onDestroyed(() => {
  console.log('Component destroyed');
})

<input v-model="message" type="text">

<div v-if="isShown">
  <p>This is shown if isShown is true.</p>
</div>
<div v-else-if="isHidden">
  <p>This is shown if isHidden is true and isShown is false.</p>
</div>
<div v-else>
  <p>This is shown if isShown and isHidden are false.</p>
</div>

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

<button v-on:click="increment">Increment</button>

<div v-bind:class="{ active: isActive }"></div>

<p v-text="message"></p>

<div v-html="content"></div>

<div v-show="isShown">This is shown if isShown is true.</div>