Vue.js 基本语法

Vue.js 是一个渐进式 JavaScript 框架，它的基本语法非常易于扩展和学习。Vue 的核心机制围绕着 声明式模板语法 和 响应式数据绑定。以下是 Vue 的一些基本语法知识，适用于快速上手 Vue.js 开发。

1. Vue 模板语法

Vue 模板语法基于 HTML，在模板中使用特殊的语法来将数据动态绑定到 DOM 上。

1.1 插值表达式（文本绑定）

使用双大括号 { { ... }} 可以绑定 JavaScript 表达式的数据到模板中。

HTML

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

<script>
const { createApp } = Vue;

createApp({
  data() {
    return {
      message: "Hello, Vue.js!"
    };
  }
}).mount("#app");
</script>

输出：

HTML

<p>Hello, Vue.js!</p>

1.2 使用指令

Vue 提供了一些特殊的 指令，以字母 v- 开头，用来在模板中给元素添加功能。

常见指令：

• 绑定属性： 使用 v-bind 或其缩写 : 动态绑定 HTML 属性。

  HTML

  <a v-bind:href="https://blog.csdn.net/url">Go to Website</a>
  <!-- 等效于 -->
  <a :href="https://blog.csdn.net/url">Go to Website</a>

  对应的数据：

  JavaScript

  data() {
    return {
      url: "https:/