前言

vue的语法风格和标签版的JSP、springboot的thymeleaf非常类似，如果有这些基础，入门就很快。我们这里只看用得到的，更深的语法及原理还需要后续学习。本小节可以在上一节的基础上去实践，可以根据Vue官网查看更详尽的内容。

一、生命周期和常用元素

该部分的语句都应当在<script></script>标签内。

1、生命周期

生命周期略过，常用的生命周期就一个：mounted，它指的是Vue组件已经准备好了之后，页面渲染之前，应该做什么事情。一般在mounted里面都是调用HTTP请求，初始化页面渲染所需的动态数据。

示例：

mounted () {
    hello().then((res) => {
      this.msg = res.data
    })
  }

2、数据存放区

类似声明全局变量，可以是简单类型，可以是Object，可以有初始值，可以是数组，可以有嵌套，例如：

data () {
    return {
      msg: '',
      msg2: 'aaaaaa',
      msg3: [],
      msg4: {
           internalMessage: ''
      }
    }
  }

在方法内调用的时候，要加this，例如：

this.msg = res.data

在<template>标签内调用，则可以直接写变量名，例如：

<div class="test-class">{{msg}}</div>

3、方法

可以自定义方法，可以带参数，可以写jquery在里面。

methods: {
    handle (data) {
      alert(data)
    }
  }

在template可以这样调用：

<template>
  <button @click="handle(msg.data)">点我</button>
</template>

二、数据和事件

1、动态数据绑定

当绑定的数据变化时，会动态渲染。

老旧写法：v-bind

<template>
  <button v-bind:id="id">点我</button>
</template>
<script>
export default {
  data () {
    return {
      id: '1'
    }
  }
}
</script>

新写法，直接一个英文冒号，例如：

<button :id="id">点我</button>

2、事件绑定

老旧写法：v-on:，例如：

<template>
  <button v-on:click="handle(msg.data)">点我</button>
</template>

新写法：@，例如：

<template>
  <button @click="handle(msg.data)">点我</button>
</template>

3、监听键盘动作

常见的就是回车提交表单：

<input :keyup.enter="submit">

三、模板语法

1、显示文本

语法：

{{ 变量名 }}

例如：

<div class="test-class">{{msg}}</div>

2、条件渲染

语法：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

应用场景：比如当某个数据有的时候显示数据，没有的时候则显示“空”，就会用到条件渲染。

3、循环

需要一个key，可以用默认的循环变量index，也可以用数据的ID：

<div v-for="(item, index) in itemList" :key="index">
  <!-- 内容 -->
</div>
<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

基本用这三个就OK，更复杂的例如表单数据绑定等等，已经有很多成熟的组件封装起来了。