01简单的使用vue渲染数据

Document

像使用模板引擎一样来使用 Vue.js
需求：
  1. 点击自增
  2. 点击切换显示与隐藏
  3. 列表渲染

art-template 模板引擎语法
  {{}} 数据绑定
  {{ each xxx }} 数据遍历
  {{ if }} 逻辑判断
  。。。

此时 div 就是被 Vue 管理的模板 
里面可以直接使用 Vue 的模板语法


    
{{ 1+1 }}
    
hello {{ foo }}
    

        
            需要遍历的节点使用v-for 指令
            item in todos
            item 是随便起的一个名字，表示当前遍历项
            in 是固定语法
            todos 是 data 数据中的 todos
         
        
{{ item.title }}

        
判断
        
             v-if 是用于判断的指令
             它的值需要给一个布尔结果
             如果为true 则渲染，否则不渲染
          
        

    

这里就是把vue数据渲染到页面上,就是把vue里面todos的数据遍历到页面上,用一个v-if判断是否显示粉色框子。主要使用以下
{{}} 数据绑定
{{ each xxx }} 数据遍历
{{ if }} 逻辑判断