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>