当前位置: 首页 > news >正文

Vue.js知识总结

以下是 Vue.js 的重要知识点及代码示例:


1. 响应式数据

Vue 通过 refreactive 实现数据响应式。

<script setup>
import { ref, reactive } from 'vue';

const count = ref(0); // 基本类型用 ref
const user = reactive({ name: 'Alice', age: 25 }); // 对象用 reactive

function increment() {
  count.value++; // ref 需要 .value 访问
  user.age++;
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
  <p>{{ user.name }} - {{ user.age }}</p>
</template>

2. 模板语法

  • 插值{{ }}
  • 指令v-bind, v-model, v-if, v-for
<template>
  <!-- 绑定属性 -->
  <a :href="url">Link</a>
  
  <!-- 双向绑定 -->
  <input v-model="message">
  
  <!-- 条件渲染 -->
  <div v-if="isVisible">显示内容</div>
  
  <!-- 列表渲染 -->
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

3. 组件通信

  • Props(父传子)

    <!-- 父组件 -->
    <ChildComponent :message="parentMsg" />
    
    <!-- 子组件 -->
    <script setup>
    const props = defineProps({
      message: String
    });
    </script>
    
  • 自定义事件(子传父)

    <!-- 子组件 -->
    <button @click="$emit('update', data)">提交</button>
    
    <!-- 父组件 -->
    <ChildComponent @update="handleUpdate" />
    

4. 计算属性 & 侦听器

  • 计算属性:缓存结果,依赖变化时重新计算

    <script setup>
    import { computed } from 'vue';
    const fullName = computed(() => `${firstName} ${lastName}`);
    </script>
    
  • 侦听器:监听数据变化执行副作用

    <script setup>
    import { watch } from 'vue';
    watch(count, (newVal, oldVal) => {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    });
    </script>
    

5. 生命周期钩子

常用钩子:onMounted, onUpdated, onUnmounted(Vue 3 组合式 API)

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('组件挂载完成');
  fetchData(); // 初始化数据
});
</script>

6. Vue Router

  • 路由配置

    // router.js
    const routes = [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ];
    
  • 导航守卫

    router.beforeEach((to, from, next) => {
      if (to.meta.requiresAuth && !isLoggedIn) next('/login');
      else next();
    });
    

7. Vuex(状态管理)

  • 核心概念

    // store.js
    const store = createStore({
      state: { count: 0 },
      mutations: {
        increment(state) { state.count++; }
      },
      actions: {
        asyncIncrement({ commit }) {
          setTimeout(() => commit('increment'), 1000);
        }
      }
    });
    
  • 组件中使用

    <script setup>
    import { useStore } from 'vuex';
    const store = useStore();
    const count = computed(() => store.state.count);
    </script>
    

8. 组合式 API(Composition API)

Vue 3 的特性,替代 Options API:

<script setup>
import { ref, onMounted } from 'vue';

// 逻辑复用示例:鼠标跟踪
function useMouse() {
  const x = ref(0);
  const y = ref(0);
  onMounted(() => {
    window.addEventListener('mousemove', (e) => {
      x.value = e.clientX;
      y.value = e.clientY;
    });
  });
  return { x, y };
}

const { x, y } = useMouse();
</script>

<template>鼠标位置:{{ x }}, {{ y }}</template>

总结

以上是 Vue 的核心知识点,实际开发中还可能涉及:

  • 自定义指令
  • 过渡动画(<transition>
  • 服务端渲染(SSR)
  • 性能优化(如 v-oncekeep-alive
  • TypeScript 集成等

可以根据项目需求进一步深入!

http://www.dtcms.com/a/63787.html

相关文章:

  • Vue+Node.js+MySQL+Element-Plus实现一个账号注册与登录功能
  • 动态规划 -第1篇
  • 从青铜到王者:六大排序算法实战解析
  • Docker避坑实战:6大“诡异“问题深度拆解
  • 【GPT入门】第15课 用 prompt生成sql交互页面,创建可视化自然语言转sql生成器
  • PyTorch深度学习框架进阶学习计划 - 第20天:端到端图像生成系统
  • Lock接口与synchronized锁机制
  • 蓝桥杯备考:unordered_map基础用法题 ---学籍管理
  • 在 Ubuntu 下通过 Docker 部署 Nginx 服务器
  • 【零基础入门unity游戏开发——进阶篇】Marhf和Math的使用
  • Java基础 | Java枚举(Enum)详解:从入门到实践
  • Web Worker如何在本地使用
  • 自动化测试介绍及学习路线
  • 《领导力21法则》第七章「尊重法则」笔记
  • 商业智能BI的未来,如何看待AI+BI这种模式?
  • 香港电商市场迅猛发展,多用户商城系统软件厂商如何抓住机遇
  • LeetCode 1447 最简分数
  • Ubuntu20.04安装Nvidia显卡驱动教程
  • Spring 事务
  • c#面试题整理9
  • Java Lambda表达式:现代编程的简洁之道
  • 文档解析:如何避免deepseek的大模型幻觉?
  • llm数据存储基础设施
  • 软考高级信息系统项目管理师笔记-第22章组织通用治理
  • 19、Vue项⽬常⻅优化点
  • 使用Java爬虫根据关键词获取衣联网商品列表:实战指南
  • pytorch retain_grad vs requires_grad
  • Python 融于ASP框架
  • snmp开发
  • C++内存模型和原子操作_第五章_《C++并发编程实战》笔记