Vue的安装

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

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

Vue的第一个入门应用

<div id="app">
    <h3>{{msg}}</h3>
    <h3>{{msg+'!'}}</h3>
    <h3>{{msg.toUpperCase()}}</h3>
    <h3>{{num}}</h3>
    <h3>{{text.name}}</h3>
    <h3>{{text.age}}</h3>
    <h3>{{lists[0]}}</h3>
    <h3>{{lists[1]}}</h3>
    <h3>{{lists[2]}}</h3>
</div>

<!-- 引入Vue.js -->
<!-- 建议放在下面应用，不然会渲染不出来 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",//element 用来给Vue实例定义一个作用范围
        data:{//用来给Vue实例定义一个作用范围
            msg:" Hello World!",
            username:"yaoqi",
            age:"123"
        },
    });
</script>

# 总结：
    1. vue实例(对象)中el属性：代表Vue的作用范围，日后在Vue的作用范围内都可以使用Vue的语法
    2. vue实例(对象)中data属性：用来给Vue实例绑定一些相关数据，绑定的数据可以通过{{变量名}}在Vue的作用范围内取出
    3. 在使用{{}}进行获取data中数据时，可以在{{}}中书写表达式
    4. el属性中可以书写任意的CSS选择器(jquery选择器)，但是在VUE开发还是推荐使用id选择器

v-text 和 v-html

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

    <div id="app">
        <span v-text="message"></span>
    </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!"
            }
        })
    </script>

# 总结：
    1. {{}}(差值表达式)和v-text获取数据的区别在于：
         a.使用v-text的取值会将标签中原有的数据覆盖，使用差值表达式不会覆盖原有的数据
         b.使用v-text可以避免在网络环境较差的情况下出现差值闪烁

v-html：用来获取data中数据，将数据中含有html标签先解析在渲染到指定标签的内部,类似js中的innerHtml

<div id="app">
    <span v-text="message"></span><br>
    <span v-html="message"></span>
</div>

<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            message:"<a href=''>hello world!</a>"
        }
    })
</script>

Vue中事件的定义和使用

• 绑定事件语法

<div id="app">
    <h3>年龄:{{age}}</h3>
    <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:{
            age:23,
        },
        methods:{
            changeage:function () {
                alert("点击触发")
            }
        }
    })

</script>

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

• Vue中事件的简化语法

<div id="app">
    <h2>{{age}}</h2>

    <input type="button" value="通过v-on事件修改年龄" 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",  //element:用来指定vue作用方位
        data:{
            age:23  //data: 用来定义vue实例中相关数据
        },
        methods:{
            changeage:function () {
                this.age++;
            },
            editage(){
                this.age--;
            }
        }  //methods:用来定义事件的处理函数
    })

</script>

# 总结：
    1. 日后在vue中绑定事件时可以通过@符号形式 简化 v-on事件绑定
    2. 在Vue中事件定义存在两种写法：
        1. 函数名:function(){} 推荐
        2. 函数名(){}

• Vue事件中的参数传递

<div id="app">
    <h2>{{age}}</h2>
    <input type="button" @click="changecount(111)" value="改变count为指定的值">
</div>


<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",  //element:用来指定vue作用方位
        data:{
            age:23  //data: 用来定义vue实例中相关数据
        },
        methods:{
            changecount(count){
                this.age = count;
            }
        }
    })

</script>

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

• Vue练习

<div id="app">
    <input type="button" value="+" @click="up">
    <h2>{{count}}</h2>
    <input type="button" value="-" @click="down">
</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:{
            up(){
                if(this.count<10){
                    this.count++;
                }else{
                    alert("每个人不能超过10")
                }
            },
            down(){
                if(this.count>1){
                    this.count--;
                }else{
                    alert("不能再减了")
                }
            }
        }
    })
</script>

v-show v-if v-bind

• v-show

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

<div id="app">
    <!--   v-show:用来控制标签展示还是隐藏的    -->
    <h2 v-show="true">hello world!</h2>

    <h2 v-show="show">hello world!</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:{
            showMsg(){
                this.show=!this.show
            }
        }
    })
</script>

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

• v-if

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

<div id="app">
    <h2 v-if="true">hello world-->1</h2>
    <h2 v-if="show">hello world--->2</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:{

        }
    })
</script>

• v-bind

v-bind:用来给标签的属性从而通过vue动态修改标签的属性

<div id="app">
    
    <img v-bind:title="msg" v-bind:class="{aa:showCss}" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1594830800,2801748101&fm=26&gp=0.jpg" alt="">
    
    <input type="button" value="修改css" @click="change">
</div>

<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            msg:"香港",
            showCss:true
        },
        methods:{
            change(){
                this.showCss = !this.showCss
            }
        }
    })
</script>

• v-bind 简化写法

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

 <div id="app">
     <img :title="msg" :class="{aa:showCss}" src="" alt="">
