vue技术学习

1.入门案例

<!--1. 语法规则：vue中必须定义根目录标签 -->
<div id="app">
    <!-- 利用差值表达式，获取数据 -->
    {{hello}}
</div>
<!-- 2.引入vue js -->
<script src="../js/vue.js"></script>
<!-- 3.编辑VUE JS -->
<script>
    /*
     ES6新规范
     1.定义变量  var 弊端：没有作用域的概念
     如果变量名称重复则可能会引发问题
     2.定义变量 let 有作用域的概念
     3.常量 const   全局唯一不可更改
     */
    const app = new Vue({
        //标识VUE对象的作用范围
        //key:value,
        el: "#app",
        //定义数据对象
        data: {
            hello: "您好！！！VUE"
        }
    });

</script>

2.数据展现

2.1v-cloak数据展现

    <!-- 样式 -->
    <style>
        body {
            background-color: blanchedalmond;
            color: fuchsia;
            font-size: 20px;
            font-style: italic;
        }

        /
        /
        为属性定义样式
        [v-cloak] {
        / / 定义样式不显示 display: none;
        }
    </style>

<!-- v-cloak说明：
 当我们的程序编译结束时，该属性将不起作用-->
<div id="app" v-cloak>
    {{hello}}
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            hello: "您好！！！VUE"
        }
    });
</script>
</body>

2.2v-text

<!-- v-cloak说明：
 当我们的程序编译结束时，该属性将不起作用-->
<div id="app">
    <!-- 1.插值表达式 -->
    <h3>{{hello}}</h3>
    <!-- 2.v-text 数据展现 vue的指令
         v-text 当数据没有解析成功时，页面没有任何的数据，
         是v-cloak的升级版本
     -->
    <h3 v-text="hello"></h3>


    <!-- 3.v-html 将数据按照html形式进行解析
    有时页面的部分数据可能来源于其他服务器，
    远程服务器返回的是HTML代码片段，如果需要将代码
    片段渲染为页面形式，则使用该命令，
    -->
    <div v-html="html"></div>

    <!-- 4.v-pre
       跳过编译效果，显示原始mustache标签
    -->
    <div v-pre>{{需要展现元素的数据}}</div>

    <!-- v-once 数据只渲染一次-->
    <div v-text="one" v-once></div>

    <!-- v-model 双向数据绑定 适用于输入框
    1.data中的数据发送变化时，页面数据同步更新
    2.当页面input框中的内容发生变化时，
    则同步更新data数据
    -->
    <div style="border: aliceblue;">
        <h3>双向式绑定</h3>
        用户名：<input type="text" name="name"
                   v-model="name"
    />
    </div>

</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            hello: "您好！！！VUE",
            html: "<h1>好好学习~天天向上</h1>",
            one: "java学习",
            name: "admin"
        }
    });
</script>

3.事件绑定

3.1事件

<div id="app">
    <!-- 展现效果 ,v-on:click点击事件，每次自增1-->
    <h1 v-text="num"></h1>
    <br>
    <button v-on:click="num++">自增</button>
    <!-- 简化版 -->
    <button @click="num++">自增</button>

    <!-- VUE中调用函数方法 -->
    <button @click="addNum">方法自增</button>
    <!-- 方法的简化操作 -->
    <button @click="addNum2">方法自增</button>
</div>

<script src="../js/vue.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            /* 方法 */
            addNum: function () {
                this.num++
            },
            //addNum2=addNum:function()
            addNum2() {
                this.num = this.num + 2
                //this.num+=2
            }
        }

    });

</script>

3.2事件修饰符

