极客教程Vue.js 声明性渲染
在 Vue.js 中，有一个系统存在于核心中，它使我们能够使用简单、直观的模板语法将数据以声明性方式呈现到 DOM 中。
语法:
HTML:
<div id="app">
{{ message }}
</div>
JS:
var app = new Vue({
el: '#app',
data: {
message: '这是一个简单的 Vue.js 声明性渲染示例！'
}
})
我们知道 Vue.js 可以扩展 HTML 应用。为了给 HTML 应用提供功能，Vue.js 提供了 HTML 属性指令：内置指令和自定义指令。Vue.js 使用双括号 {{ }} 作为数据的占位符，Vue.js 指令是 HTML 属性，需要用 v- 前缀。
让我们看一个简单的声明性渲染示例，它使用文本插值。
示例1:
Index.html 文件:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="index.js"></script>
</body>
</html>
Index.js 文件:
var app = new Vue({
el: '#app',
data: {
message: '这是一个简单的 Vue.js 声明性渲染示例！'
}
});
输出:
这是一个简单的 Vue.js 声明性渲染示例！
以上示例类似于渲染字符串模板，就像我们在第一个 Vue.js 示例中所做的那样。现在，数据和 DOM 已连接，一切都是响应式的。您可以在浏览器的 JavaScript 控制台上进行检查。将 app.message 设置为其他值，您将看到上面呈现的示例会相应地更新。
现在，我们不再需要直接与 HTML 交互。Vue 应用程序附加到单个 DOM 元素并完全控制它。在以上示例中，它是 #app。现在，HTML 只是入口点，使用新创建的 Vue 实例内发生的一切。
让我们看一个示例，其中应用元素属性的绑定。
示例2:
Index.html 文件:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
移动鼠标几秒钟，并查看我设置的动态绑定标题！
</span>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js 文件:
var app2 = new Vue({
el: '#app-2',
data: {
message: '你在 ' + new Date().toLocaleString() + ' 加载了这个页面！'
}
})
输出:
移动鼠标几秒钟，并查看我设置的动态绑定标题！
在上面的示例中，您看到的新 v-bind 属性称为指令。指令使用前缀 v-，指示它们是由 Vue 提供的唯一属性，并将一种特殊的响应式行为应用于呈现的 DOM。