vue中常用方法的用法汇总
作者:一花一world
Vue 方法及其详细说明
1.data(): 用于定义组件的数据对象。数据对象可以包含任意类型的属性,如字符串、数字、布尔值、数组、对象等。
new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
2.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>
3.computed: 用于定义计算属性。计算属性是基于其他数据属性进行计算得到的,它们的结果会被缓存,只有在依赖的数据发生变化时才会重新计算。
export default { data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { fullName() { return this.firstName + ' ' + this.lastName; } } }
4.watch: 用于监听数据的变化。当指定的数据发生变化时,会执行一个函数。可以使用 immediate 选项来指定是否立即执行回调函数。
export default { data() { return { message: 'Hello Vue!' } }, watch: { message(newVal, oldVal) { console.log('message changed from', oldVal, 'to', newVal); } } }
5.mounted(): 在组件挂载到 DOM 后执行的生命周期钩子。可以在此处执行一些初始化操作,如获取数据、设置事件监听器等。
export default { mounted() { console.log('Component mounted'); } }
6.beforeDestroy(): 在组件销毁之前执行的生命周期钩子。可以在此处执行一些清理操作,如取消事件监听器、清除定时器等。
export default { beforeDestroy() { console.log('Component about to be destroyed'); } }
7.new Vue(): 创建一个新的 Vue 实例。
const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
8.data: 定义组件的数据对象。
data() { return { message: 'Hello Vue!' } }
9.methods: 定义组件的方法。
methods: { showMessage() { alert(this.message); } }
10.computed: 定义计算属性。
computed: { reversedMessage() { return this.message.split('').reverse().join(''); } }
11.watch: 监听数据的变化。
watch: { message(newVal, oldVal) { console.log('message changed from', oldVal, 'to', newVal); } }
12.mounted: 在组件挂载到 DOM 后执行的生命周期钩子。
mounted() { console.log('Component mounted'); }
13.beforeDestroy: 在组件销毁之前执行的生命周期钩子。
beforeDestroy() { console.log('Component about to be destroyed'); }
14.created: 在组件创建完成后立即执行的生命周期钩子。
created() { console.log('Component created'); }
15.updated: 在组件更新时执行的生命周期钩子。
updated() { console.log('Component updated'); }
16.destroyed: 在组件销毁时执行的生命周期钩子。
destroyed() { console.log('Component destroyed'); }
17.props: 定义组件的属性。
props: { message: String }
18.components: 注册全局组件。
components: { MyComponent: { /* ... */ } }
19.directives: 注册自定义指令。
directives: { focus: { /* ... */ } }
20.filters: 注册自定义过滤器。
filters: { reverse: function (value) { return value.split('').reverse().join(''); } }
21.mixins: 混入其他选项。
mixins: [/* ... */]
22.provide: 向子组件提供数据。
provide() { return { message: 'Hello from parent component' } }
23.inject: 从父组件接收数据。
inject: ['message']
24.ref: 创建一个响应式的引用。
const myRef = ref('Hello Vue!')
25.nextTick: 在下一个 DOM 更新周期之后执行回调函数。
nextTick(() => { console.log('This will run after the next DOM update cycle'); })
26.onMounted: 在组件挂载到 DOM 后立即执行的生命周期钩子。
onMounted(() => { console.log('Component mounted'); })
27.onUpdated: 在组件更新时执行的生命周期钩子。
onUpdated(() => { console.log('Component updated'); })
28.onBeforeUpdate: 在组件更新前执行的生命周期钩子。
onBeforeUpdate(() => { console.log('Component about to update'); })
29.onUnmounted: 在组件卸载时执行的生命周期钩子。
onUnmounted(() => { console.log('Component unmounted'); })
30.onActivated: 在组件被激活时执行的生命周期钩子。
onActivated(() => { console.log('Component activated'); })
31.onDeactivated: 在组件被停用时执行的生命周期钩子。
onDeactivated(() => { console.log('Component deactivated'); })
32.onErrorCaptured: 捕获错误并处理。
onErrorCaptured(error, instance, info) { console.log('Error captured:', error); }
33.onSuspended: 在组件暂停时执行的生命周期钩子。
onSuspended(() => { console.log('Component suspended'); })
34.onReactivated: 在组件恢复时执行的生命周期钩子。
onReactivated(() => { console.log('Component reactivated'); })
35.onRendered: 在组件渲染完成后执行的生命周期钩子。
onRendered(() => { console.log('Component rendered'); })
36.onDestroyed: 在组件销毁时执行的生命周期钩子。
onDestroyed(() => { console.log('Component destroyed'); })
页面渲染
Vue.js是一个流行的JavaScript框架,用于构建用户界面。以下是一些Vue.js的常用方法和代码示例:
1.v-model: 双向数据绑定,将表单元素的值与Vue实例的数据属性进行绑定。
<input v-model="message" type="text">
2.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>
3.v-for: 列表渲染,用于在模板中渲染列表数据。
<ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul>
4.v-on: 监听事件,用于监听DOM事件并在触发时执行相应的JavaScript代码。
<button v-on:click="increment">Increment</button>
5.v-bind: 绑定属性,用于动态地绑定一个或多个属性到Vue实例的数据属性上。
<div v-bind:class="{ active: isActive }"></div>
6.v-text: 更新元素的textContent。
<p v-text="message"></p>
7.v-html: 更新元素的innerHTML。
<div v-html="content"></div>
8.v-show: 根据表达式的值来切换元素的display属性。
<div v-show="isShown">This is shown if isShown is true.</div>
以上就是vue中常用方法的用法汇总的详细内容,更多关于vue常用方法的资料请关注脚本之家其它相关文章!