初学者入门 Vue：构建一个简单的计数器应用

1. 引言

Vue 是一款流行的前端 JavaScript 框架，它可以帮助我们构建交互性强、响应式的网页应用程序。在本文中，我将带你逐步学习如何创建一个简单的计数器应用，并解释其中涉及的关键知识点。

Vue.js 是一个用于构建用户界面的渐进式框架。它与其他大型框架（如 React 和 Angular）相比更易于上手，适合初学者入门。在本文中，我们将使用 Vue 3 来构建一个简单的计数器应用。

2. 准备工作

在开始之前，我们需要引入 Vue.js。你可以在 HTML 文档中使用 <script> 标签引入 Vue.js，也可以使用像 npm 或者 yarn 这样的包管理工具进行安装。在本例中，我们将使用 CDN 引入 Vue.js。

html 复制代码

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

3. 创建一个 Vue 应用

首先，我们需要创建一个容器元素，用于挂载我们的 Vue 应用。

html 复制代码

<div id="app"></div>

4. 编写模板

接下来，我们需要编写一个模板，用于定义应用的外观和交互，此处有俩种方法，我们着重讲方法二。

html 复制代码

   <!-- 第一种方式 -->
    <!-- type="x-template"可以得到html提示，其内容为字符串 -->
    <script type="x-template" id="my-app">
        <div>
            <h2>{{title}}</h2>
            <h2>{{count}}</h2>
            <button @click="add">+1</button>
            <button @click="minus">-1</button>
        </div>
    </script>

html 复制代码

    <!-- 第二种方式 -->
    <template id="my-app">
        <div>
            <h2>{{title}}</h2>
            <h2>{{count}}</h2>
            <button @click="add">+1</button>
            <button @click="minus">-1</button>
        </div>
    </template>

方法二详解

在 Vue.js 中，<template> 标签用于定义组件的模板，即组件的结构和内容。它允许你编写包含 HTML、插值表达式、指令等的代码，来描述组件的外观和交互。<template> 标签内部的内容不会直接显示在页面上，而是作为组件的模板进行处理。Vue.js 会将模板编译成真实的 DOM 元素，并将其渲染到指定的位置。

在例子中，<template id="my-app"> 定义了一个名为 "my-app" 的模板，其中包含了标题、计数器和按钮。这个模板可以被 Vue 应用实例引用，并挂载到指定的容器元素上。其次，我们定义了一个标题和一个计数器，以及一个按钮用于增加计数器的值。{{ title }} 和 {{ count }} 是 Vue 中的插值表达式，用于显示数据。@click 是一个指令，用于监听按钮的点击事件。

两种方法区别

这两种方式都可以定义一个 Vue 的模板。区别在于第一种的模板定义在 <script> 标签内，而第二种的模板定义在 <template> 标签内。

第一种方式的模板定义需要添加 type="x-template" 属性，这样浏览器会将其识别为模板，以便在 Vue 实例中使用。因为该模板定义在 <script> 标签内，所以其内容不会在页面上直接渲染，也不会被搜索引擎抓取到。

第二种方式的模板定义在 <template> 标签内，不需要额外添加属性。该模板的内容也不会在页面上直接渲染，只有当该模板被 Vue 应用实例引用时才会进行渲染。

总的来说，第二种方式更符合 HTML5 规范，更容易理解和使用。并且不需要添加额外的属性，代码更简洁。

5. 创建 Vue 应用实例

现在，我们可以创建一个 Vue 应用实例，并将模板挂载到之前创建的容器元素上。

html 复制代码

<script>
Vue.createApp({
            template: '#my-app',
            data() {
                return {
                    title:'你好世界',
                    count:1
                }
            },
            methods:{
            add(){
                this.count++
            },
            minus(){
                this.count--
            }
            }
        }).mount('#app')
</script>

在这段代码中，我们使用 Vue.createApp 创建了一个 Vue 应用实例，并将模板和数据以及方法绑定到该实例上。data 属性用于定义应用的数据，methods 属性用于定义应用的方法。

6. 运行应用

现在，我们已经完成了一个简单的 Vue 应用。你可以在浏览器中打开这个 HTML 文件，就能看到一个包含计数器的页面，点击按钮可以增加计数器的值。

以下是源码：

JavaScript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <vid id="app"></vid>
    <!-- 第一种方式 -->
    <!-- type="x-template"可以得到html提示，其内容为字符串 -->
    <!-- <script type="x-template" id="my-app">
        <div>
            <h2>{{title}}</h2>
            <h2>{{count}}</h2>
            <button @click="add">+1</button>
            <button @click="minus">-1</button>
        </div>
    </script> -->

    <!-- 第二种方式 -->
    <template id="my-app">
        <div>
            <h2>{{title}}</h2>
            <h2>{{count}}</h2>
            <button @click="add">+1</button>
            <button @click="minus">-1</button>
        </div>
    </template>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        Vue.createApp({
            template: '#my-app',
            data() {
                return {
                    title:'你好世界',
                    count:1
                }
            },
            methods:{
            add(){
                this.count++
            },
            minus(){
                this.count--
            }
            }
        }).mount('#app')
    </script>
</body>
</html>

运行结果：

7. 总结

通过这个简单的例子，我们初步学习了 Vue.js 的基本用法。希望这篇文章对你有所帮助，让你更快地掌握 Vue.js 的基础知识。