</div>

v-for的使用

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

<div id="app">
    <!--
        通过v-for遍历对象
    -->
    <span v-for="(value,key,index) in user">
        {{index}} : {{key}} : {{value}} <br>
    </span>
    <br>

    <!--
        通过v-for遍历数组
     -->
    <ul>
        <li v-for="a in arr">
            {{a}}
        </li>
    </ul>

    <!--
        通过v-for遍历数组中的对象
        :key 便于vue内部做重用和排序
     -->
    <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",
        data: {
            user:{name:"yaoqi",age:23},
            arr:[
                "北京",
                "天津",
                "上海"
            ],
            users:[
                {id:"1",name:"yaoqi",age:1,content:"123123"},
                {id:"1",name:"xmy",age:2,content:"456456"}
            ]
        },
        methods: {},
    });
</script>

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

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",
        data: {
            message:"123"
        },
        methods: {
            changeValue(){
                this.message="hello world"
            }
        },
    });
</script>

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

记事本综合案例

<div id="app">

    <input type="text" v-model="msg"> <input type="button" value="添加到记事本" @click="save">

    <ul>
        <li v-for="item,index in lists">
            {{index+1}} {{item}} <a href="javascript:;" @click="delRow(index)">删除</a>
        </li>
    </ul>
    <br>
    <span>总数量:{{lists.length}}</span><input type="button" value="删除所有" v-show="lists.length!=0" @click="delAll">

</div>

<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            lists:["hello world","今天天气不错"],
            msg:"",
        },
        methods:{
            save(){
                this.lists.push(this.msg)
                this.msg=""
            },
            delRow(index){
                //根据下标删除数组中的某个元素
                //参数1:从哪个下标开始删除,参数2:删除几个元素
                this.lists.splice(index,1);
            },
            delAll(){
                this.lists=[]
            }
        }
    })
</script>

Vue中的事件修饰符

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

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

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",
        data:{},
        methods:{
            btnClick(){
                alert("button被点击了")
            },
            divClick(){
                alert("div被点击了")
            }
        }
    })
</script>

prevent事件修饰符

用来阻止标签的默认行为

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

self事件修饰符

用来针对当前标签的事件触发 ------只触发自己标签上的特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡

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

once事件修饰符

once 一次 作用:就是让指定事件只触发一次

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

按钮修饰符

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

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

enter回车键

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

<input type="text" v-model="msg" @keyup.enter="keyups">

tab键

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

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

Axios的基本使用

引言

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

Axios 第一个程序

中文网站 http://www.axios-js.com/docs/

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

GET方式的请求

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

POST方式的请求

//发送POST方式的请求
axios.post("http://localhost:8080/save",{
    id:5,
    username:"yaoqi",
    age:23,
    email:"45456@qq.com"
}).then(function(response){
    console.log(response.data);
}).catch(function(err){
    console.log(err)
})

axios并发请求

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

//1.创建一个查询所有的请求
function findAll() {
    return axios.get("http://localhost:8080/findAll?name=zhangsan")
}
//2.创建一个保存的请求
function save() {
    axios.post("http://localhost:8080/save",{
        id:5,
        username:"yaoqi",
        age:23,
        email:"45456@qq.com"
    }).then(function(response){
        console.log(response.data);
    }).catch(function(err){
        console.log(err)
    })
}
//3.并发执行
axios.all([findAll(),save()]).then(
    axios.spread(function (res1,res2) {//用来将一组函数的响应结果汇总处理
        console.log(res1.data);
        console.log(res1.data);
    })
);//用来发送一组并发请求

Vue结合axios完成天气查询案例

//数据接口
@CrossOrigin
@GetMapping("/find")
public Map<String,String> find(String name){
    Map<String,String> map = new HashMap<>();
    String weathers = getWeathers(name);
    map.put("message",weathers);
    return map;
}

//返回对应城市天气
public String getWeathers(String name){
    Map<String,String> weathers = new HashMap<>();
    weathers.put("北京","晴转多云A");
    weathers.put("上海","晴转多云B");
    weathers.put("广州","晴转多云C");
    weathers.put("深圳","晴转多云D");
    weathers.put("昆山","晴转多云E");
    return weathers.get(name);
}

<div id="app">
    <input type="text" v-model="name" @keyup.enter="searchCity" @keyup.delete="show"> <input type="button" value="搜索" @click="searchCity" ><br>
    <span  v-for="city in hostCitys">
        <a href="" @click.prevent="searchCitys(city)">{{city}}</a>
    </span>
    <hr>
    <span v-show="isShow"> {{name}}，今天的天气是：{{msg}}</span>
</div>


