<br>
    <!--
        v-bind：为 HTML 标签绑定属性值
            1). v-bind:属性名 = "data中的属性"  -> 引用data中指定的属性
            2). v-bind可以省略
    -->
    <a v-bind:href="url">百度一下</a>
    <br>
    <!--
        v-bind 可以省略不写
    -->
    <a :href="url">百度一下</a>
    <br>
    <!--
        也可以绑定其他属性
    -->
    <div :class="cls">我是div</div>
</div>

  <input type="text" name="username" placeholder="请输入用户名"
         v-model="user.username"> <br>
  <input type="password" name="password" placeholder="请输入密码"
         v-model="user.password"><br>
  <button @click="send()">登录</button>

  <h1>主页: 显示好友列表</h1>
  <ul>
      <li v-for="friend of list">
          {{friend.name}},{{friend.age}}
      </li>
  </ul>

```java
package com.itheima02.vue;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.ArrayList;

@WebServlet("/MyServlet2")
public class MyServlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        try {
            //1. 接收请求
            User2 user2 = BaseController.getBean(request, User2.class);
            System.out.println(user2);
            //2. 业务处理
            //数据库查询好友数据
            ArrayList<Friend> friends = new ArrayList<>();
            friends.add(new Friend("张三",18));
            friends.add(new Friend("李四",19));
            friends.add(new Friend("王五",20));
            //3. 响应
//        response.getWriter().print("hello");
            Result result = new Result(true, "成功", friends);
            BaseController.printResult(response,result);
        } catch (Exception e) {
            Result result = new Result(false, "失败", null);
            BaseController.printResult(response,result);
        }
    }
}

package com.itheima02.vue;

public class Friend {
    private String name;
    private Integer age;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public Friend() {
    }

    public Friend(String name, Integer age) {
        this.name = name;
        this.age = age;
    }

    @Override
    public String toString() {
        return "Friend{" +
                "name='" + name + '\'' +
                ", age='" + age + '\'' +
                '}';
    }
}

package com.itheima02.vue;

public class User2 {
    private String username;
    private String password;

    @Override
    public String toString() {
        return "User2{" +
                "username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

package com.itheima02.vue;
//数据封装
public class Result {
    //表示状态: true表示成功
    private boolean flag;
    // 提示信息
    private String msg;
    // 数据
    private Object data;

    public Result() {
    }

    public Result(boolean flag, String msg, Object data) {
        this.flag = flag;
        this.msg = msg;
        this.data = data;
    }

    public boolean isFlag() {
        return flag;
    }

    public void setFlag(boolean flag) {
        this.flag = flag;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

package com.itheima02.vue;

import com.alibaba.fastjson.JSON;

import javax.servlet.ServletInputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

//TODO: springmvc 有个controller,接收请求和响应数据都封装了
//将获取请求和响应进行封装
public class BaseController {
    //第一个方法的作用: 将请求体中的数据转换成指定类型的对象
     //泛型方法
    public static <T>T getBean(HttpServletRequest request,Class<T> clazz) throws IOException {
        ServletInputStream is = request.getInputStream();
        //将输入流中的json格式字符串转换成user对象
        T o = JSON.parseObject(is, clazz);
        return o;
    }
    //第二个方法的作用: 将result对象转成json格式字符串并响应
    public static void printResult(HttpServletResponse response, Result result) throws IOException {
        String json = JSON.toJSONString(result);
        // 解决响应体中文乱码问题
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().print(json);
    }


}

<dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <!--fastjson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
        </dependency>
    </dependencies>

符录: 设置 (了解)

1. Vue相关api的自动提示

添加快捷提示:

@tap,@tap.stop,@tap.prevent,@tap.once,@click,@click.stop,@click.prevent,@click.once,@change,@change.lazy,@change.number,@change.trim,v-model,v-for,v-text,v-html,v-if,v-else-if,v-else,v-pre,v-once,v-bind,scoped

第一步

一般第一步设置好了,就可以了, 如果还不行,就如下设置

为了提示功能更加强大,还可添加vue插件(需要联网, 安装后需要重启)

2. Chrome浏览器Vue插件的安装

打开chrome浏览器；输入：chrome://extensions/

点击“加载已解压的扩展程序”(如果看不到,点击右上角开发者模式)
然后将“资料/chrome vue插件/chrome”文件夹选中即可