基础一，Vue的相关定义和简单语法介绍

在前面两个章节中，介绍了Vue项目初始环境的搭建，以及Vue项目目录结构和相关的项目文件说明。本节介绍一下Vue的相关定义和语法，主要内容来自Vue的官方文档，我选的是当前最新版本V3。

但是我使用的例子跟官网的会有所不同，但最终结果都是一样的。本节内容非常简单，记录下来作为我自已完整的一个复习笔记。

一、Vue是什么

Vue是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，Vue 的核心库只关注视图层。

二、声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。来看一段例子:

<template>
  <div>Counter: {{ counter }}</div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
    };
  },
};
</script>

 成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。除了文本插值，我们还可以像这样绑定元素的 attribute：

<template>
  <div>
    <span v-bind:title="message">
      鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
  </div>
</template>
<script>
export default {
  name: "Test",
  data() {
    return {
      message: "safsadf"
  }
};
</script>

 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute

三、处理用户输入

用 v-on 指令添加一个事件监听器，通过它调用在实例中定义的方法：

<template>
  <div>
       <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转Message</button>
    </div>
</template>
<script>
export default {
  name: "Test",
  data() {
    return {
      message: "safsadf"
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split("").reverse().join("");
    },
  },
};
</script>

 所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

四、条件和循环

主要通过v-if指令，如：

 <div id="conditional-rendering"> 2 <span v-if="seen">现在你看到我了</span> 3 </div> 然后通过seen变量等于true或者false来控制元素显示或者隐藏，其实背后的原理是通过生成css display等于none或者true实现的。

v-for 指令可以绑定数组的数据来渲染一个项目列表，这里就不举例了，直接看下一节，是本文的重点。

五、组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树。

组件本质上是一个具有预定义选项的实例。在components文件夹下我们新建TodoItem.vue文件，并编写如下内容：

<template>
  <li>{{ todo.text }}</li>
</template>
<script>
export default {
  name: "todo-item",
  props: ["todo"],
};
</script>

 这样一个简单的组件就定义好了，这里重点是props属性接口，它是与外部数据进行通信的桥梁。接下再在任意vue文件中来使用这个组件：

<template>
  <div>
    <ol>
      <todo-item v-for="item in list" v-bind:todo="item" v-bind:key="item.id">
      </todo-item>
    </ol>
  </div>
</template>

<script>
import TodoItem from "./TodoItem.vue";
export default {
  name: "Test",
  components: {
    TodoItem,
  },
  data() {
    return {
      list: [
        { id: 0, text: "Vegetables" },
        { id: 1, text: "Cheese" },
        { id: 2, text: "Whatever else humans are supposed to eat" },
      ],
    };
  }
};
</script>

 通过import TodoItem from "./TodoItem.vue";来导入这个组件，通过在components属性中赋值TodoItem，声明需要使用这个组件，案例中通过使用v-for指令来遍历list数据，通过v-bind:todo绑定到元素中。注意这里一定要绑定v-bind:key来区分元素，不希望会报错。

示例中将应用分割成了两个更小的单元，子单元通过 prop 接口与父单元进行了良好的解耦。现在可以进一步改进 <todo-item> 组件，提供更为复杂的模板和逻辑，而不会影响到父应用。

在一个大型应用中，有必要将整个应用程序划分为多个组件，以使开发更易管理。