<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            hostCitys:["北京","上海","广州","深圳","昆山"],
            name:"",
            msg:"",
            isShow:false
        },
        methods:{
            searchCity(){
                let _this = this
                axios.get("http://www.localhost:8080/find?name="+this.name).then(function (response) {
                    console.log(response.data.message)
                    _this.msg=response.data.message
                    _this.isShow=true
                }).catch(function (err) {
                    console.log(err)
                })
            },
            searchCitys(name){
                this.name=name
                this.searchCity()
            },
            show(){
                this.isShow=false
            }
        }
    })
</script>

Vue 生命周期

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

<img src="https://cn.vuejs.org/images/lifecycle.png" alt="img" style="zoom:50%;" />

# Vue生命周期
    1. 初始化阶段
    2. 运行阶段
    3. 销毁阶段

• 初始化阶段

//1.生命周期中第一个函数，该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Date el methods相关属性
beforeCreate(){
   console.log("before:"+this.msg)//before:undefined
},


//2. 生命周期中的第二个函数，该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
created(){
   console.log("created:"+this.msg)//created:hello
},


//3. 生命周期中第三个函数，该函数在执行Vue将E1中指定作用范围作为模板编译
beforeMount(){
   console.log("beforeMount:"+document.getElementById("sp").innerText)
   //beforeMount:{{msg}}
},


//4.生命周期中第四个函数，该函数在执行过程中，已经将数据渲染到界面中并且已经更新页面
mounted(){
   console.log("Mount:"+document.getElementById("sp").innerText)//Mount:hello
},

• 运行状态

//5.生命周期中第五个函数，该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依旧是原始数据
beforeUpdate(){
    console.log("beforeUpdate:"+this.msg);//beforeUpdate:111111      
    console.log("beforeUpdate:"+document.getElementById("sp").innerText);
    //beforeUpdate:hello
},

//6.生命周期中第六个函数，该函数执行时data中数据发生变化，页面中的数据也发生了变化  页面中的数据已经和data中的数据一致
updated(){     
    console.log("updated:"+this.msg);//updated:111111
    console.log("updated:"+document.getElementById("sp").innerText);//updated:111111
},

• 销毁阶段

//7.生命周期第七个函数，该函数运行时，Vue中所有数据 methods compont 都没销毁
beforeDestory(){ }

//8.生命周期第八个函数，该函数执行时，Vue实例彻底销毁
destoryed(){}

Vue中组件(Component)

组件作用

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

组件使用

• 全局组件注册

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

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

2.使用全局组件，在Vue实例范围内
    <login></login>

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

• 局部组件使用

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

第一种开发方式：

//局部组件登陆模板
let login = {    //具体局部组件名称
    template:'<div><h2>用户登录</h2></div>'
};

const app = new Vue({
    el:"#app",
    data:{},
    methods:{},
    components:{      //用来注册局部组件
        login:login   //注册局部组件
    }
})

//局部组件使用 在Vue实例范围内使用
<login></login>

第二种开发方式：

//1.声明局部组件模板 template 标签  注意：在Vue实例范围外声明
<template id="loginTemplate">
    <h1>用户登录</h1>
</template>

//2.定义变量用来保存模板配置对象
let login = {    //具体局部组件名称
    template:'#loginTemplate'   //使用自定义templat标签选择器即可
};

//3.注册组件
const app = new Vue({
    el:"#app",
    data:{},
    methods:{},
    components:{      //用来注册局部组件
        login:login   //注册局部组件
    }
})

Prop的使用

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

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

//1.声明组件模板配置对象
let login={
    template:"<div><h1>欢迎:{{userName}},年龄:{{age}}</h1></div>",
    props:['userName','age']   //props作用  用来接收使用组件时通过组件标签传递的数据
}

//2.注册局部组件
const app = new Vue({
    el:"#app",
    data:{},
    methods:{},
    components:{      //用来注册局部组件
        login         //注册局部组件
    }
})

//3.通过组件完成数据传递
<login user-name="小陈" age="23"></login>

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

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

//1.声明组件模板配置对象
let login={
    template:"<div><h1>欢迎:{{name}},年龄:{{age}}</h1></div>",
    props:['name','age']
}

//2.注册局部组件
const app = new Vue({
    el:"#app",
    data:{
        username:"小明",
        age:23
    },
    methods:{},
    components:{
        login
    }
})

//3.使用组件 使用v-bind形式将数据绑定Vue实例中data属性，日后data属性发生变化，组件内部属性跟着变化
<login :name="username" :age="age"></login>

prop单向数据流

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

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

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

• 组件中定义属于组件的数据

let login={
    template:"<div><h1>欢迎 {{msg}} {{lists[0]}}</h1></div>",
    data(){   //使用data函数方式定义组件的数据  在templatehtml代码中通过插值表达式直接获取
        return {
            msg:"hello",
            lists:['java','springboot']
        }//组件自己内部数据
    }

}

• 组件中事件定义

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

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

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

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

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