Vue

1.Vue引言

渐进式 JavaScript框架 ---摘自官网

# 渐进式
  1、易用 html css javascript
  2、高效 开发前端页面 非常高效
  3、灵活 开发灵活 多样性
	
# 总结
	Vue是一个javascript框架
	
# 后端服务端开发人员
	Vue 渐进式javascript框架；让我们通过操作很少的DOM，甚至不需要操作页面中任何DOM元素，就很容易完成数据和视图的锁定 双向绑定 MVVM
	
注意：日后使用Vue过程中不要在引入jquery框架
	
前端发展史：htmlcss ---> javascript ---> jquery ---> angularjs ---> Vue
	
# Vue 作者
	尤雨溪

2.Vue入门

2.1下载vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 Vue第一个入门应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue第一个案例</title>
</head>
<body>

    <div id="app">

        {{ msg }}  {{username}}  {{pwd}}
        <br>
        <span>
            {{ username }}
            <h1>
                {{ msg }}
            </h1>
        </span>

    </div>

    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",    //用来给Vue实例定义一个作用范围
            data:{        //用来给Vue实例定义一些相关数据
                msg:"你好，北京欢迎你！",
                username:"张三",
                pwd:"123",
            },
        });
    </script>

</body>
</html>

效果如下：

# 总结：
	1.vue实例（对象）中el属性：代表Vue的作用范围 日后在Vue的作用范围内可以使用Vue的语法
	2.vue实例（对象）中data属性：用来给Vue实例绑定一些相关数据，绑定的数据可以通过{{变量名}}在vue的作用范围内去做
	3.在使用{{}}进行获取data中数据时，可以在{{}}中书写表达式、运算符、调用相关方法、以及逻辑运算等
	4.el属性中可以书写任意的CSS选择器[jquery选择器],但是使用vue开发时推荐使用id选择器

3.v-text和v-html

3.1v-text

v-text：用来获取data中数据将数据以文本的形式渲染到指定标签内部，类似于javascript中innerText

    <div id="app">
        <span> {{ msg }} </span>
        <span v-text="msg"></span>
    </div>

    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",    //用来给Vue实例定义一个作用范围
            data:{        //用来给Vue实例定义一些相关数据
                msg:"你好，北京欢迎你！",
            },
        });
    </script>

效果图如下：

# 总结
	1.{{}}（插值表达式）和v-text获取的区别在于 
		a.使用v-text取值会将标签中原有的数据覆盖  使用插值表达式的形式不会覆盖标签原有的数据
		b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁（会显示插值表达式后再出现想要的值）

3.2v-html

v-html:用来获取data中数据，将数据含有的html标签先解析再渲染到指定标签的内部类似javascript中的innnerHtml

<div id="app">
        <span> {{ msg }} </span>
        <br>
        <span v-text="msg"></span>
        <br>
        <span v-html="msg"> </span>
    </div>

    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",    //用来给Vue实例定义一个作用范围
            data:{        //用来给Vue实例定义一些相关数据
                msg:"<a href=''>北京欢迎你！</a>",
            },
        });
    </script>

效果图如下：

4.Vue中事件绑定(v-on)

v-on:类似于javascript的onclick的on

4.1绑定事件语法

    <div id="app">
        <h2>{{ message }}</h2>
        <h2 v-text="message"></h2>
        <h2>年龄：{{ age }}</h2>
        <br>
        <input type="button" value="点我改变年龄" v-on:click="changeage">
    </div>
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"hello world!",
                age:23,
            },
            methods:{ //method 用来定义vue中事件
                changeage:function () {
                    //在函数中获取vue事例中data的数据  在事件函数中this就是vue实例
                    //console.log(this);
                    //this.age = this.age+1;
                    this.age++;
                }
            }
        });
    </script>

效果图如下：

# 总结
	事件   事件源：发生事件dom元素  事件：发生特定的动作 click... 监听器：发生特定动作之后的时间处理程序 通常是js中的函数
	1.在vue中绑定事件是通过v-on指令来完成的  v-on:事件名 如  v-on:click
	2.在v-on:事件名的赋值语句中当前事件触发调用的函数名
	3.在vue中事件的函数同一定义在Vue事例的methods属性中
	4.在vue定义的事件中this指的就是当前的vue实例，日后可以在事件中通过使用this获取vue实例中的相关数据

