Vue常用方法汇总

一花一world

已于 2023-11-09 23:29:31 修改

阅读量1.4k

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2023-11-09 23:29:00 首次发布

本文链接：https://blog.youkuaiyun.com/ACCPluzhiqi/article/details/134322681

版权

前端专栏收录该内容

178 篇文章

订阅专栏

本文详细介绍了Vue.js中的关键概念，如data用于定义组件数据，methods定义组件方法，computed计算属性，watch数据变化监听，以及组件的生命周期钩子，帮助开发者理解和使用Vue构建用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js 是一个用于构建用户界面的渐进式框架。以下是一些常用的 Vue 方法及其详细说明和代码示例：

Vue 方法及其详细说明

data(): 用于定义组件的数据对象。数据对象可以包含任意类型的属性，如字符串、数字、布尔值、数组、对象等。

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

methods: 用于定义组件的方法。方法可以包含任意数量的参数，并在模板中通过 v-on 指令或简写为 @ 来调用。

<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>

computed: 用于定义计算属性。计算属性是基于其他数据属性进行计算得到的，它们的结果会被缓存，只有在依赖的数据发生变化时才会重新计算。

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

watch: 用于监听数据的变化。当指定的数据发生变化时，会执行一个函数。可以使用 immediate 选项来指定是否立即执行回调函数。

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

mounted(): 在组件挂载到 DOM 后执行的生命周期钩子。可以在此处执行一些初始化操作，如获取数据、设置事件监听器等。

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

beforeDestroy(): 在组件销毁之前执行的生命周期钩子。可以在此处执行一些清理操作，如取消事件监听器、清除定时器等。

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

Vue.js 是一个用于构建用户界面的渐进式框架。以下是一些常用的 Vue 方法及其详细说明和代码示例：

new Vue(): 创建一个新的 Vue 实例。

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

data: 定义组件的数据对象。

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

methods: 定义组件的方法。

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

computed: 定义计算属性。

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

watch: 监听数据的变化。

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

mounted: 在组件挂载到 DOM 后执行的生命周期钩子。

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

beforeDestroy: 在组件销毁之前执行的生命周期钩子。

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

created: 在组件创建完成后立即执行的生命周期钩子。

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

updated: 在组件更新时执行的生命周期钩子。

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

destroyed: 在组件销毁时执行的生命周期钩子。

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

props: 定义组件的属性。

props: {
  message: String
}

components: 注册全局组件。

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

directives: 注册自定义指令。

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

filters: 注册自定义过滤器。

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

mixins: 混入其他选项。

mixins: [/* ... */]

provide: 向子组件提供数据。

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

inject: 从父组件接收数据。

inject: ['message']

ref: 创建一个响应式的引用。

const myRef = ref('Hello Vue!')

nextTick: 在下一个 DOM 更新周期之后执行回调函数。

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

onMounted: 在组件挂载到 DOM 后立即执行的生命周期钩子。

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

onUpdated: 在组件更新时执行的生命周期钩子。

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

onBeforeUpdate: 在组件更新前执行的生命周期钩子。

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

onUnmounted: 在组件卸载时执行的生命周期钩子。

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

onActivated: 在组件被激活时执行的生命周期钩子。

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

onDeactivated: 在组件被停用时执行的生命周期钩子。

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

onErrorCaptured: 捕获错误并处理。

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

onSuspended: 在组件暂停时执行的生命周期钩子。

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

onReactivated: 在组件恢复时执行的生命周期钩子。

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

onRendered: 在组件渲染完成后执行的生命周期钩子。

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

onDestroyed: 在组件销毁时执行的生命周期钩子。

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

页面渲染

Vue.js是一个流行的JavaScript框架，用于构建用户界面。以下是一些Vue.js的常用方法和代码示例：

v-model: 双向数据绑定，将表单元素的值与Vue实例的数据属性进行绑定。

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

v-if、v-else-if、v-else: 条件渲染，根据条件判断来决定是否渲染元素。

<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>

v-for: 列表渲染，用于在模板中渲染列表数据。

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

v-on: 监听事件，用于监听DOM事件并在触发时执行相应的JavaScript代码。

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

v-bind: 绑定属性，用于动态地绑定一个或多个属性到Vue实例的数据属性上。

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

v-text: 更新元素的textContent。

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

v-html: 更新元素的innerHTML。

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

v-show: 根据表达式的值来切换元素的display属性。

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