Vue的data配置项

如果仅仅像我们以上书写的程序，我们完全没有必要使用Vue，直接在body里直接书写就可以了：

在Vue中还有一个data的配置项，它可以帮助我们动态的渲染页面，

代码如下：

 
   
   
   
   
 
 
   
   

   
   
 

代码解释

1、data是Vue实例的数据对象，是给整个Vue实例提供数据来源的

2、data配置项的value值，有两种写法 Object｜Function（对象或者函数），现阶段，这两种写法都可以，后期学到组件化的时候，data只能是函数的写法，建议大家直接用函数

3、如果data是对象的写法，对象必须是存粹的对象（含有0个或多个key：value）

4、data数据插入到模版语句中，可以用{{}},这是Vue框架自己搞的一个语法，叫插值语法（或叫胡子语法），可以从data根据key获取value，并且将value插入到对应的位置，注意{{}}语法是固定语法，不可以添加其他内容，例如空格{ { }}

5、data可以写多级，然后去一级一级获取

6、Vue编译器对template进行编译，遇到{{}}语法时，就去data里取数据，然后将获取到的数据插入到对应的位置，生成对应的html代码，最终将html渲染到挂载位置，呈现

7、当data发生改变时，template模版就会被重新编译，重新渲染

Vue的template配置项

具体代码：

 
   
   
   
   
 
 
   
   
   

     
   

   
   
 

代码解释

1、template只能有一个根元素，只要data数据发生变化，template就会重新编译

2、template编译后进行渲染时会将挂载位置的元素替换。

3、template后面的代码如果需要换行的话，建议将代码写到``符号当中，不建议使用 + 进行字符串的拼接。

4、template配置项可以省略，将其直接编写到HTMl代码中，此时指定挂载的位置就不会被替换

5、只要data中的数据发生了变化，模版语句就一定会重新编译