4.2Vue事件的简化语法

	<div id="app">
        <h2>{{ age }}</h2>
        <input type="button" value="通过v-on事件修改年龄+1" v-on:click="changeage">
        <input type="button" value="通过@绑定事件修改年龄-1" @click="editage">
    </div>
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                age:23,
            },
            methods:{ //method 用来定义vue中事件
                changeage:function () {
                    this.age++;
                },
                editage:function () {
                    this.age--;
                }
            }
        });
    </script>

效果图如下：

# 总结
	1.日后在vue中绑定事件时可以通过@符号形式 简化  v-on的事件绑定
	2.同时changeage:function(){} 可以写成  changeage(){}

4.3 Vue事件参数传递

    <div id="app">
        <span>{{ count }}</span>
        <input type="button" value="改变count为指定的值" @click="changecount(23, 'xiaohei')">
    </div>
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                count:1,
            },
            methods:{ //method 用来定义vue中事件
                changecount:function (count, name) {
                    this.count = count;
                    alert(name);
                }
            }
        });
    </script>

效果图如下：

# 总结
	1.在使用事件时，可以直接在调用处给时间进行参数传递，在事件定义处通过定义对应变量直接接收传递的参数

5.v-show v-if v-bind

5.1 v-show

v-show：用来控制页面中的某个元素是否展示底层控制是标签display属性

	<div id="app">
        <h2 v-show="false">I am your father</h2>
        <h2 v-show="show">I am your father</h2>
        <input type="button" value="展示隐藏标签" @click="showmsg">
    </div>
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                show:false,
            },
            methods:{ //method 用来定义vue中事件
                showmsg:function () {
                    this.show = !this.show;
                }
            }
        });
    </script>

效果图如下：

# 总结
	1.在使用v-show时可以直接书写boolean值控制元素展示，也可以通过变量控制标签展示和隐藏
	2.在v-show中可以通过boolean表达式控制标签的展示和隐藏

5.2 v-if

v-if：用来控制页面元素是否展示底层控制是DOM元素操作DOM

	<div id="app">
        <h2 v-if="false">I am your father</h2>
        <h2 v-if="show">I am your father</h2>
    </div>
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                show:false,
            },
            methods:{ //method 用来定义vue中事件

            }
        });
    </script>

5.3 v-bind

v-bind：用来绑定标签的属性从而通过vue动态改变标签的属性

	 <div id="app">
        <img width="300" v-bind:title="皮卡丘" v-bind:class="{aa:showCss}" v-bind:src="src" alt="">
        <input type="button" value="动态控制加入样式" @click="addShowCss">
        <input type="button" value="动态改变图片" @click="changeSrc">
    </div>
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                showCss:true,
                src:"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1596078700&di=690f5b5b14546cdf4746deb67cda66dd&src=http://dmimg.5054399.com/allimg/pkm/pk/13.jpg",
            },
            methods:{ //method 用来定义vue中事件
                addShowCss:function () {
                    this.showCss = !this.showCss;
                },
                changeSrc:function () {
                    this.src = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1925088662,1336364220&fm=26&gp=0.jpg';
                }
            }
        });

效果图如下：

5.4 v-bind简化写法

vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名简化之后 :属性名

    <div id="app">
        <img width="300" :title="皮卡丘" :class="{aa:showCss}" :src="src" alt="">
        <input type="button" value="动态控制加入样式" @click="addShowCss">
        <input type="button" value="动态改变图片" @click="changeSrc">
    </div>
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                showCss:true,
                src:"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1596078700&di=690f5b5b14546cdf4746deb67cda66dd&src=http://dmimg.5054399.com/allimg/pkm/pk/13.jpg",
            },
            methods:{ //method 用来定义vue中事件
                addShowCss:function () {
                    this.showCss = !this.showCss;
                },
                changeSrc:function () {
                    this.src = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1925088662,1336364220&fm=26&gp=0.jpg';
                }
            }
        });
    </script>

6.v-for的使用

v-for：作用就是用来对对象进行遍历的（数组也是对象的一种）