<div id="app">
    <!-- 事件的冒泡：
     如果将来事件有嵌套关系，执行完成内部事件之后，执行
     外部事件，这种现象称之为事件冒泡.

     1.阻止事件冒泡:
                     语法:
                         1.v-on:click.stop="xxx"
                         2.@click.stop
     -->
    <div @click="addNum2">
        <h3>{{num}}</h3>
        <button @click.stop="addNum">增</button>
    </div>
    <br>
    <!-- 2.阻止默认行为
        如果需要阻止标签的默认的行为 则添加 @click.prevent
                 -->
    <div>
        <h3>阻止默认行为</h3>
        <a href="http://www.baidu.com" @click.prevent="baidu">百度</a>
    </div>

    <div>
        <h3>特殊按键字符说明</h3>
        <!--
            需求:要求用户按回车键出发 事件函数
            .enter   .tab .delete (捕获“删除”和“退格”键)
            .esc   .space  .up  .down .left  .right
        -->
        回车键触发: <input name="username" type="text"
                      v-on:keyup.enter="handler"/> <br>
        删除键触发: <input name="age" type="text"
                      v-on:keyup.delete="handler"/> <br>
        space键触发: <input name="sex" type="text"
                         @keyup.space="handler"/> <br>
        <!-- tab有效 使用keydown操作 -->
        tab键触发: <input name="sex" type="text"
                       @keydown.tab="handler"/>
    </div>
</div>

<script src="../js/vue.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {

            addNum() {
                this.num++
            },
            addNum2() {
                this.num = this.num + 2;
            },

            baidu() {
                console.log("点击百度的按钮")
            },

            handler() {
                console.log("函数被执行")
            }
        }

    });

</script>

3.3计算机练习

<div id="app">
    <!-- 要求：输入完成B之后，回车键触发计算 -->
    数据A:<input type="text" v-model="num1"/>
    数据B:<input type="text" v-model="num2" @keyup.enter="addNum"/>
    总数：<span v-text="num"></span>
</div>

<script src="../js/vue.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            num1: '',
            num2: '',
            num: ''
        },
        methods: {

            addNum() {
                //this.num=this.num1+this.num2
                //将字符串转换为数值
                this.num = parseInt(this.num1) + parseInt(this.num2)
            }

        }

    });
</script>

4.属性绑定

  <!-- 定义样式 -->
    <style>
        .red {
            background-color: burlywood;
            color: darkmagenta;
            font-size: 25px;
        }
    </style>

<div id="app">
    <!-- 1.入门案例 -->
    <a href="http://www.baidu.com">百度</a>
    <br/>
    <!-- 属性绑定 -->
    <a v-bind:href="url">百度-vue1</a>
    <!--简化操作 -->
    <a :href="url">百度-vue2</a>


    <hr/>

    <h3>样式绑定</h3>
    <div class="red">倚天屠龙</div>

    <!-- vue的语法：{red类型名称：布尔类型数据}
    {red:true}red样式展现
    {red:false}red样式不展现
    -->
    <div :class="{red:flag}">敏敏特穆尔</div>
    <!-- 在vue中可以进行简单的数据计算 -->
    <button @click="flag=!flag">切换</button>


    <!-- 小结:  v-on 事件处理 函数定义
                           v-bind 事件绑定 class style
                -->
</div>


<script src="../js/vue.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            url: "http://www.baidu.com",
            flag: true,
        },
        methods: {}

    });

</script>

5.分支结构

<div id="app">
    <!-- 分支语法说明
     v-if 如果条件为真，则展现数据
     v-else 一般与v-if同时出现 v-else不能单独出现
     v-else-if if与else中间的判断


     -->
    <h1>根据分数评级</h1>
    用户考试成绩：<input type="text" v-model="score"/>
    ，<br/>
    等级：
    <span>优秀</span>
    <span>良好</span>
    <span>中等</span>
    <span>及格</span>
    <span>不及格</span>
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score>=80">良好</div>
    <div v-else-if="score>=70">中等</div>
    <div v-else-if="score>=60">及格</div>
    <div v-else>不及格</div>


    <!-- v-show测试 -->
    <h2 v-show="flag" style="display: none;">测试v-show展示效果</h2>
</div>


<script src="../js/vue.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            score: 0,
            flag: false
        },

        methods: {}

    });

</script>

6.循环

