第六节:教你如何在html中绑定数据
前端君 翻身的码农
上两节我们学习了vue的实例知识:
第4节:vue实例的4个常用选项
第5节:vue 实例的生命周期
提醒一下,这两节的内容在后面实战的时候很重要,如果落下的同学可以回去翻看学习,不必害怕难学,这里没有难学的教程。
这一节,我们学习如何在html上绑定我们实例中的数据。
Mustache 语法
什么叫Mustache语法,别被这高大上的叫法吓到了,其实就是双大括号{ { }}的写法,在之前的章节我们就演示过在视图中显示我们的数据,这是最常见的绑定方式。有了它,我们可以轻松地在视图显示我们的数据并及时自动更新,无需手动控制。
{
{ name }}
let app = new Vue({
el:"#app",
data:{
name:"前端君"
}
});
十分简单,页面视图上也成功显示我们的data中的name的值:“前端君”。
(再复习一遍)
绑定纯html
有时候有一种这样的需求,我们的数据包含了一些html