<div id="app">
    <span>{{ user.name }} {{ user.age }}</span>
    <br>
    <!--通过v-for遍历对象-->
    <span v-for="(value, key, index) in user">
        {{index}} : {{key}} : {{value}}
    </span>
    <!--通过v-for遍历数组-->
    <ul>
        <li v-for="a,index in arr">
            {{index}}:{{a}}
        </li>
    </ul>
    <!--通过v-for遍历数组中对象
    -->
    <ul>
        <li v-for="user,index in users" :key="user.id">
            {{ index+1 }}===={{ user.name }}===={{ user.age }}===={{ user.content }}
        </li>
    </ul>
</div>

<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",    //用来给Vue实例定义一个作用范围
        data: {        //用来给Vue实例定义一些相关数据
            user:{name:"xiaohei", age:23},
            arr:["北京校区", "天津校区", "河南校区"],
            users:[
                {id:"1", name:"xiaochen", age:23, content:"I am your father"},
                {id:"2", name:"xiaofeng", age:33, content:"I am your father too"},

            ]
        },
        methods: {

        }
    });
</script>

效果图如下：

# 总结
	1.在使用v-for的时候一定要注意加入:key用来给vue内部提供重用和排序的唯一key

7.v-model 双向绑定

v-model:用来绑定标签元素的值与vue实例对象中data数据保持一致，从而实现双向的数据绑定机制

<div id="app">
    <input type="text" v-model="message">
    <span>{{message}}</span>
    <hr>
    <input type="button" value="改变Data中的值" @click="changeValue">
</div>
<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",    //用来给Vue实例定义一个作用范围
        data: {        //用来给Vue实例定义一些相关数据
            message:""
        },
        methods: {
            changeValue:function () {
                this.message = "嘿嘿";
            }
        },
    });
</script>

效果图如下：

# 总结
	1.使用v-model指定可以实现数据的双向绑定
	2.所谓双向绑定 表单中数据变化导致vue实例data数据变化  vue实例中data数据的变化导致表单中数据变化  称之为双向绑定
	
# MVVM架构  双向绑定机制
	Model： 数据  Vue实例中绑定的数据
	
	VM：ViewModel  监听器
	
	View： 页面  页面展示的数据

8.事件修饰符

修饰符：用来和事件连用，用来决定事件的触发条件或者是阻止事件的触发机制

# 1.常用的事件修饰符
	.stop
	.prevent
	.capture
	.self
	.once
	.passtive

8.1 stop事件修饰符

.stop：用来阻止事件冒泡

<div id="app">

    <div class="aa" @click="divClick">
        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
    </div>

</div>

<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",    //用来给Vue实例定义一个作用范围
        data: {        //用来给Vue实例定义一些相关数据

        },
        methods: {
            btnClick:function () {
                alert('button按钮被点击了');
            },
            divClick:function () {
                alert('div被点击了');
            }
        },
    });
</script>

8.2prevent事件修饰符

.prevent：用来阻止标签的默认行为

<!--用来阻止事件的默认行为-->
    <a href="http://baidu.com/" @click.prevent="aClick">百度</a>

8.3self事件修饰符

.self：用来针对当前标签的事件触发 =======只关心自己标签上触发的事件不监听事件冒泡

 <!--只触发标签自身的事件-->
    <div class="aa" @click.self="divClick">
        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
        <input type="button" value="按钮1" @click="btnClick1">
    </div>

8.4once事件修饰符

.once：就是让指定事件只触发一次

<!--
    .prevent    ：用来阻止事件的默认行为
    .once       ：用来只执行一次特定的事件
-->
<a href="http://baidu.com/" @click.prevent.once="aClick">百度</a>

9.按键修饰符

作用：用来与键盘中按键事件绑定在一起，用来修饰特定的按键事件的修饰符

# 按键修饰符
  	.enter
	.tab
	.delete (捕获“删除”和“退格”键)
	.esc
	.space
	.up
	.down
	.left
	.right

9.1enter回车键

.enter：用来在触发回车按键之后触发的事件

<!--enter  按键修饰符  在回车之后触发的事件-->
<input type="text" v-model="msg" @keyup.enter="keyups">

9.2tab键

.tab用来捕获当tab键执行到当前的标签时才会触发

