山地人

数据和模板分离

山地人
山地人
2021-05-13

当我们需要在模板中使用数据时,我们需要专门的结构来存放数据data。另外还需要一套规则来告知template哪些地方要用data里的数据。

结构分析

  • template 有了一点新变化,{{counter}}这对双花括号,是一对占位符,里面的counter是要动态获取的数据。
  • data(){ ... } data函数中放置的是响应式数据,里面返回了一个响应式数据counter

运行流程

  • Vue在运行的时候,会获取template,发现里面的counter是一个响应式数据,于是到data中找到counter的值为0
  • 然后模板被处理成<div>0</div>
  • 最后生成DOM,渲染到id为root的div节点上。

原生JavaScript写法

下面的写法,我们不借助任何JavaScript框架,使用原生JavaScript来实现类似的功能。

练一练

在底下的沙盒里使用Vue响应式数据title:"Hello World",并将其渲染输出到页面上。