“【Vue魔法日记】解密前端新视界：逐篇揭秘，让你的代码舞动起来的Vue技术博客之旅“

本文链接：https://blog.csdn.net/qq_73870138/article/details/135361948

引言

在Web开发领域，Vue.js以其简洁明快的设计哲学、高效的响应式系统和丰富的生态系统赢得了众多开发者的心。本文将分享我在学习Vue.js过程中的心得体会与关键知识点总结，希望对正在或即将踏上Vue.js学习之旅的你有所裨益。vue.js是一款渐进式JavaScript框架，专注于视图层。它易学易用，采用组件化开发模式，通过MVVM（Model-View-ViewModel）设计模式使得数据和视图能够实时同步，极大地提升了开发效率。

一：基础知识掌握

1.基础语法：Vue的核心是模板语法，包括插值表达式{{ }}、指令如v-bind/v-on（简写为: 和@）、v-if/v-else/v-show条件渲染以及v-for循环等

一：基础知识掌握

1.基础语法：Vue的核心是模板语法，包括插值表达式{{ }}、指令如v-bind/v-on（简写为: 和@）、v-if/v-else/v-show条件渲染以及v-for循环等

插值表达式：

 <!-- 插值表达式 -->
  <p>欢迎 {{ username }}！</p>

v-bind指令：

<!-- v-bind指令（简写为:） -->
  <img :src="userAvatar" alt="用户头像">

v-on指令（简写为@）：

  <!-- v-on指令（简写为@） -->
  <button @click="handleClick">点击我</button>

v-if/v-else条件渲染：

<!-- v-if/v-else条件渲染 -->
  <div v-if="isLoggedIn">
    <p>已登录用户界面</p>
  </div>
  <div v-else>
    <p>未登录用户界面</p>
  </div>

v-show显示：

  <!-- v-show条件显示 -->
  <p v-show="isHiddenMessage">这是一个隐藏消息，条件满足时可见</p>

v-for循环：

 <!-- v-for循环 -->
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.name }}
    </li>
  </ul>

2.数据绑定与双向绑定实例：

Vue的数据双向绑定机制基于依赖追踪和发布订阅模式，实现了数据变化驱动视图更新，反之亦然。

如下图：

3.组件化开发实例：

Vue应用主要由各种组件构成，每个组件拥有独立的作用域和生命周期方法，通过props向下传递数据，使用自定义事件进行组件间通信

如下列示例代码

父组件：

<template>
  <div>
    <child-component :parent-msg="parentMessage" @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '来自父组件的消息'
    };
  },
  methods: {
    handleCustomEvent(receivedMsg) {
      console.log('父组件收到子组件发出的事件:', receivedMsg);
    }
  }
};
</script>

子组件：

<template>
  <div>
    <p>从父组件接收的消息是：{{ parentMsg }}</p>
    <button @click="emitCustomEvent">向父组件发送事件</button>
  </div>
</template>

<script>
export default {
  props: {
    parentMsg: String
  },
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event', '这是子组件传递给父组件的数据');
    }
  }
};
</script>

在以上组件化开发示例中，父组件通过props向下传递parentMessage到子组件，并监听子组件触发的自定义事件custom-event；而子组件则通过props接收并展示数据，并在按钮点击时向上抛出事件

二：路由管理 - Vue Router

Vue Router为Vue应用提供了强大的路由功能，支持嵌套路由、动态路由匹配、路由守卫等功能，使单页应用（SPA）的页面切换更为流畅和灵活。

首先，要使用路由，得先在项目中下载路由的插件，常见的命令行如下：

npm install vue-router

然后创建router.js文件来配置路由：

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home, alias: '/home' },
  { path: '/about', component: About },
];

export default new VueRouter({
  mode: 'history',
  routes,
});

在主应用入口文件中引入并挂载路由：

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

创建对应的组件文件，例如Home.vue和About.vue：

<!-- components/Home.vue -->
<template>
  <div class="home">
    <h1>首页</h1>
    <p>欢迎来到首页！</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

<!-- components/About.vue -->
<template>
  <div class="about">
    <h1>About</h1>
    <p>This is About Page</p>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

最后，在App.vue或者其他需要进行导航的地方使用 <router-link> 和 <router-view> 组件：

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

如下图：

三：常见的vue指令：

npm常用命令行：

           npm install：安装项目所需要的全部依赖包，需要配置package.json文件。

           npm uninstall：卸载指定名称的包。

           npm install 包名：安装指定名称的包。

           npm update：更新指定名称的包。

           npm run serve：项目启动。

           npm run build：项目构建。

           npm config get registry  ：查看当前npm下载包使用的是哪一个源。

           cmd命令行输入指令安装淘宝镜像:

           npm install -g cnpm --registry=https://registry.npm.taobao.org