<div id="app">
    <!-- 1.定义表单 练习form标签与vue对象形成数据绑定-->
    <form action="http://www.baidu.com">
        用户名：<input type="text" v-model="user.username"/>

        <br/>

        用户详情:<textarea v-model="user.info"></textarea>

        <br/>
        <!-- 定义下拉框-->
        <select name="book" v-model="user.book">
            <option value="java编程基础">java编程基础</option>
            <option value="java疯狂讲义">java疯狂讲义</option>
            <option value="java技术卷">java技术卷</option>
        </select>

        <br/>
        <!-- 单选框练习-->
        性别:<input type="radio" value="男" name="gender" v-model="user.gender"/>男
        <input type="radio" value="女" name="gender" v-model="user.gender"/>女


        <br/>

        <!-- 复选框练习，多选框，用数组接收-->
        爱好:
        <input type="checkbox" name="hobby" value="吃" v-model="user.habby"/>吃
        <input type="checkbox" name="hobby" value="喝" v-model="user.habby"/>喝
        <input type="checkbox" name="hobby" value="拉" v-model="user.habby"/>拉
        <input type="checkbox" name="hobby" value="撒" v-model="user.habby"/>撒

        <br/>
        <!-- 阻止标签的默认行为 采用其他方式提交 -->
        <input type="submit" value="提交" @click.prevent="addForm"/>
    </form>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user: {
                username: '',
                info: '',
                book: 'java技术卷',
                gender: '男',
                habby: ["吃"]

            }
        },
        methods: {
            addForm() {
                console.log("input标签" + this.user.username)
                console.log("文本域标签" + this.user.info)


            }
        }
    })
</script>

7表单数据提交

7.1表单数据提交

<div id="app">
    <!-- vue中的循环 v-for
     1.循环获取数据的内容
     2.可以循环复制标签
     参数说明
     item:变量名称，名称任意
     in 关键字  固定写法
     array：要遍历的数据
     -->
    <h1 v-for="item in array">{{item}}</h1>

    <hr/>
    <!-- v-for语法2 获取数据/下标-->
    <h1 v-for="(item,index) in array">{{item}}----{{index}}</h1>


    <hr/>

    <!-- 循环遍历集合 -->
    <div v-for="item in userList">
        <p>ID号:{{item.id}}</p>
        <p>名称:{{item.name}}</p>
    </div>
    <hr/>

    <!-- 如果直接遍历对象则输出的是value值
     参数说明：1.value对象的值  2.对像的key 3.数据的下标
     -->
    <div v-for="(value,key,index) in user"><span v-text="key"></span>
        --------{{value}}-----<span v-text="index"></span></div>


</div>


<script src="../js/vue.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            array: ["嬴政", "刘彻", "李世民"],
            userList: [{
                id: 100,
                name: "嬴政"
            }, {
                id: 200,
                name: "白起"
            }, {
                id: 300,
                name: "万三千"
            }],
            //定义user对象

            user: {
                id: 200,
                name: "瑶姬",
                age: 3000
            }
        },

        methods: {}

    });

</script>

7.2表单修饰符

<!-- v-model.number="num"  -->
<div id="app">
    请输入数值:<input type="number" v-model.number="num"/>
    <br/>
    <button @click="addNum">计算</button>

    <hr/>
    <!-- 去除空格 -->
    请输入数值:<input type="text" v-model.trim="username"/>
    <br/>
    <button @click="nameSize">长度</button>
    {{length}}


    <hr/>
    <!-- 懒加载方式，当用户输入完成之后，失去焦点时才会触发 -->
    <input type="text" v-model.lazy="msg"/>{{msg}}

</div>


<script src="../js/vue.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            num: '',
            username: '',
            length: 0,
            msg: ''
        },

        methods: {
            addNum() {
                //this.num=parseInt(this.num)+20
                this.num += 20
            },
            nameSize() {
                this.length = this.username.length
            }
        }

    });

</script>

8.计算属性

<div id="app">
    <!-- 将输入的内容逆向输出 -->
    计算:<input type="text" v-model="msg"/> <br/>


    <!-- 1.将字符串拆分成数组 [a][b][c]
    2.reverse()将数组进行反转[c][b][a]
    3.将数组拼接为字符串
    .join("连接符")
    通过js的函数实现数据倒序输出
    -->
    {{msg.split('').reverse().join('')}}

    <br/>
    <!-- 通过计算属性方式获取-->
    {{reverseStr}}


    {{reverseA()}}
    <!--
    计算属性的说明：为了简化插值表达式
    通过js的函数可以实现数据倒序

    -->

</div>


