vue.js 声明式渲染

Vue.js的核心是一个系统，该系统使我们能够使用简单的模板语法声明性地将数据呈现到DOM：

<div id="counter">
Counter: {{ counter }}
</div>
const Counter = {
data() {
return {
counter: 0
}
}
}

Vue.createApp(Counter).mount('#counter')
我们已经创建了我们的第一个Vue应用程序！这看起来与呈现字符串模板非常相似，但是Vue在后台做了很多工作。数据和DOM现在已链接，并且所有内容现在都是反应性的。我们怎么知道？看一下下面的示例，其中counter属性每秒增加一次，您将看到呈现的DOM的变化：

const CounterApp = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}

除了文本插值，我们还可以像这样绑定元素属性：

<div id="bind-attribute">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound
title!
</span>
</div>
const AttributeBinding = {
data() {
return {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
}
}

Vue.createApp(AttributeBinding).mount('#bind-attribute')

在这里，我们遇到了新的事物。v-bind您看到的属性称为指令。指令带有前缀v-以指示它们是Vue提供的特殊属性，并且您可能已经猜到了，它们将特殊的反应性行为应用于渲染的DOM。在这里，我们基本上是说“使用当前活动实例上的title属性，使该元素的属性保持最新message。 ”

 

免费源码下载地址：http://github.crmeb.net/u/defu