【vue】03.vue基础概念（模板语法、数据绑定、vue指令）

一.模板语法

官网上说：

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

用人话说就是：

Vue 中的模板语法就是用来告诉 Vue 如何将数据展示在网页上的规则。模板语法主要包括以下三种：

<div>我最喜欢{
   
   { food }}了</div>

<p v-if="seen">现在你看到我了</p>

<form @submit.prevent="onSubmit">...</form>

这些指令和插值让网页能够根据数据的变化自动更新，而不用手动修改 HTML。

Vue 提供了多种数据绑定的方式，允许将 Vue 实例中的数据渲染到页面上，并根据数据的变化自动更新视图。以下是常见的几种方式。

文本绑定：是vue最基本的数据绑定形式，使用 { { }} 插值来绑定文本内容。当数据对象中的属性值发生变化时，插值表达式的内容会自动更新。
```
<span>Message: {
     
     { news }}</span>
```
属性绑定：使用 v-bind 指令（或简写为 :）来绑定元素的属性。例如，当 imageSrc 的值改变时，<img> 元素的 src 属性也会更新。
```
<img :src="imageSrc" alt="Vue logo">
```
HTML 绑定：使用 v-html 指令来输出真正的 HTML。这里的rawHtml 的值会被渲染为实际的 HTML 元素，而不是纯文本。慎用。
```
<div v-html="rawHtml"></div>

// js
data() {
  return {
    rawHtml: '<span style="color: red;">This is red text.</span>'
  }
}
```

类绑定：使用 v-bind:class（或简写为 :class）来动态绑定类名。

<div :class="{ active: isActive }"></div>
// js
data() {
  return {
    isActive: true,
    hasError: false
  }
}

样式绑定：使用 v-bind:style（或简写为 :style）来动态绑定样式。

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

// js
data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

事件绑定：使用 v-on 指令（或简写为 @）来监听 DOM 事件。

<button @click="increment">增加</button>
// 点击该按钮的时候执行increment() 

// js
methods: {
  increment() {
    // 执行一些操作
  }
}

双向数据绑定：使用 v-model 指令在表单元素上创建双向数据绑定。它自动处理用户输入事件，并根据事件更新数据。也就是当用户在 <input> 中输入文本时，message 的值会自动更新，反之亦然，常用于表单处理。
```
<input v-model="message">

data() {
  return {
    message: ''
  }
}
```

这里需要记住两个常用的简写，v-bind简写为：， v-on 简写为@ 。

	v-bind	v-model	v-on
用途	单向数据绑定，即从数据模型到 DOM 的绑定。它可以绑定 DOM 元素的任何属性，如 `src`、`href`、`title`、`class`、`style` 等。	双向数据绑定，主要用于表单输入元素（如 `<input>`、`<select>、<textarea>` 等）。它自动处理输入字段的值与数据模型之间的同步。	用于监听 DOM 事件
行为	当数据模型中的值发生变化时，`v-bind` 会更新绑定的 DOM 属性	当用户输入数据时，`v-model` 会更新数据模型；同时，当数据模型更新时，绑定的表单输入元素的值也会更新。
简写	：		@
例子	`<img :src="imageSrc" alt="Image"> <div :class="{ active: isActive }"></div>`	`<input v-model="message" placeholder="edit me"> <p>Message is: { { message }}</p>`	`<!-- 当点击按钮时，调用 increment 方法 --> <button @click="increment">增加</button>`