Vue 声明式渲染

Vue代码的书写位置

在学习声明式渲染之前，我们先在之前创建的工程当中找一个地方来写Vue代码。
为了简单，我们就选择在App.vue文件中写。

// template即模版的意思，每一个vue文件里必须要有一个，在这里写HTML代码
<template>
  <div id="app">
  </div>
</template>

// 在这里写js逻辑相关的代码
<script>
export default {
  name: "app"
};
</script>

// 这里写样式代码
<style>

</style>

每一个Vue文件由三部分组成，template、script、style即对应HTML、JavaScript、CSS。

注意的一点是，在template里面只允许有一个块状元素，通常情况下我们在template里面写的都是div。

差值表达式（{{}}）

声明式渲染中最常用的一个东西就是差值表达式（{{}}）

差值表达式渲染–字符串
在Vue中我们将字符串用一个变量代替，并将变量放在差值表达式中：

<h2>{{title}}</h2>

变量的值在JavaScript中存放，代码如下：

<script>
// export default是固定格式，不需要纠结
export default {
    // 模块的名字
    name: "app",
    // 页面中数据存放的地方
    data() {
        return {
            title: "XXXXXXXXX"
        };
    }
};
</script>

差值表达式渲染–数组

在HTML里用差值表达式填充内容，从数组里面取值可以用数组下标的形式，代码如下：

<h2 class="title">{{title}}</h2>
<ul class="list">
    <li>{{todoList[0]}}</li>
    <li>{{todoList[1]}}</li>
    <li>{{todoList[2]}}</li>
    <li>{{todoList[3]}}</li>
    <li>{{todoList[4]}}</li>
</ul>

然后在script里面定义数组：

<script>
export default {
  name: "app",
  data() {
    return {
      title: "今日待完成事项",
      todoList: [
        "完成HTML标签学习",
        "完成CSS文字样式学习",
        "完成CSS盒模型学习",
        "完成Flex布局学习",
        "完成JavaScript入门学习"
      ]
    };
  }
};
</script>

data、scope

在上面的代码中，有两个东西需要强调一下：

• data方法里面用来存放数据或者全局变量，具体格式如上面的代码所示。
• scope你可以理解为锁，将css代码锁在本文件内，只在本文件内有用。

差值表达式–对象

根据要求，我们需要定义一个这样的变量：

let list = [{},{},{}]

将对象中的内容填充并放在Vue的data中：

<script>
export default {
  name: "app",
  data(){
      return {
          list:[
              {
                  name:"张三",
                  grade:"三年级二班",
                  mark:290
              },
              {
                  name:"李四",
                  grade:"三年级二班",
                  mark:270
              },
              {
                  name:"王五",
                  grade:"三年级二班",
                  mark:270
              }
          ]
      }
  }
};
</script>

接下来我们需要一个HTML结构去渲染data中的数据：

<template>
  <div id="app">
    <ul>
        <li>姓名--班级--总成绩</li>
        <li>{{list[0].name}}--{{list[0].grade}}--{{list[0].mark}}</li>
        <li>{{list[1].name}}--{{list[1].grade}}--{{list[1].mark}}</li>
        <li>{{list[2].name}}--{{list[2].grade}}--{{list[2].mark}}</li>
    </ul>
  </div>
</template>