Vue.js 渲染
Vue.js 渲染
在Vue.js中，核心系统中的一个系统使我们能够使用简单明了的模板语法将数据声明式呈现到DOM。
语法:
HTML:
<div id="app">
{{ message }}
</div>
JS:
var app = new Vue({
el: '#app',
data: {
message: 'This is a simple Vue.js Declarative Rendering example!'
}
})
众所周知，Vue.js有助于我们使用称为指令的HTML属性扩展HTML，这些指令用于为HTML应用程序提供功能。
Vue.js中有两种类型的指令：内置指令和用户定义的指令。Vue.js使用大括号{{}}作为数据的占位符，而Vue.js指令是使用v前缀的HTML属性。
让我们看一个使用文本插值的简单声明式渲染示例。
让我们看一个使用文本插值的简单声明式渲染示例。
示例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: 'This is a simple Vue.js Declarative Rendering example!'
}
});
输出:
这是一个简单的Vue.js声明式渲染示例!
上面的示例类似于呈现字符串模板，就像我们在第一个Vue.js示例中所做的那样。现在，数据和DOM已链接在一起，并且所有内容现在都是反应性的。您可以在浏览器的
JavaScript 控制台上进行检查。将app.message设置为其他值，您将看到上面渲染的示例进行相应的更新。
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">
Hover mouse over me for a few seconds
and see a dynamically bound title which I have set!
</span>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
输出:
将鼠标悬停在我上方几秒钟，然后看到我设置的动态绑定标题!
在上面的示例中，您看到的新v-bind属性称为指令。指令与前缀v-一起使用，以指示它们是Vue提供的唯一属性，并用于对呈现的DOM施加特殊的反应性行为。