模版語法 - daniel-qa/Vue GitHub Wiki

模版語法

在 Vue.js 中，模板语法（Template Syntax）是一种用于在 Vue 组件中声明和呈现 HTML 的方式。这里有一个简单的 Vue.js “Hello World” 示例，展示了基本的模板语法。

  • 基本的 “Hello World” 示例

首先，确保你有一个 xVue 环境。如果你还没有设置 Vue 环境，可以使用 Vue CLI 创建一个新项目，或者直接在 HTML 文件中通过 CDN 引入 Vue.js。

  • 1 . 使用 CDN 的基本 HTML 示例

在你的 HTML 文件中，你可以直接引入 Vue.js，并定义一个简单的 Vue 实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Hello World</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- Vue 模板语法 -->
        <p>{{ message }}</p>
    </div>

    <script>
        // 创建 Vue 实例
        new Vue({
            el: '#app',
            data: {
                message: 'Hello World!'
            }
        });
    </script>
</body>
</html>
  • 2. 使用 Vue CLI 创建的项目

如果你使用 Vue CLI 创建了一个新项目，Vue 的基本模板语法已经被集成在项目的结构中。在 src/App.vue 文件中，你可以看到类似以下的代码：

html

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello World!'
    };
  }
};
</script>

<style>
/* 你的样式 */
</style>
  • 解释

{{ message }} 是 Vue 的插值语法，用于在 HTML 中插入 Vue 实例的 data 对象中的 message 属性值。

new Vue({...}) 或 <script> 部分中的代码定义了一个 Vue 实例，它包含了一个 data 对象，其中的 message 是我们在模板中使用的变量。

在 Vue CLI 项目中，< template > 标签包含了 HTML 模板，<script> 标签中定义了组件的逻辑和数据，<style> 标签用于添加样式。

⚠️ **GitHub.com Fallback** ⚠️