This article records the common methods in Vue, using Vue 3 as an example.
npm init vue@latest
# Activate ESlint and Prettier
cd project
# Install requirements
npm install
npm install yarn@latest
yarn dev
const blog = ref({
title: "hawcat's Blog",
content: 'Describe',
link: '/hawcat',
})
In HTML tags, use :* for dynamic binding.
{{}} is used to display Vue data.
<a :href="blog.link"> {{ blog.title }} </a>
<footer v-if="blog.content.length > 100">
<button>Read More</button>
</footer>
:key is used for optimizing the iteration speed.
<div v-for="blog in blogs" :key="blog.id">
<h1>
<a :href="blog.link"> {{ blog.title }} </a>
</h1>
<article>
<div>
{{ blog.content.slice(0, 100) }}
</div>
<footer v-if="blog.content.length > 100">
<button>Read More</button>
</footer>
</article>
</div>
computed is a reactive API in Vue used to create computed properties based on other reactive data. It recalculates the result and caches it until the dependent data changes.
const total_blogs = computed(() => blogs.value.length)
In HTML tags, add @ to track events.
The difference between const xx = ref() and const xx = x is that ref creates a reactive object, and Vue will track its .value. While const defines a normal constant that cannot be modified.
const initialBlogForm = {
title: '',
content: '',
link: '',
}
const blogForm = ref({ ...initialBlogForm })
ref(...) makes an object reactive, so the data bound in the template will update when the value changes.
{ ...initialBlogForm } ensures that a “copy” of initialBlogForm is used rather than binding directly to it.
Two-way data binding for properties.
<input type="text" id="blogTitle" v-model="blogForm.title"></input>
Add a modifier to @event to modify its behavior.
For example: <form @submit.prevent="">
The prevent modifier prevents the default form submission and page refresh.
Decouple the main page, and use defineProps to define the parameters that the component will accept, similar to function arguments in C++ or Python.
<template>
<div>
<h1>
<a :href="link"> {{ title }} </a>
</h1>
<article>
<div>
{{ content.slice(0, 100) }}
</div>
<footer v-if="content.length > 100">
<button>Read More</button>
</footer>
</article>
</div>
</template>
<script setup>
defineProps(['title', 'content', 'link'])
</script>
In the parent component:
<BlogPost v-for="blog in blogs" :key="blog.id" :title="blog.title" :content="blog.content" :link="blog.link"></BlogPost>
Or:
<BlogPost v-for="blog in blogs" :key="blog.id" v-bind="blog"></BlogPost>
Use the onMounted() method to load data when the component is mounted.
onMounted(() => {
setTimeout(() => {
viewCount.value = 10000
}, 1000)
})
Similar to the signal system in Qt.
Here, a custom signal titleClick is defined, which is emitted when the title is clicked, passing the title parameter.
<a :href="link" @click.prevent="$emit('titleClick', title)"> {{ title }} </a>
<!-- In setup -->
defineEmits(['titleClick'])
In the parent component:
<BlogPost @titleClick="handleTitleClick" v-for="blog in blogs" :key="blog.id" v-bind="blog">
<button>Share to WeChat</button>
</BlogPost>
function handleTitleClick(title) {
console.log('Clicked on title', title)
}
