html5绑定数据,第六节：教你如何在html中绑定数据

第六节：教你如何在html中绑定数据

前端君 翻身的码农

上两节我们学习了vue的实例知识：

第4节：vue实例的4个常用选项

第5节：vue 实例的生命周期

提醒一下，这两节的内容在后面实战的时候很重要，如果落下的同学可以回去翻看学习，不必害怕难学，这里没有难学的教程。

这一节，我们学习如何在html上绑定我们实例中的数据。

Mustache 语法

什么叫Mustache语法，别被这高大上的叫法吓到了，其实就是双大括号{ { }}的写法，在之前的章节我们就演示过在视图中显示我们的数据，这是最常见的绑定方式。有了它，我们可以轻松地在视图显示我们的数据并及时自动更新，无需手动控制。

{ { name }}

let app = new Vue({

el:"#app",

data:{

name:"前端君"

}

});

十分简单，页面视图上也成功显示我们的data中的name的值：“前端君”。

(再复习一遍)

绑定纯html

有时候有一种这样的需求，我们的数据包含了一些html