<input type="text" @keyup.tab="keytabs">

10.Axios基本使用

10.1引言

Axios是一个异步请求技术，核心作用就是用来在页面中发送异步请求，并获取对应数据在页面中渲染页面的局部更新技术==Ajax

10.2Axios第一个程序

中文网站：https://www.kancloud.cn/yunye/axios/234845

安装：https://unpkg.com/axios/dist/axios.min.js

10.2.1GET方式的请求

//发送GET方式请求
axios.get("http://localhost:8080/user/findAll?name=xiaochen").then(function(response){
	console.log(response.data);
}).catch(function(err){
    console.log(err); 
});

10.2.2POST方式的请求

//发送POST方式请求
axios.post("http://localhost:8989/user/save",{
    name:"xiaochen",
    age:23,
    phone:1234235232
}).then(function(response){
    console.log(response.data);
}).catch(function(err){
    console.log(err);
});

10.2.3axios并发请求

并发请求：将多个请求在同一时刻发送到后端服务接口，最后在集中处理每个请求的响应结果

//1.创建一个查询所有请求
function findAll(){
    return axios.get("http://localhost:8989/user/findAll?name=xiaochen");
}
//2.创建一个保存的请求
function save(){
    return axios.post("http://localhost:8989/user/save",{
        name:"xiaochen",
    	age:23,
    	phone:1234235232
    });
}
//3.并发执行
axios.all([findAll(), save()]).then(
	axios.spread(function(res1, res2){
        console.log(res1.data);
        console.log(res2.data);
    })
);

11.Vue生命周期

声明周期钩子 ====> 生命周期函数

# Vue生命周期总结
  1.初始化阶段
    //1.生命周期中第一个函数，该函数在执行时Vue实例仅仅完成了自身事件的锁定和生命周期函数的初始化工作，Vue实例中还没有Data el methods相关属性
    beforeCreate(){
    	console.log("beforeCreate:"+this.msg);
    }
    //2.生命周期中第二个函数，该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
    created(){
    	console.log("created:"+this.msg);
    }
    //3.生命周期中第三个函数，该函数在执行时Vue将el中指定作用范围作为模板编译
    beforeMount(){
    	console.log("beforeMount:"+document.getElementById("sp").innerText);
    }
    //4.生命周期第四个函数，该函数在执行过程中，已经将数据渲染到界面中并且已经更新页面
    mounted(){
    	console.log("Mounted:"+document.getElementById("sp").innerText);
    }
    
 2.运行阶段
    //5.生命周期中第五个函数，该函数是data中数据发生变化时执行，这个事件执行仅仅是Vue实例中data数据变化，页面显示的依然是原始数据
    beforeUpdate(){
    	console.log("beforeUpdate:"+this.msg);
    	console.log("beforeUpdate:"+document.getElementById("sp").innerText);
    }
    //6.生命周期第六个函数，该函数执行时data中数据发生变化，页面中数据已经和data中数据一致
    updated(){
    	console.log("update:"+this.msg);
    	console.log("update:"+document.getElementById("sp").innerText);
    }
    
 3.销毁阶段
    //7.生命周期第七个函数，该函数执行时，Vue中所有数据 method component都没销毁
    beforeDestory(){
    	
    }
    //8.生命周期的第八个函数，该函数执行时，Vue实例彻底销毁
    destoryed(){
    	
    }

12.Vue中组件(Component)

12.1组件作用

组件作用：用来减少Vue实例对象中代码量，日后在使用Vue开发过程中，可以根据不同的业务功能将页面中划分不同的多个组件，然后由多个组件去完成整个页面的布局，便于日后使用Vue进行开发时对页面的管理，方便开发人员维护。

12.2组件的使用

12.2.1全局组件注册

说明：全局组件注册给Vue实例，日后可以在任意Vue实例的范围内使用该组件

1.开发全局组件
	Vue.component('login',{
        template:'<div><h1>用户登录</h1></div>'
    })
2.使用全局组件  在Vue范围内
	<login></login>