<script src="../js/vue.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: ''
        },

        methods: {
            reverseA() {
                console.log("我是计算调用")
                return this.msg.split('').reverse().join('')
            }
        },

        //定义计算属性
        computed: {
            //必须有返回值
            //使用计算属性时，必须使用return返回
            reverseStr() {
                console.log("我是方法调用")
                return this.msg.split('').reverse().join('')
            }

        }

    });

</script>

9.侦听器

<div id="app">
    姓氏:<input type="text" name="firstName" v-model.lazy="firstName"/><br/>
    名称:<input type="text" name="lastName" v-model.lazy="lastName"/><br/>
    全名: {{fullName}}

    <hr/>
    <!--当失去焦点时触发 -->
    用户名:<input name="username" type="username" v-model.lazy="username"/>{{msg}}

    <hr/>


    <!-- 过滤器，如果对数据的格式进行修改 小写转大写 日期格式转换..
     -->

    用户名:<input type="text" v-model="username"/>
    {{username | upper | lower }}

</div>


<script src="../js/vue.js"></script>

<script>

    //定义过滤器 全部大写

    Vue.filter("upper", function (value) {
        return value.toUpperCase()
    })

    //箭头函数的用法
    //注意：没有参数()也不可以省略
    Vue.filter("lower", (value) => {
        return value.toLowerCase()
    })


    const app = new Vue({
        el: "#app",
        data: {
            firstName: '',
            lastName: '',
            fullName: '',
            username: '',
            msg: ''
        },
        methods: {
            checkName(username) {
                setTimeout(() => {
                    if (username === "admin") {
                        this.msg = '用户名已被占用'
                    } else {
                        this.msg = '用户名可以使用'
                    }
                }, 2000)
            }
        },
        /* 定义监听器*/
        watch: {
            /* 当数据发生变化时则会传递数据到监听器 */
            firstName(value) {
                this.fullName = value + this.lastName
            },

            lastName(value) {
                this.fullName = this.firstName + value
            },
            username(value) {
                this.checkName(value)
                this.msg = '数据正在校验'
            }

        }

    });

</script>

10.生命周期

<div id="app">
    <h3 v-text="msg"></h3>
    <button @click="destroy">销毁</button>
</div>

<!--引入js函数类库  -->
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue生命周期"
        },

        //在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
        beforeCreate() {
            console.log("beforeCreate")
        },
        //在实例创建完成后被立即调用
        created() {
            console.log("created")
        },
        //在挂载开始之前被调用：相关的 render 函数首次被调用。
        beforeMount() {
            console.log("beforeMount")
        },
        //实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
        mounted() {
            console.log("mounted")
        },
        //数据更新时调用，发生在虚拟 DOM 打补丁之前
        beforeUpdate() {
            console.log("beforeUpdate")
        },
        //由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
        updated() {
            console.log("updated")
        },
        //实例销毁之前调用。在这一步，实例仍然完全可用
        beforeDestroy() {
            console.log("beforeDestroy")
        },
        //实例销毁后调用。
        destroyed() {
            console.log("destroyed")
        },
        methods: {
            destroy() {
                this.$destroy()
            }
        }
    })
</script>

11.数据操作

<div id="app">
    <!--
     1.push() 在最后一个追加
     2.pop() 删除最后一个
     3.shift() 删除第一个元素
     4.unshift() 在开头追加一个元素
     5.splice() 在指定位置替换元素
     6.sort() 数组排序 默认是按照字符编码的顺序进行排序
     7.reverse() 数组反转
     -->

    <!-- 展现数组-->
    <span v-for="item in array">{{item}}  </span>
    ，<br/>
    <!-- 添加数据 -->
    数据:<input type="text" v-model="num"/><br/>
    <button @click="push">push</button>
    <button @click="pop">pop</button>
    <button @click="shift">shift</button>
    <button @click="splice">splice</button>
    <button @click="sort">sort</button>
    <button @click="reverse">reverse</button>
</div>

<!--引入js函数类库  -->
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            //定义我的数组
            array: [3, 7, 1, 5, 4],
            num: ''
        },

        methods: {
            push() {
                this.array.push(this.num)
            },
            pop() {
                this.array.pop(this.num)
            },
            shift() {
                this.array.shift(this.num)
            },
            splice() {
                //参数说明: 1.操作数据起始位置  2. 操作数量  3.替换元素的值(如果不写表示删除)
                //将第二三位进行替换为8,9
                //this.array.splice(1,2,8,9)
                //删除第四位数据
                this.array.splice(3, 1, '')
            },
            sort() {
                //数组从小到大
                this.array.sort()
            },

            reverse() {
                //数组反转
                this.array.reverse()
            }
        }
    })
