【Vue2✨】 Vue2 入门之旅（二）：模板语法

在上一篇文章中，我们认识了 Vue2 的基本思想和第一个示例。本篇将深入介绍 模板语法，这是 Vue 中最直观的部分，也是新手入门必须掌握的内容。

---

目录

1. 插值表达式
2. 指令系统
   • v-bind
   • v-model
   • 条件渲染
   • 列表渲染
3. 小结

---

插值表达式

Vue 提供了 {{ }} 语法，可以把数据直接渲染到页面上。

<div id="app"><p>你好，{{ name }}</p>
</div><script>
new Vue({el: '#app',data: {name: '小明'}
})
</script>

页面结果：

• 插值表达式里可以写简单的 JS 表达式：{{ number + 1 }}
• 不能写语句（如 if/for）。

---

指令系统

Vue 的指令以 v- 开头，用来扩展 HTML 标签的功能。

v-bind 属性绑定

<div id="app"><a v-bind:href="url">点我跳转</a>
</div><script>
new Vue({el: '#app',data: {url: 'https://vuejs.org'}
})
</script>

缩写形式：:href="url"。

---

v-model 双向绑定

<div id="app"><input v-model="message"><p>你输入的是：{{ message }}</p>
</div><script>
new Vue({el: '#app',data: {message: ''}
})
</script>

输入框的内容会实时更新到 message，同时 message 改变也会更新输入框。

---

条件渲染 v-if / v-show

<div id="app"><p v-if="ok">显示这段文字</p><p v-else>条件不成立</p>
</div><script>
new Vue({el: '#app',data: {ok: true}
})
</script>

• v-if：真正销毁或创建 DOM 节点
• v-show：通过 display:none 控制显示隐藏

---

列表渲染 v-for

<div id="app"><ul><li v-for="(item, index) in items" :key="index">{{ index }} - {{ item }}</li></ul>
</div><script>
new Vue({el: '#app',data: {items: ['苹果', '香蕉', '橘子']}
})
</script>

渲染结果：

---

小结

1. 插值表达式 {{}} 用于直接渲染数据。
2. 指令系统是 Vue 模板的核心：
   • v-bind：属性绑定
   • v-model：双向数据绑定
   • v-if/v-show：条件渲染
   • v-for：列表渲染

---

📕下一篇文章，我们将学习 数据与方法（data、methods、computed、watch）。