# 注意：
	1.Vue.component用来开发全局组件 参数1：组件名称   参数2：组件配置对象 template：用来书写组件的html代码(注意：在template中必须有且只有一个root元素)
	2.使用时需要在Vue的偶用范围内根据组件名使用Vue组件
	3.如果在注册组件过程中使用驼峰命名组件的方式，在使用组件时，必须将驼峰的所有单词小写加入-线进行使用，例：userLogin======user-login

12.2.2局部组件注册

说明：通过组件注册给对应Vue实例中一个components属性来完成组件注册，这种方式不会对Vue实例造成累加

第一种开发方式

  //局部组件登录模块声明
    let login = {
        template: '<div><h1>用户登录</h1></div>'
    }

    const app = new Vue({
        el: "#app",    //用来给Vue实例定义一个作用范围
        data: {},      //用来给Vue实例定义一些相关数据
        methods: {},   //用来定义事件的方法
        components:{   //用来注册局部组件
            login: login	//注册局部组件
        },
    });
//局部组件使用 在Vue实例范围内
<login></login>

第二种开发方式

//1.声明局部组件模板 template标签 注意：在Vue实例作用范围外声明
<template id="loginTemplate">
    <h1>用户登录</h1>
</template>
//2.定义变量用来保存模板配置对象
    let login = {			
        template: '#loginTemplate'	//使用自定义template标签选择器即可
    };
//3.注册组件
	const app = new Vue({
        el: "#app",    //用来给Vue实例定义一个作用范围
        data: {},      //用来给Vue实例定义一些相关数据
        methods: {},   //用来定义事件的方法
        components:{   //用来注册局部组件
            login: login//或者直接写  login
        },
    });
//4.局部组件使用 在Vue实例范围内
	<login></login>

12.3Prop的使用

作用：props用来给组件传递相应静态数据或者是动态数据的

12.3.1通过在组件上声明静态数据传递给组件内部

//1.声明组件模板配置对象
    let login = {
            template:"<div><h1>欢迎：{{ userName }} {{ age }}</h1></div>",
            props:['userName', 'age'] //prop作用  用来接收使用组件时通过组件标签传递的数据
        }
//2.注册组件
     const app = new Vue({
        el: "#app",    //用来给Vue实例定义一个作用范围
        data: {},
        methods: {},
        components:{
            login //组件注册
        }
    });
//3.通过组件完成数据传递
	<login user-name="小成" age="23"></login>

# 总结
	1.使用组件时可以在组件上定义多个属性以及对应数据
	2.在组件内部可以通过props数组声明多个定义在组件上多的属性名 日后可以在组件中通过{{属性名}}方式获取组件中的属性值

12.3.2通过在组件上声明动态数据传递给组件内部

//1.声明组件模板对象
	const login = {
        template:'<div><h2>欢迎：{{ name }}</h2></div>',
        props:['name']
    }
//2.注册局部组件
    const app = new Vue({
        el: "#app",    //用来给Vue实例定义一个作用范围
        data: {        //用来给Vue实例定义一些相关数据
            username:"小白"
        },
        methods: {},
        components:{
            login //注册组件
        }
    });
//3.使用组件
	<login :name="username"></login>  //使用v-bind形式将数据绑定Vue实例中data属性，日后data属性发生变化，组件内部数据跟着变化。

12.3.3prop的单向数据流

单向数据流：所有的prop都使用其父子prop之间形成了一个**单项下行绑定**：父级prop的更新会向下流动到子组件中，但是反过来则不行。

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

<div id="app">
    <login :username="username"></login>
</div>
<!--引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const login = {
        template: '<div><h1>欢迎：{{name}}</h1></div>',
        data(){
            return {
                name: this.username
            };
        },
        props:['username']
    };
    const app = new Vue({
        el: "#app",    //用来给Vue实例定义一个作用范围
        data: {        //用来给Vue实例定义一些相关数据
            username:"小白"
        },
        methods: {},
        components:{
            login  //注册组件
        }
    });
</script>

12.4组件中定义数据和事件使用

1.组件中定义属于组件的数据

//组件声明的配置对象
    const login = {
        template:'<div><h1>{{msg}}百知教育</h1><ul><li v-for="item,index in lists">{{index}}{{item}}</li></ul></div>',
        data(){  //使用data函数方式定义组件的数据 在template的html代码中通过差值表达式直接获取
            return{
                msg:"hello",
                lists:["java", "spring", "springboot"]
            }//组件自己内部数据
        }
    }