</script>

12.axios

12.1axios简化

<h1>Axios的简化</h1>

<!-- 导入axios标签 -->
<script src="../js/axios.js"></script>

<script type="text/javascript">
    /* 1.实现get请求获取数据，参数 id=1

    方式1：url?id=1
    方法2:url/1
    方法3:url,{params.....}
    */
    axios.get("http://localhost:8090/getUserById", {
        params: {
            id: 3
        }
    }).then(result => {
        console.log(result.data)
    })

    /* 函数的定义*/
    async function getUser() {
        /* 之前通过then的方式返回结果，现在通过await可以直接获取返回值*/
        const result = await axios.get("http://localhost:8090/getUserById", {
            params: {
                id: 3
            }
        })

        console.log(result)
        console.log(result.data)

    }


    /* 解构赋值操作，想直接获取返回值结果*/
    async function getUser2() {
        /* 之前通过then的方式返回结果，现在通过await可以直接获取返回值*/

        const {data: result} = await axios.get("http://localhost:8090/getUserById", {
            params: {
                id: 3
            }
        })
        console.log("解构赋值")
        console.log(result)

    }

    //函数的调用
    getUser()
    getUser2()


    /**
     * 解构赋值优势，回调地狱问题··
     *
     *    $.get("url1",function(data){
           $.get("url2"),data,function(data2){
			   
		   }
		})

     axios.get("url1")
     .then(result => {
			axios.get("url2"),{
				params: result.data
			}.then(result2 => {
				
			})
		})

     推荐方法
     async function aa(){
			const {data: result1} = await axios.get(url)
			cost {data: result2} = await axios.get(url,result1)
		}

     */


</script>

12.2用户列表展现

<div id="app">

    ID:<input type="text" disabled v-model="user.id"/>
    姓名:<input type="text" v-model="user.name"/>
    年龄:<input type="text" v-model="user.age"/>
    性别:<input type="text" v-model="user.sex"/>
    <button @click="updateUser">更新</button>
    <hr/>
    <table id="tab1" border="1px" width="500" align="center">
        <tr>
            <td colspan="5" align="center"><h1>表格数据</h1></td>
        </tr>
        <tr align="center">
            <td>ID编号</td>
            <td>名称</td>
            <td>年龄</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        <tr align="center" v-for="item in userList">
            <td v-text="item.id">ID编号</td>
            <td v-text="item.name">名称</td>
            <td v-text="item.age">年龄</td>
            <td v-text="item.sex">性别</td>
            <td>
                <!-- 知识点：如果没有数据的来源，要传一个来源 -->
                <button @click="updateUserBtn(item)">修改</button>
                <button @click="deleteUser(item.id)">删除</button>
            </td>

        </tr>

    </table>
</div>


<!-- 导入vue.js -->
<script src="../js/vue.js"></script>

<!-- 导入axios.js -->
<script src="../js/axios.js"></script>
<script>

    <!-- 需求1.刷新页面之后，自动发起Ajax请求 -->
    axios.defaults.baseURL = "http://localhost:8090"
    const app = new Vue({
        el: "#app",
        data: {
            userList: [],
            user: {
                id: '',
                name: '',
                age: '',
                sex: ''
            }
        },

        methods: {
            /* 发起ajax请求 */
            getUserList() {
                axios.get("/getUser")
                    .then(result => {
                        this.userList = result.data
                        console.log(this.userList)
                    })
            },
            deleteUser(id) {
                axios.delete("/user/" + id)
                    .then(result => {
                        alert(result.data)
                        //删除成功之后，重新加载列表信息
                        this.getUserList()
                    })

            },

            updateUserBtn(user) {
                this.user = user
                console.log(this.user)
            },


            updateUser() {

                //向后端提交数据
                axios.put("/updateUser", this.user)
                    .then(result => {
                        alert(result.data)
                        this.getUserList()
                    })

            }


        },

        /* created(){

        }, */
        mounted() {
            //我的页面加载完成之后调用函数
            this.getUserList()
        }

    });

