Vue.js 声明式渲染

在 Vue.js 中，核心有一个系统，使我们能够使用简单、直接的模板语法将数据声明式地渲染到 DOM。

语法

HTML

JS

我们知道 Vue.js 便于我们使用称为指令的HTML 扩展 HTML 属性，这些指令用于为 HTML 应用程序提供功能。

Vue.js 中有两种类型的指令：内置指令和用户定义的指令。 Vue.js 使用双大括号 {{ }} 作为数据的占位符，Vue.js 指令是使用 v- 前缀的 HTML 属性。

让我们看一个使用文本插值的简单声明式渲染示例。

示例 1

Index.html 文件

Index.js 文件

输出

这是一个简单的 Vue.js 声明式渲染示例！

上面的示例类似于渲染字符串模板，正如我们已经在第一个 Vue.js 示例中所做的那样。 现在，数据和 DOM 已链接，并且一切都具有反应性。 您可以在浏览器的 JavaScript 控制台上检查它。 将 app.message 设置为不同的值，您将看到上面渲染的示例相应地更新。

现在，我们不再需要直接与 HTML 交互。 Vue 应用程序将其自身附加到单个 DOM 元素并完全控制它。 在上面的示例中，它是 #app。 现在，HTML 只是入口点，其他一切都发生在新建的 Vue 实例中。

让我们看一个部署元素属性绑定的示例。

示例 2

Index.html 文件

Index.js 文件

输出

将鼠标悬停在我身上几秒钟，看看我设置的动态绑定标题！

在上面的示例中，您看到的新 v-bind 属性称为指令。 指令与前缀 v- 一起使用，以指示它们是 Vue 提供的唯一属性，它们用于将特殊的响应式行为应用于渲染的 DOM。