一、Maven

1.1 maven基本概念

项目的构建（创建）、管理工具

maven仓库：用来存储各种jar
中央仓库：Maven官方保存绝大多数jar包的目录
本地仓库：本地电脑上存放jar的位置

52 - Maven，ES6，Vue基础 - 图1

1.2 eclipse集成maven

Maven之所以能够在众多的jar包找到正确的jar主要就是通过坐标进行寻找，坐标分为三部分：

group id：组织id
artifact id：产品id、标识id
version：版本号

具体步骤查看文档：
maven.docx

1.3 Maven项目目录结构

Java resources 编写Java代码
- main：主要的Java程序
  - java：java代码
  - resources：各种配置框架的配置文件
- test：编写测试用的代码，今后在对项目打包时不会打包这里面的代码
src：可以用来存放web.xml、HTML、css、js静态文件
target：存放编译好的文件、打好的包
pom.xml：maven项目的主配置文件，里面主要配各种Jar包坐标

二、ES6新特性

2.1 变量声明

                //es5 声明变量
        var a = 10;     //存在作用域自动提升的特点
        for(var i = 0; i < 10; i++){
        }
        var a = 200;    //变量重复声明不会报错
        console.log(i);
        //es6 声明变量
        let b = 20;
        //let b = 50;     //不能重复声明
        for(let j = 0;j < 5;j++){
        }
        // console.log(j);
        // const 声明常量，如果重新赋值会报错
        const pi = 3.14
        // pi = 1.23

2.2 函数

    <script>
        //传统函数
        function fun(){
            console.log("hello");
        }
        fun();
        // ES5: 把方法当作变量使用
        let fun2 = function () {
            console.log("fun2");
        }
        fun2();

        // ES6：可以使用箭头作为函数，箭头函数
        let fun3 = (n,m)=>{
            console.log("fun3");
            console.log(n+m);
            return n*m;
        }
        let result = fun3(2,3);
        console.log(result);
    </script>

2.3 对象

    <script>
        // 创建对象
        let dog = {
            name : "旺财",
            gender : "公",
            bark : function(){
                console.log("hello");
            },
            // 箭头函数
            say : () => {
                console.log("world");
            },
            // 简略写法
            eat(){
                console.log("eat");
            }
        }
        // 访问变量属性、方法
        console.log(dog.name);
        // 调用方法
        dog.eat();
    </script>

三、VUE基础

3.1 基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue -->
    <script src="Vue.js"></script>
    <style>
        .redText{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="url" alt="">
        <h3 v-bind:class="color">{{bookName}}</h3>
        <p>{{price}}</p>
        <p :class="color">红色字体</p>
        <button v-on:click="addCart(1)">加入购物车</button>
        <button @click="buyNow()">立即购买</button>
    </div>

    <script>
        let vue = new Vue({
            el: "#app", //element:用于将vue对象与指定的html标签绑定
            data: {     //指定数据
                bookName: "长得帅如何与人相处",
                price: 34.5,
                url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1520936273,2053839283&fm=26&gp=0.jpg",
                color : "redText",
            },
            methods:{
                addCart(id){
                    alert("添加购物车"+id);
                },
                buyNow(){
                    alert("立即购买");
                }
            }
        });
    </script>
</body>
</html>

{{属性}} ：用于获取到vue对象data属性中对应属性的值
v-bind：用于绑定属性(简略写法：
红色字体
)

v-on：用于绑定事件，事件调用的方法写在Vue的methods属性中（简略写法：）

3.2 双向绑定

使用v-model实现双向绑定

     <div id="app">
     <input type="text" placeholder="账号" v-model="account"><br>
     <input type="text" placeholder="密码" v-model="pwd"><br>
     <button @click="login">登录</button>
     <p>{{account}}</p>
 </div>
 <script>
     new Vue({
         el : "#app",
         data:{
             account:"",
             pwd:""
         },
         methods:{
             login(){
                 // 获得账号密码、发送请求
                 console.log(this.account);
                 console.log(this.pwd);
             }
         }
     });
 </script>

双向绑定：既可以将JS中的数据绑定到HTML标签上，也可以将HTML标签的内容绑定到JS相关属性上

3.3 v-for遍历

3.3.1 v-for遍历集合

    <div id="app">
        <!-- 元组 -->
        <div v-for="(book,index) in books">
            <p>{{index}}</p>
            <h3>{{book.name}}</h3>
            <p>{{book.price}}</p>
            <hr>
        </div>
    </div>
    <script>
        new Vue({
            el : "#app",
            data:{
                books:[
                    {name:"book1",price:12.1},
                    {name:"book2",price:12.2},
                    {name:"book3",price:12.3},
                    {name:"book4",price:12.4}
                ]
            }
        });
    </script>

其中v-for = “(book,index) in books” 中的属性1为遍历的单个元素，2为当前元素的下标，只与顺序有关，与名字无关

3.3.2 v-for遍历对象

    <div id="app">
        <ul>
            <li v-for="(value,key,index) in book">
                {{index}} - {{key}} - {{value}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                book:{name:"西游记",price:100}
            }
        });
    </script>

其中v-for=”(value,key,index) in book” 中的属性1为元素的值，2为该值对应的名称，3为元素的下标，只与顺序有关，与名字无关

3.3 购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1px" style="width: 500px;">
            <tr>
                <th>商品名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tr v-for="book in books">
                <td>{{book.name}}</td>
                <td>{{book.price}}</td>
                <td>
                    <button @click="sub(book)">-</button>
                    <span>{{book.num}}</span>
                    <button @click="add(book)">+</button>
                </td>
                <td>{{book.price*book.num}}</td>
                <td>
                    <button @click="del(book.id)">删除</button>
                </td>
            </tr>
        </table>
        <h2>{{total()}}</h2>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                books:[
                    {id:1001,name:"book1",price:11,num:3},
                    {id:1002,name:"book2",price:12,num:2},
                    {id:1003,name:"book3",price:13,num:10},
                    {id:1004,name:"book4",price:14,num:1}
                ]
            },
            methods:{
                add(book){
                    console.log(book);
                    book.num++;
                },
                sub(book){
                    book.num--;
                },
                del(id){
                    console.log(id);
                    //将数据从数组中移除掉
                    for(let i = 0; i < this.books.length;i++){
                        let book = this.books[i];
                        if(book.id == id){
                            // 参数1：从哪里开始删
                            // 参数2：删除几个
                            this.books.splice(i,1);
                            break;
                        }
                    }
                },
                total(){
                    let totalPrice = 0;
                    for(let i = 0;i < this.books.length;i++){
                        let book = this.books[i];
                        totalPrice += book.price * book.num;
                    }
                    return totalPrice;
                }
            }
        });
    </script>
</body>
</html>