</script>

12.3axios练习

<h1>Axios Ajax调用机制</h1>

<form action="http://localhost:8090/addUser" method="post">
    <input name="name" value="玉兔精"/>
    <input name="age" value="800"/>
    <input name="sex" value="女"/>
    <input type="submit" value="提交"/>
</form>

<!-- 导入axios标签 -->
<script src="../js/axios.js"></script>

<script type="text/javascript">

    //编辑ajax请求
    //常用请求方式的类型：get  delete post put
    //分析：get delete同种类型 ajax的语法相同
    //post put同种类型 ajax的语法相同

    /* get请求
       url:http://localhost:8090/getUser
       返回值：List集合JSON
    */
    axios.get("http://localhost:8090/getUser")
        .then(function (result) {
            //data是Axios封装的promise对象
            //注意事项：获取服务器返回值通过data属性
            console.log(result.data)
        });


    /* get带参数的请求方式  ？号拼接的方式
      URL:http://localhost:8090/getUserById?id=100
      返回值:User对象的JSON串
      使用场景：参数只有个别
    */
    axios.get("http://localhost:8090/getUserById?id=1")
        .then(function (result) {
            console.log(result.data)
        });


    /*
    * params对象的方式请求
    * 如果将来的参数有多个，就可以封装params对象，简洁
    */
    axios.get("http://localhost:8090/getUserById", {
        params: {
            id: 236
        }
    })
        .then(function (result) {
            console.log(result.data)
        });


    /*
    * 简化回调函数的写法
    */
    axios.get("http://localhost:8090/getUserById", {
        params: {
            id: 1
        }
    })
        .then(result => {
            console.log(result.data)
        });

    /*
     利用restFul风格实现数据传输
     restFul:
     1.参数使用/分割
     2.url中不能出现动词
     */
    axios.get("http://localhost:8090/user/1")
        .then(result => {
            console.log("AAAA")
            console.log(result.data)
        });

    //ajax删除操作
    axios.delete("http://localhost:8090/user/1")
        .then((result) => {
            console.log(result.data)
        });


    /*
    请求类型：post/put
    1. 对象方式提交
    url:localhost:8090/addUser
     */
    axios.post("http://localhost:8090/addUser", {
        name: "黑熊精",
        age: 3000,
        sex: "男"
    }).then(result => {
        console.log("post")
        console.log(result.data)
    })


    /*
     axios利用form表单提交数据

     */
    let params = new URLSearchParams();
    params.append("name", "狐狸精")
    params.append("age", 300)
    params.append("sex", "女")

    axios.post("http://localhost:8090/addUserForm", params)
        .then(result => {
            console.log("form表单提交成功")
            console.log(result.data)
        })

    /*
     restFul方式实现表单数据提交

     */
    axios.post("http://localhost:8090/addUserForm", params)
        .then(result => {
            console.log("restFul实现数据提交")
            console.log(result.data)
        })


    /**
     * Put请求
     * 需求: 修改id=256的name="文殊菩萨"  要求使用restFul
     */
    axios.put("http://localhost:8090/user/262/文殊菩萨")
        .then(result => {
            console.log("restFul实现数据提交")
            console.log(result.data)
        });


    /* 设置基本的URL地址 */
    axios.defaults.baseURL = "http://localhost:8090"
    axios.put("/user/262/文殊菩萨")
        .then(result => {
            console.log("Axios简化")
            console.log(result.data)
        });


</script>

13.组件化

13.1组件化

<div id="app">
    <!-- 4.通过组件名称，利用标签进行调用 -->
    <add-num-com></add-num-com>
    <add-num-com></add-num-com>
</div>

<!-- 3.定义HTML模板 -->
<template id="addNumTem">
    <!-- 必须有一个根标签 -->
    <div>
        <h1>定义组件</h1>
        <h3>数值: {{num}}</h3>
        <button @click="addNum">自增</button>
    </div>


</template>

