vue.js快速入门(2)
v3
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
<div id="counter">
Counter: {{ counter }}
</div>
const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount('#counter')
运行结果
我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?请看下面的示例,其中
counter
property 每秒递增,你将看到渲染的 DOM 是如何变化的:
const Counter = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {//箭头函数
this.counter++
}, 1000)
}
}
运行结果
除了文本插值,我们还可以像这样绑定元素的 attribute:
<div id="bind-attribute">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
const AttributeBinding = {
data() {
return {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
}
}
Vue.createApp(AttributeBinding).mount('#bind-attribute')
运行结果
这里我们遇到了一点新东西。你看到的
v-bind
attribute 被称为指令。指令带有前缀v-
,以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title attribute 和当前活跃实例的 message property 保持一致”。
处理用户输入
为了让用户和应用进行交互,我们可以用 v-on
指令添加一个事件监听器,通过它调用在实例中定义的方法:
<div id="event-handling">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转 Message</button>
</div>
const EventHandling = {
data() {
return {
message: 'Hello Vue.js!'
}
},
methods: {
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}
}
Vue.createApp(EventHandling).mount('#event-handling')
运行结果
注意在这个方法中,我们更新了应用的状态,但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理,你编写的代码只需要关注逻辑层面即可。
Vue 还提供了v-model
指令,它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="two-way-binding">
<p>{{ message }}</p>
<input v-model="message" />
</div>
const TwoWayBinding = {
data() {
return {
message: 'Hello Vue!'
}
}
}
Vue.createApp(TwoWayBinding).mount('#two-way-binding')
条件与循环
控制切换一个元素是否显示也相当简单:
<div id="conditional-rendering">
<span v-if="seen">现在你看到我了</span>
</div>
const ConditionalRendering = {
data() {
return {
seen: true
}
}
}
Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute,还可以绑定到 DOM 的结构。此外,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/移除元素时自动应用过渡效果。
你可以 seen
从 true
更改为 false
,以检查效果。
还有其它很多指令,每个都有特殊的功能。例如,
v-for
指令可以绑定数组的数据来渲染一个项目列表:
<div id="list-rendering">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
const ListRendering = {
data() {
return {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
}
}
Vue.createApp(ListRendering).mount('#list-rendering')
运行结果
<!--
THE END
copyright by 2022 oldhelps
-->