Vue 3 基础教程：快速掌握核心概念（四）

admin
Vue.js
10小时前
4热度
0评论

Vue.js 是一个渐进式 JavaScript 框架，以其轻量级和易用性著称，广泛应用于构建用户界面。本文将详细介绍 Vue 3 的基础语法和核心概念，帮助你快速上手 Vue 3 开发。

一、创建 Vue 实例

在开始使用 Vue 3 之前，首先需要创建一个 Vue 实例。Vue 实例是整个应用的入口点，负责管理应用的数据和行为。

示例

<div id="app" class="demo">
  {{ message }}
</div>

<script>
  const app = {
    data() {
      return {
        message: 'Hello Vue 3!'
      }
    }
  };

  const vueApp = Vue.createApp(app);
  vueApp.mount('#app');
</script>

解析

HTML 部分：
- <div id="app" class="demo">：这是一个普通的 <div> 元素，Vue 实例将管理这个元素及其内部的所有内容。
- {{ message }}：这是 Vue 的模板语法，用于将 message 数据绑定到页面上。当 message 发生变化时，页面内容会自动更新。
JavaScript 部分：
- data() 方法返回一个对象，包含组件的初始数据。在这个例子中，message 的初始值是 'Hello Vue 3!'。
- Vue.createApp(app) 创建一个新的 Vue 应用实例，参数是一个包含组件选项的对象。
- vueApp.mount('#app') 将 Vue 应用实例挂载到页面中具有 id="app" 的 DOM 元素上。

执行过程

浏览器加载 HTML 和 JavaScript。
Vue 脚本执行时，创建一个 Vue 应用实例，并将其绑定到 <div id="app"> 元素上。
Vue 应用实例根据 data() 中的初始数据，将 message 的值渲染到页面上的 {{ message }} 处。
当 message 数据发生变化时，页面会自动更新以反映这些变化。

二、模板语法

Vue 3 的模板语法允许你在 HTML 中嵌入动态内容和逻辑。以下是几种常见的模板语法和指令。

插值

插值是最简单的模板语法，使用双大括号 {{ }} 来表示文本插值。


<div>
  {{ message }}
</div>

指令

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

v-bind

v-bind 用于动态绑定一个或多个属性，或一个组件 prop。

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

简写形式：

<a :href="url">链接</a>

v-if / v-else-if / v-else

v-if 用于条件渲染，根据表达式的值来决定是否渲染元素。

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

v-for

v-for 用于列表渲染，根据数组或对象的属性值来循环渲染元素。


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

v-model

v-model 用于双向数据绑定，使表单元素的值与数据模型保持同步。

<input v-model="message" placeholder="编辑我">
<p>消息是：{{ message }}</p>

v-on

v-on 用于绑定事件监听器，使其能够在触发时执行方法。

<button v-on:click="doSomething">点击我</button>

简写形式：

<button @click="doSomething">点击我</button>

三、事件处理

Vue 3 提供了 v-on 指令来监听 DOM 事件，并在事件触发时执行方法。

示例

<div id="app">
  <button @click="greet">打招呼</button>
</div>

<script>
  const app = {
    methods: {
      greet() {
        alert('你好！');
      }
    }
  };

  const vueApp = Vue.createApp(app);
  vueApp.mount('#app');
</script>

解析

@click="greet"：监听按钮的点击事件，当点击时调用 greet 方法。
greet 方法在 methods 对象中定义，当调用时会弹出一个警告框显示“你好！”。

四、计算属性

计算属性是基于其依赖进行缓存的属性，只有在其相关依赖发生变化时才会重新计算。

示例

<div id="app">

<p>{{ reversedMessage }}</p>
</div>

<script>
  const app = {
    data() {
      return {
        message: '你好'
      };
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  };

  const vueApp = Vue.createApp(app);
  vueApp.mount('#app');
</script>

解析

reversedMessage 是一个计算属性，基于 message 计算出反转后的字符串。
当 message 发生变化时，reversedMessage 会自动重新计算，页面内容也会相应更新。

五、组件

组件是 Vue 3 最强大的功能之一，允许你使用小型、独立和可复用的组件构建大型应用。

示例

<div id="app">
  <my-component></my-component>
</div>

<script>

  const app = Vue.createApp({});

  app.component('my-component', {
    template: '
<div>自定义组件！</div>'
  });

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

解析

app.component('my-component', {...})：注册一个名为 my-component 的全局组件。
<my-component></my-component>：在模板中使用该组件。

六、Props 和事件

Props

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

示例

<div id="app">
  <blog-post title="我的 Vue 之旅"></blog-post>
</div>

<script>
  const app = Vue.createApp({});

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

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

解析

props: ['title']：定义组件接收的属性。
{{ title }}：在模板中使用传递的属性。

事件

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

示例

<div id="app">
  <button-counter @increment="incrementTotal"></button-counter>

<p>总点击次数：{{ total }}</p>
</div>

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

  app.component('button-counter', {
    template: '<button @click="increment">你点击了 {{ count }} 次。</button>',
    data() {
      return {
        count: 0
      };
    },
    methods: {
      increment() {
        this.count++;
        this.$emit('increment');
      }
    }
  });

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

解析

@increment="incrementTotal"：父组件监听子组件触发的 increment 事件。
this.$emit('increment')：子组件通过 $emit 触发 increment 事件。

总结

通过本文，我们详细介绍了 Vue 3 的基础语法和核心概念，包括创建 Vue 实例、模板语法、事件处理、计算属性和组件等。希望这些内容能帮助你快速上手 Vue 3 开发，构建高效、响应式的用户界面。如果你有任何疑问或建议，欢迎在评论区留言交流。