<!--1.导入vue.js  -->
<script src="../js/vue.js"></script>
<!-- 2.定义组件 -->
<script>
    //2.1创建一个组件
    Vue.component("addNumCom", {
        //2.2定义组件内部的结构
        data() {
            return {
                num: 0
            }
        },
        /*
        2.3定义组件的标签体
         方式一：字符串平均
         */
        /* template: "<div> {{num}} <button @click='addNum'></button>"+
    "<table></table>"+
    "</div>" */
        //方法二：ES6 模板字符串 块级作用域
        /* 	template: `
        <table>
          <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          </tr>
        </table>
        ` */
        //方法三template模板语法
        template: "#addNumTem",
        methods: {
            addNum() {
                this.num++
            }
        }
    });


    //3.定义Vue对象
    const app = new Vue({
        el: "#app"

    })
</script>

13.2局部组件化

<div id="app">
    <hello1-com></hello1-com>
    <person-com></person-com>
</div>

<div id="AAA">
    <hello1-com></hello1-com>
</div>

<!-- 定义第一个组件-->
<template id="hello1Tem">
    <div>
        <h3>{{msg}}</h3>
    </div>

</template>

<!-- 定义第二个组件-->
<template id="personTem">
    <div>
        <h3>{{msg}}</h3>
    </div>

</template>

<!--1.导入vue.js  -->
<script src="../js/vue.js"></script>

<script>
    //定义对象
    let hello1 = {
        data() {
            return {
                msg: "我是hello1"
            }
        },
        //定义组件模板
        template: "#hello1Tem"
    }

    //定义第二个组件对象
    let personCom = {
        data() {
            return {
                msg: "我是中国人"
            }
        },
        template: "#personTem"

    }


    const app = new Vue({
        el: "#app",
        //定义局部组件
        components: {
            //key组件名称: vue 组件内容
            hello1Com: hello1,
            //personCom: personCom
            //如果key和value的值相同，则简化key即可
            personCom
        }

    })
</script>

13.3局部组件嵌套

<div id="app">
    <home></home>
    <dog></dog>
</div>


<!-- 2.定义dog标签-->
<!-- 语法说明：在组件中，局部组件之间不允许进行嵌套 -->
<template id="dogTem">
    <div>
        <h1>{{name}}</h1>

    </div>
</template>

<!--1.定义home标签  -->
<template id="homeTem">
    <div>
        <h1>{{name}}</h1>
        <dog></dog>
    </div>
</template>

<!--1.导入vue.js  -->
<script src="../js/vue.js"></script>

<script>
    let dog = {

        data() {

            return {
                name: "哈士奇拆家狂魔"
            }
        },
        //3.准备模板标签
        template: "#dogTem"
    }

    //2.定义组件对象
    let home = {

        data() {

            return {
                name: "这是家里"
            }
        },
        //3.准备模板标签
        template: "#homeTem",

        //在home中引用局部组件 必须先声明之后调用
        components: {
            dog
        }

    }

    const app = new Vue({
        el: "#app",
        components: {
            //1.定义home组件
            home,
            dog


        }
    })
</script>

13.4关于全局组件和局部组件的关系

<!--规则：
 1.全局组件：在组件的任意位置都可以调用
 2.局部组件：局部组件只能在指定的对象(组件)中进行调用
 -->
<div id="app">
    <aaa></aaa>
    <bbb></bbb>
</div>


<!-- 定义全局组件的模板-->
<template id="aaaTem">
    <div>
        <h1>{{msg}}</h1>

        <!--
        全局组件不可以调用局部组件
        <p>引用</p>
        <bbb></bbb>
        -->
    </div>
</template>


<!-- 定义局部组件的模板-->
<template id="bbbTem">
    <div>
        <h1>{{msg}}</h1>
        <!--局部组件可以调用全局组件-->
        <p>引用</p>
        <aaa></aaa>
    </div>

</template>

<!--1.导入vue.js  -->
<script src="../js/vue.js"></script>

<script>

    //1.定义全局组件
    Vue.component("aaa", {
        data() {
            return {
                msg: "我是全局组件"
            }
        },
        template: "#aaaTem"
    });

    let bbb = {
        data() {
            return {
                msg: "我是局部组件"
            }
        },

        template: "#bbbTem"
    }


    const app = new Vue({
        el: "#app",
        components: {
            //局部组件的名称  组件的内容
            bbb
        }
    })
