01简单的使用vue渲染数据

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

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

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: hotpink;
    }
</style>

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

<div id="app">
    <h1>{{ 1+1 }}</h1>
    <h2>hello {{ foo }}</h2>
    <ul>
        
            需要遍历的节点使用v-for 指令
            item in todos
            item 是随便起的一个名字，表示当前遍历项
            in 是固定语法
            todos 是 data 数据中的 todos
         
        <li v-for="item in todos">{{ item.title }}</li>

        <h2>判断</h2>
        
             v-if 是用于判断的指令
             它的值需要给一个布尔结果
             如果为true 则渲染，否则不渲染
          
        <div class="box" v-if="seen"></div>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //3.创建vue实例
    //指定要管理的模版入口
    //初始版模版数据
    //在模版中通过vue.js语法使用模版数据
    var app = new Vue({
        el: '#app',//告诉vue模版入口是id=app的节点
        data: { 模版数据，这里的数据可以直接在模版中使用
            foo: 'bar',
            seen: true,
            todos: [
                { id: 1, title: '吃饭' },
                { id: 2, title: '睡觉' },
                { id: 3, title: '打豆豆' },
                { id: 4, title: '写代码' }
            ]
        },
        methods: {}
    });
</script>

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