2.组件中事件定义

const login = {
        template:'<div><input type="button" value="点我触发组件中的事件" @click="change"></div>',
        data(){
            return {
                name:'小成'
            };
        },
        methods: {
            change(){
                alert(this.name);
                alert("触发事件");
            }
        }
    }

# 总结
	1.组件中定义事件和直接在Vue中定义事件基本一致，直接在组件内部对应的html代码上加入@事件名=函数名即可
	2.在组件内部使用methods属性用来定义对应的事件函数即可，事件参数中this指向多的是当前组件的实例

12.5向子组件中传递事件并在子组件中调用该事件

在子组件中电泳传递过来的相关事件必须使用this.$emit('函数名')方式调用

//1.声明组件
	const login = {
        template:"<div><h1>百知教育</h1> <input type='button' value='点我' @click='change'></div>",
        props:['name'],
        data(){
            return {
                uname:this.name
            };
        },
        methods: {
            change(){
                //调用vue实例中函数
                this.$emit('aaa');  //调用组件传递过来的其他函数时需要使用this.$emit('函数名调用')
            }
        }
    };
//2.注册组件
    const app = new Vue({
        el: "#app",    //用来给Vue实例定义一个作用范围
        data: {
            username:"小成"
        },
        methods: {
            findAll(){	//一个事件函数 将这个函数传递给子组件
                alert("vue实例中定义函数");
            }
        },
        components:{
            login
        }
    });
//3.使用组件
	<login :name="username" @aaa="findAll"></login>    =========>在组件内部使用 this.$emit("aaa")

13.Vue中路由(VueRouter)

13.1路由

路由：根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理

13.2作用

用来在Vue中实现组件之间的动态切换

13.3使用路由

1.引入路由

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>   //vue 路由js

2.创建组件

 //声明组件模板
const login = {
    template:'<h1>登录</h1>'
}
const register = {
    template:'<h1>注册</h1>'
}

3.定义路由对象的规则

 //创建路由对象
const router = new VueRouter({
    routes:[
        {path: '/login', component:login},   //path:路由路径  component:路径对应的组件
        {path: '/register', component: register}
    ]
});

4.将路由对象注册到vue实例

const app = new Vue({
    el: "#app",    //用来给Vue实例定义一个作用范围
    data: {},
    methods: {},
    router: router//设置路由对象
});

5.在页面中显示路由组件

<router-view></router-view>

6.根据链接切换路由

<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>

13.4router-link使用

作用：用来替换我们在切换路由时使用a标签切换路由

好处：可以自动给路由路径加入#不需要手动加入

<router-link to="/login" tag="button">我要登录</router-link>
<router-link to="/register" tag="button">我要注册</router-link>

# 总结：
	1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号，直接书写路由路径
	3.router-link to属性用来书写路由路径 tag属性：用来将router-link渲染成指定的标签

13.5默认路由

作用：用来在第一次进入界面时显示一个默认的操作

const router = new VueRouter({
    routes:[
        //{path:'/', component:login},
        {path:'/', redirect:'/login'},
        {path: '/login', component:login},
        {path: '/register', component: register}
    ]
});

13.6路由中参数传递

第一种方式传递参数传统方式

1.通过？号形式拼接参数

<router-link to="/login?id=21&name=zhangsan">我要登录</router-link>

2.组件中获取参数

const login = {
        template:'<h1>登录</h1>',
        data(){return {}},
        methods:{},
        created(){
            console.log("========"+this.$route.query.id+"------------"+this.$route.query.name);
        }
    }

第二种方式传递参数 restful

1.通过使用路径方式传递参数

<router-link to="/register/21/张三">我要注册</router-link>

const router = new VueRouter({
routes:[
{path: '/register/:id/:name', component: register}
]
});

2.组件中获取参数

const register = {
    template:'<h1>注册</h1>',
    created(){
        console.log("注册组件中id："+this.$route.params.id+"注册组件"+this.$route.params.name);
    }
}

13.7嵌套路由

声明最外层和内层路由

<template id="product">
    <div>
        <h1>商品管理</h1>
        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/edit">商品编辑</router-link>
        <router-view></router-view>
    </div>
