Vuejs教程-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，这些属性称为指令，用于为 HTML 应用程序提供功能。
Vue.js 有两种类型的指令：内置指令和用户自定义指令。Vue.js 使用双大括号 {{ }} 作为数据的占位符，而 Vue.js 指令则是带有 v- 前缀的 HTML 属性。
让我们来看一个简单的声明式渲染示例，它使用文本插值。
示例 1:
Index.html 文件:
<!DOCTYPE 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 文件:
<!DOCTYPE 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 属性称为指令。指令用于在 Vue 中应用特殊的响应式行为，它们是带有 v- 前缀的唯一属性，由 Vue 提供。