</script>

14.路由

14.1路由入门

<div id="app">

    <a href="http://www.baidu.com">百度</a>
    <!--定义路由请求地址
    1.router-link在解析之后形成a标签
    2.to在解析之后形成href属性，实现页面跳转
    带/是绝对路径，不带/是相对路径
     -->
    <router-link to="/home">家</router-link>
    <router-link to="/dog">宠物</router-link>
    <!-- 3.一般需要在当前的页面中展现新组件的内容(HTML、css、js)提前设定展现位置
     之后被渲染为div,
     router-view相当于占位符-->
    <router-view></router-view>
</div>


<!--定义home模板 -->
<template id="homeTem">
    <div>
        <h1>这里是家</h1>
    </div>
</template>

<!--定义dog模板 -->
<template id="dog">
    <div>
        <h1>这是一个二哈</h1>
    </div>
</template>
<!--1.导入JS，注意：先导入vue.js之后导入路由-->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>

<script>
    //定义home组件变量
    let homeCom = {
        template: "#homeTem"

    }

    //定义dog组件变量
    let dog = {
        template: "#dog"
    }


    /* 3.实现请求与路由的绑定，定义路由对象
     routes:是一个数组的结构，数组中包含了对象的结构
    path:拦截请求的路径名称
    component:组件的名称
     */
    const router = new VueRouter({
        routes: [
            {path: "/", redirect: "/home"},
            {path: "/home", component: homeCom},
            {path: "/dog", component: dog}
        ]
    });


    //4.将路由对象与VUE实例绑定
    const app = new Vue({
        el: "#app",
        router
    })
</script>

14.2路由嵌套

<div id="app">

    <a href="http://www.baidu.com">百度</a>
    <!--定义路由请求地址
    1.router-link在解析之后形成a标签
    2.to在解析之后形成href属性，实现页面跳转
    带/是绝对路径，不带/是相对路径
     -->
    <router-link to="/home">家</router-link>
    <router-link to="/dog">宠物</router-link>
    <router-link to="/zoo">动物园</router-link>
    <!-- 3.一般需要在当前的页面中展现新组件的内容(HTML、css、js)提前设定展现位置
     之后被渲染为div,
     router-view相当于占位符-->
    <router-view></router-view>
</div>


<!--定义home模板 -->
<template id="homeTem">
    <div>
        <h1>这里是家</h1>
    </div>
</template>

<!--定义dog模板 -->
<template id="dog">
    <div>
        <h1>这是一个二哈</h1>
    </div>
</template>

<!--定义zoo模板 -->
<template id="zoo">
    <div>
        <h1>这里是动物园</h1>
        <router-link to="/zoo/lion">狮子</router-link>
        <router-link to="/zoo/tiger">老虎</router-link>
        <!-- 设定路由的占位符-->
        <router-view></router-view>
    </div>
</template>

<template id="lion">
    <div>
        <h1>我是小狮子</h1>
    </div>
</template>

<template id="tiger">
    <div>
        <h1>我是大老虎</h1>
    </div>
</template>

<!--1.导入JS，注意：先导入vue.js之后导入路由-->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>

<script>
    //定义home组件变量
    let homeCom = {
        template: "#homeTem"

    }

    //定义dog组件变量
    let dog = {
        template: "#dog"
    }

    //定义zoo组件变量
    let zoo = {
        template: "#zoo"

    }
    //定义lion组件变量
    let lion = {
        template: "#lion"

    }

    //定义tiger组件变量
    let tiger = {
        template: "#tiger"

    }
    /* 3.实现请求与路由的绑定，定义路由对象
     routes:是一个数组的结构，数组中包含了对象的结构
    path:拦截请求的路径名称
    component:组件的名称
     */
    const router = new VueRouter({
        routes: [
            {path: "/", redirect: "/home"},
            {path: "/home", component: homeCom},
            {path: "/dog", component: dog},
            {
                path: "/zoo", component: zoo,
                children: [
                    {path: "/zoo/lion", component: lion},
                    {path: "/zoo/tiger", component: tiger}
                ]
            }

        ]
    });


    //4.将路由对象与VUE实例绑定
    const app = new Vue({
        el: "#app",
        router
    })
</script>