</template>

//声明组件模板
const product={
    template:'#product'
};

const add = {
    template: '<h1>商品添加</h1>'
};

const edit = {
    template: '<h1>商品编辑</h1>'
};

创建路由对象含有嵌套路由

//定义路由对象
const router=new VueRouter({
    routes:[
        {
            path:'/product',
            component:product,
            children:[
                {path:'add', component: add},
                {path:'edit', component: edit},
            ]
        },
    ]
});

注册路由对象

const app = new Vue({
    el: "#app",    //用来给Vue实例定义一个作用范围
    data: {},
    methods: {},
    router,  //定义路由对象
});

测试路由

<router-link to="/product">商品管理</router-link>
<router-view></router-view>

14.Vue CLI脚手架

14.1 什么是CLI

命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）。

14.2 什么是Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue脚手架之后我们开发的页面将是一个完整系统（项目）。

14.3Vue CLI优势

通过 @vue/cli 实现的交互式的项目脚手架。通过执行命令方式下载相关依赖。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级；一条命令
- 基于 webpack 构建，并带有合理的默认配置； webpack：项目打包方式，编译好的项目源码===>部署到服务器上直接使用
- 可以通过项目内的配置文件进行配置；默认配置文件，通过修改默认配置文件达到自己想要的项目环境。
- 可以通过插件进行扩展。 vue v-charts elementui
一个丰富的官方插件集合，集成了前端生态中最好的工具。Node.js(tomcat) Vue VueRouter webpack yarn
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

14.4 Vue CLI安装

1.环境准备

# 1.下载node.js
	http://nodejs.cn/download/
	windows系统：	.msi	安装包(exe)指定安装位置	.zip(压缩包)直接级压缩指定目录
	mac os系统：	.pkg	安装包格式自动配置环境变量	.tar.gz(压缩包)解压缩安装到指定目录
	
# 2.配置node.js环境变量
	windows系统
	1.计算机上右键属性------>高级属性------->环境配置：
		NODE_HOME = node.js安装目录
		PATH = xxxx;%NODE_HOME%
	2.mac os系统
		推荐使用.pkg安装直接配置node环境
		
# 3.验证node.js环境是否成功
	node -v
	
# 4.npm介绍
	node package manager  nodejs包管理工具  前端主流技术    npm进行同一管理
	maven 	管理java后端依赖	远程仓库（中心仓库） 阿里云镜像
	npm		管理前端系统依赖   远程仓库（中心仓库） 配置淘宝镜像

# 5.配置淘宝镜像
	npm config set registry https://registry.npm.taobao.org
	npm config get registry
	
# 6.配置npm下载依赖位置
	windows:
        npm config set cache "D:\nodereps\npm-cache"
        npm config set prefix "D:\nodereps\npm_global"
	mac os:
        npm config set cache "/users/nodereps\npm-cache"
        npm config set prefix "D:\nodereps\npm_global"
	
# 7.验证node.js环境配置
	npm config ls
        ; userconfig C:\Users\lenovo\.npmrc
        cache = "D:\\nodereps\\npm-cache"
        prefix = "D:\\nodereps\\npm_global"
        registry = "https://registry.npm.taobao.org/"

2.安装脚手架

# 0.卸载脚手架
	npm uninstall -g @vue/cli //卸载3.x版本脚手架
	npm uninstall -g vue-cli //卸载2.x版本脚手架
	
# 1.Vue Cli官方网站
	https://cli.vuejs.org/zh/guide/
	
# 2.安装Vue Cli
	npm install -g vue-cli
注：测试一下vue -V,如果现实‘vue’不是内部或外部命令，则需要配置vue的环境变量，具体操作：在环境变量中Path新增vue.cmd所在文件地址即可

3.第一个vue脚手架项目

# 1.创建vue脚手架第一个项目
	vue init webpack 项目名
