Vue.js 初学者基础知识点总结 第一弹

一、Vue 的核心思想

声明式渲染

• 命令式 ：你需要详细地描述"如何做"（例如，用 JavaScript 直接操作 DOM：document.getElementById('app').innerText = 'Hello'）。

• 声明式 ：你只需要告诉 Vue "你想要什么结果"（例如，在模板中写 {``{ message }}），Vue 会自动帮你完成 DOM 操作。这大大简化了代码。

数据驱动

Vue 的核心是数据与视图的绑定。当数据发生变化时，视图会自动更新。你不再需要手动操作 DOM，只需要关心如何改变数据。

组件化

将页面拆分成一个个独立、可复用的组件。每个组件都有自己的 HTML 结构、CSS 样式和 JavaScript 逻辑。像搭积木一样构建应用。

二、搭建一个 Vue 应用

快速引入

对于初学者或小型项目，可以直接通过 <script> 标签引入 Vue。

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

创建应用实例

每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例开始的。

const { createApp } = Vue;

const app = createApp({
  // 这里是该组件的选项
});

挂载

应用实例必须被"挂载"到一个 DOM 元素上，它才会生效。

app.mount('#app');

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

三、模板语法

Vue 基于标准 HTML 扩展了一套模板语法，让你能够声明式地将组件实例的数据绑定到呈现的 DOM 上。

文本插值

使用"Mustache"语法（双大括号）将数据渲染为纯文本。

<span>Message: {{ msg }}</span>

双大括号标签会被对应数据对象的 msg 属性的值替换。

原始 HTML

双大括号会将数据解释为纯文本。为了输出真正的 HTML，你需要使用 v-html 指令。

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

属性绑定

Mustache 语法不能在 HTML 属性中使用。应使用 v-bind 指令。

<div v-bind:id="dynamicId"></div>

条件渲染

• v-if：根据条件的真假，来真正渲染或销毁元素/组件。
• v-else：必须紧跟在 v-if 或 v-else-if 后面。
• v-else-if：充当 v-if 的"else-if 块"。
• v-show：通过 CSS 的 display 属性来控制显示/隐藏。元素始终会被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

<h1 v-show="ok">Hello!</h1>

列表渲染

使用 v-for 指令基于一个数组或对象来渲染一个列表。

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

• 重要 ：始终为每个项提供一个唯一的 key 属性，以便 Vue 能够跟踪每个节点的身份，从而重用和重新排序现有元素。

• 事件处理 ：使用 v-on 指令监听 DOM 事件。

通常，事件逻辑会比较复杂，所以我们会把它放到组件的 methods 中。

const app = createApp({
  data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    greet(event) {
      alert(`Hello ${this.name}!`)
      // `event` 是原生 DOM event 对象
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

<button @click="greet">Greet</button>

表单输入绑定

使用 v-model 指令在表单输入元素和组件数据之间创建双向数据绑定。

• <input type="text"> 和 <textarea> 使用 value 属性和 input 事件。
• <input type="checkbox"> 和 <input type="radio"> 使用 checked 属性和 change 事件。
• <select> 使用 value 属性和 change 事件。

<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>