> 工程

Vue常用方法记录

2023/05/03

1035 字数

3 分钟

... 阅读量

这篇文章记录了Vue中的常用方法，以Vue3为例。

Vue教程

项目初始化

npm init vue@latest
# 启用 ESlint 和 Prettier

cd project

# 安装依赖
npm install
npm install yarn@latest

yarn dev

常用方法

1. ref：定义响应式数据

const blog = ref({
  title: "hawcat's Blog",
  content: '描述内容',
  link: '/hawcat',
})

2. 动态绑定

在HTML标签中使用:*进行动态绑定。

{{}}用于展示Vue数据。

<a :href="blog.link"> {{ blog.title }} </a>

3. v-if 条件渲染

<footer v-if="blog.content.length > 100">
<button>阅读更多</button>
</footer>

4. v-for 循环渲染

:key用于优化遍历速度。

<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>阅读更多</button>
      </footer>
    </article>
  </div>

5. computed 计算属性

computed是Vue中的响应式API，用于根据其他响应式数据创建计算属性。当依赖的数据发生变化时，自动重新计算并缓存结果，直到相关依赖项变化。

const total_blogs = computed(() => blogs.value.length)

6. 事件处理

在HTML标签中，使用@来跟踪事件。

7. 变量定义

const xx = ref()和const xx = x的区别在于，ref定义的常量返回一个响应式对象，Vue会追踪它的.value，而const定义的是普通常量，不会被追踪。

const initialBlogForm = {
  title: '',
  content: '',
  link: '',
}

const blogForm = ref({ ...initialBlogForm })

ref(...)：使对象变为响应式，这样模板中的数据会随着值的变化而更新。

{ ...initialBlogForm }：确保使用的是initialBlogForm的副本，而不是直接与它绑定。

8. v-model 双向绑定

实现属性的双向绑定。

<input type="text" id="blogTitle" v-model="blogForm.title"></input>

9. 事件修饰符

在@事件后添加修饰符来修改事件行为。

例如：<form @submit.prevent=""> prevent修饰符阻止表单的默认提交行为，避免页面刷新。

10. Vue组件的定义与复用

解耦主页面，使用defineProps定义组件接收的参数，类似于C++或Python方法的入参。

<template>
  <div>
    <h1>
      <a :href="link"> {{ title }} </a>
    </h1>
    <article>
      <div>
        {{ content.slice(0, 100) }}
      </div>
      <footer v-if="content.length > 100">
        <button>阅读更多</button>
      </footer>
    </article>
  </div>
</template>

<script setup>
defineProps(['title', 'content', 'link'])
</script>

在父组件中使用：

<BlogPost v-for="blog in blogs" :key="blog.id" :title="blog.title" :content="blog.content" :link="blog.link"></BlogPost>

或者：

<BlogPost v-for="blog in blogs" :key="blog.id" v-bind="blog"></BlogPost>

11. Vue组件生命周期

使用onMounted()方法在组件挂载后加载数据。

onMounted(() => {
  setTimeout(() => {
    viewCount.value = 10000
  }, 1000)
})

12. 自定义信号与回调

类似于Qt中的信号系统，Vue允许自定义信号并通过事件传递数据。

例如，定义一个titleClick信号，并在点击标题时触发该信号，传递title参数。

<a :href="link" @click.prevent="$emit('titleClick', title)"> {{ title }} </a>

<!-- 在 setup 中 -->
defineEmits(['titleClick'])

在父组件中处理信号：

<BlogPost @titleClick="handleTitleClick" v-for="blog in blogs" :key="blog.id" v-bind="blog">
    <button>分享到微信</button>
</BlogPost>
function handleTitleClick(title) {
  console.log('点击了标题', title)
}

#Vue