# 2.创建第一个项目
	hello --------------------->项目名
        -build	--------------->用来使用webpack打包使用build依赖
        -config	--------------->用来做整个项目配置目录
        -node_modules --------->用来管理项目中使用的依赖
        -src	--------------->用来书写vue源代码	[重点]
        	+assets	----------->用来存放静态资源  [重点]
        	+components	------->用来书写Vue组件  [重点]
        	+router	----------->用来项目中的路由 [重点]
        	App.vue	----------->项目中根组件 [重点]
        	main.js ----------->项目中主入口 [重点]
        -static	--------------->其他静态
        -.babelrc ------------->将es6语法转为es5运行
        -.editorconfig -------->项目编辑配置
        -.gitignore ----------->git版本控制忽略文件
        -.postcssrc.js	------->源码相关js
        -index.html	----------->项目主页
        -package.json --------->类似与pom.xml  依赖管理 jQuery 不建议手动修改
        -package-lock.json ---->对packetage.json加锁
        -README.md ------------>项目说明文件
# 3.如何运行（在项目的根目录中执行）
  	npm start 运行前端系统

# 4.如何访问
	http://localhost:8080

# 5.Vue Cli中项目开发方式
	注意：一切皆组件  一个组件中：js代码、html代码、css样式
	1.VueCli开发方式是在项目中开发一个个组件对应一个一个业务功能模块，日后可以将多个组件组合到一起形成一个前端系统
	2.日后在使用vue cli进行开发时不再书写html，编写的是一个个的组件（组件后缀.vue结尾的文件），日后打包时vue cli会将组件编译成运行的html文件

4.如何开发Vue脚手架

注意：在Vue cli中一切皆组件

15.在脚手架中使用axios

15.1安装axios

# 1.安装axios
	npm install axios --save-dev
	
# 2.配置main.js中引入axios
	import axios from 'axios'

//Vue支持异步请求 Vue.prototype.$http : Vue内部异步
	Vue.prototype.$http=axios;

16.Vue Cli脚手架项目打包和部署

# 1.在项目的根目录中执行如下命令：
	npm run build
	
	注意：vue脚手架打包的项目必须在服务器上运行不能直接双击运行

# 2.打包之后当前项目中的变化
	在打包之后项目中出现dist项目，dist目录就是vue脚手架下项目生产目录或者说是直接部署目录

# 3.与springboot集成
	将dist文件复制到springboot项目的resources目录下的static文件中，启用路径localhost:端口号(后端)/项目名/dist/index.html,如果出现页面空白无法显示等情况，注意修改index.html的src地址。

前端技术--Vue

Vue

1.Vue引言

2.Vue入门

2.1下载vue.js

2.2 Vue第一个入门应用

3.v-text和v-html

3.1v-text

3.2v-html

4.Vue中事件绑定(v-on)

4.1绑定事件语法

4.2Vue事件的简化语法

4.3 Vue事件参数传递

5.v-show v-if v-bind

5.1 v-show

5.2 v-if

5.3 v-bind

5.4 v-bind简化写法

6.v-for的使用

7.v-model 双向绑定

8.事件修饰符

8.1 stop事件修饰符

8.2prevent事件修饰符

8.3self事件修饰符

8.4once事件修饰符

9.按键修饰符

9.1enter回车键

9.2tab键

10.Axios基本使用

10.1引言

10.2Axios第一个程序

10.2.1GET方式的请求

10.2.2POST方式的请求

10.2.3axios并发请求

11.Vue生命周期

12.Vue中组件(Component)

12.1组件作用

12.2组件的使用

12.2.1全局组件注册

12.2.2局部组件注册

12.3Prop的使用

12.3.1通过在组件上声明静态数据传递给组件内部

12.3.2通过在组件上声明动态数据传递给组件内部

12.3.3prop的单向数据流

12.4组件中定义数据和事件使用

1.组件中定义属于组件的数据

2.组件中事件定义

12.5向子组件中传递事件并在子组件中调用该事件

13.Vue中路由(VueRouter)

13.1路由

13.2作用

13.3使用路由

13.4router-link使用

13.5默认路由

13.6路由中参数传递

13.7嵌套路由

14.Vue CLI脚手架

14.1 什么是CLI

14.2 什么是Vue CLI

14.3Vue CLI优势

14.4 Vue CLI安装

1.环境准备

2.安装脚手架

3.第一个vue脚手架项目

4.如何开发Vue脚手架

15.在脚手架中使用axios

15.1安装axios

16.Vue Cli脚手架项目打包和部署

推荐阅读