Vue3 入门指南

🔥今天我们来聊聊Vue3这个当下最热门的前端框架之一。

为什么选择Vue3？

Vue.js 是一个渐进式JavaScript框架，它的设计理念让开发者能够轻松构建现代化的用户界面。不同于其他框架的"一刀切"方式，Vue允许你根据项目需求灵活地采用不同级别的功能。

Vue3相较于Vue2带来了诸多改进：

更快的渲染速度
更小的包体积
更友好的TypeScript支持
更灵活的Composition API

单文件组件：Vue的核心概念

Vue的单文件组件(Single File Component, SFC)是Vue开发中的一大特色。它将HTML模板、JavaScript逻辑和CSS样式封装在一个.vue后缀的文件中，大大提高了代码的可维护性和复用性

xml 复制代码

<!-- 示例：一个典型的Vue单文件组件结构 -->
<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

快速上手Vue3

1. 创建 Vue 实例

创建 Vue 实例是开始使用 Vue.js 的第一步，通常你会在一个 HTML 文件中创建一个 Vue 实例并将其挂载到一个 DOM 元素上。

实例

xml 复制代码

<div id="hello-vue" class="demo">  
  {{ message }}  
</div>  
  
<script>  
const HelloVueApp = {  
  data() {  
    return {  
      message: 'Hello Vue!!'  
    }  
  }  
}  
  
Vue.createApp(HelloVueApp).mount('#hello-vue')  
</script>

尝试一下 >>

HTML 部分说明：

<div id="hello-vue" class="demo"> :

这是一个 <div> 元素，它具有 id 为 hello-vue 和 class 为 demo。
在 Vue 应用中，这个 <div> 将会被 Vue 实例管理，并且会在数据发生变化时更新内容。

{{ message }} :

这是 Vue.js 的模板语法，用于将 Vue 实例中的 message 数据绑定到页面上。
当 Vue 实例中的 message 数据变化时，页面上的内容也会随之更新。

JavaScript 部分说明：

Vue 实例定义:

javascript 复制代码

const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

HelloVueApp 是一个普通的 JavaScript 对象，包含了 Vue 组件选项。
data() 方法返回一个包含 message 属性的对象，这个属性的初始值是 'Hello Vue!!'。

创建并挂载 Vue 应用:

Vue.createApp() 方法用于创建一个 Vue 应用实例，参数是一个包含组件选项的对象（这里是 HelloVueApp）。
.mount('#hello-vue') 方法将 Vue 应用实例挂载到页面中具有 id="hello-vue" 的 DOM 元素上。

执行过程

页面加载时，浏览器解析 HTML 和 JavaScript。
Vue.js 脚本执行时，创建了一个 Vue 应用实例，并将其绑定到 <div id="hello-vue"> 元素上。
Vue 应用实例根据 data() 中的初始数据，将 message 的值渲染到页面上的 {{ message }} 处。
当 message 数据发生变化时（例如通过用户交互或异步操作），页面会自动更新以反映这些变化。

2. 模板语法精要

Vue的模板语法既直观又强大：

插值

Vue.js 使用双大括号 {{ }} 来表示文本插值：

实例

指令

指令是带有前缀 v- 的特殊属性，用于在模板中表达逻辑。

v-bind: 动态绑定一个或多个特性，或一个组件 prop。

ini 复制代码

<a v-bind:href="url">Link</a>

简写：

ruby 复制代码

<a :href="url">Link</a>

v-if / v-else-if / v-else: 条件渲染。

xml 复制代码

<p v-if="visible">内容可见</p>
<p v-else>内容不可见</p>

v-for: 列表渲染。

css 复制代码

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

v-model: 双向数据绑定。

xml 复制代码

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-on: 事件监听器。

ini 复制代码

<button v-on:click="doSomething">Click me</button>

简写：

ini 复制代码

<button @click="doSomething">Click me</button>

3. 事件处理实战

在 Vue.js 中，你可以使用 v-on 指令来监听 DOM 事件，并在触发时执行一些 JavaScript 代码。

xml 复制代码

<button @click="sayHello">点击问候</button>

<script>
methods: {
  sayHello() {
    alert('你好，Vue3!')
  }
}
</script>

4. 计算属性的妙用

计算属性会自动缓存结果，只有依赖变化时才会重新计算：

xml 复制代码

<div id="app">
  <p>{{ reversedMessage }}</p>
</div>

<script>
  createApp({
    data() {
      return {
        message: 'Hello'
      };
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  }).mount('#app');
</script>

组件化开发

组件是Vue最强大的特性之一，让我们看看如何创建和使用组件：

arduino 复制代码

// 全局注册组件
const app = Vue.createApp({})

app.component('my-button', {
  template: '<button>自定义按钮</button>'
})

app.mount('#app')

xml 复制代码

<!-- 使用组件 -->
<div id="app">
  <my-button></my-button>
</div>

Props 和事件

Props

Props 用于在组件之间传递数据。

xml 复制代码

<div id="app">
  <blog-post title="My journey with Vue"></blog-post>
</div>

<script>
  const app = createApp({
    data() {
      return {};
    }
  });

  app.component('blog-post', {
    props: ['title'],
    template: '<h3>{{ title }}</h3>'
  });

  app.mount('#app');
</script>

事件

子组件通过 $emit 触发事件，父组件可以监听这些事件。

xml 复制代码

<div id="app">
  <button-counter @increment="incrementTotal"></button-counter>
  <p>Total clicks: {{ total }}</p>
</div>

<script>
  const app = createApp({
    data() {
      return {
        total: 0
      };
    },
    methods: {
      incrementTotal() {
        this.total++;
      }
    }
  });

  app.component('button-counter', {
    template: '<button @click="increment">You clicked me {{ count }} times.</button>',
    data() {
      return {
        count: 0
      };
    },
    methods: {
      increment() {
        this.count++;
        this.$emit('increment');
      }
    }
  });

  app.mount('#app');
</script>

为什么Vue3值得学习？

性能提升：比Vue2快2倍
Tree-shaking支持：更小的打包体积
Composition API：更好的逻辑复用
更好的TypeScript支持：类型推断更完善
更灵活的响应式系统：基于Proxy实现