Vue基础

Vue基础

1、什么是vue

Vue (发音为 /vjuː/，类似 view)是一款用于构建用户界面的JavaScript框架。它基于标准 HTML、CSS 和JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue都可以胜任。
Vue 的两个核心功能：

• 声明式渲染：Vue 基于标准HTML拓展了一套模板语法，使得我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系。

• 响应性：Vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。

  2、vue指令

  

  3、请简述 {{}} ， v-text ，t-html ，v-model 的区别

  这些是 Vue.js 中的指令，用于在模板中控制 DOM 的行为和数据绑定。

  （1）{{}}

  {{}} 用于文本插值，将 Vue 实例的数据绑定到 HTML 元素的内容中。
  示例：<div>{{ message }}</div>

  （2）v-text

  v-text 用于更新元素的 textContent。
  示例：<div v-text="message"></div>

  （3）v-html

  v-html 用于更新元素的 innerHTML。
  注意：使用 v-html 时要小心，因为它可以很容易地导致跨站脚本攻击 (XSS)。确保你完全信任源数据，并对其进行了适当的清理和转义。
  示例：<div v-html="message"></div>

  （4）v-model

  v-model 用于创建双向数据绑定，它是 input、textarea 和 select 元素的语法糖。
  示例：<input v-model="message">
  简单来说：
  {{}}和v-text用于显示数据。
  v-html用于插入 HTML。
  v-model用于创建双向数据绑定。

  4、缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>