后端速成Vue

最新推荐文章于 2024-07-24 14:58:19 发布

asiaWu3

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量745

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_55193018/article/details/128336900

版权

1.Vue引言

Vue — 渐进式 JavaScript框架

2.Vue入门

2.1下载Vuejs

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


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

2.2Vue的第一个入门应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的第一个入门案例</title>
</head>
<body>
<div id="app">
<!--    {{变量名}} 可以将data中的变量值渲染到页面-->
    {{msg}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",  //element用来给Vue实例定义一个作用范围，包括app本身和所有子元素
        data:{     //用来给Vue实例定义一些相关数据
            msg:"Hello World!!!"
        }

    });
</script>
</body>
</html>

总结:

Vue实例中el属性：表示Vue的作用范围，在范围内都可以使用Vue语法
el属性中可以书写任意css选择器，推荐使用id选择器
Vue实例中的data属性：用来给Vue实例绑定一些相关的数据，可以通过插值表达式:{{变量名}}的方式取出来渲染到页面
使用{{}}获取data数据时，可以在{{}}中书写表达式，运算符，调用相关方法以及逻辑运算等

3.v-text和v-html

3.1 v-text

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
<!--    第一种-->
    <span>{{msg}}</span>
<!--    第二种-->
    <span v-text="msg"></span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",  //element用来给Vue实例定义一个作用范围，包括app本身和所有子元素
        data:{     //用来给Vue实例定义一些相关数据
            msg:"Hello World!!!",
        }

    });
</script>
</body>
</html>

总结：

插值表达式{{}}和v-text的区别：
- 使用v-text取值会覆盖标签内原有数据，{{}}不会
- 使用v-text可以避免在网络环境差时出现插值闪烁

3.2 v-html

v-html: 用来获取data中的数据，将数据中的html解析后渲染，类似js中的innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
    <span v-html="msg"></span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",  //element用来给Vue实例定义一个作用范围，包括app本身和所有子元素
        data:{     //用来给Vue实例定义一些相关数据
            msg:"<a href='https://www.baidu.com/'>链接</a>",
        }

    });
</script>
</body>
</html>

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

4.1 绑定事件的基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
    <button v-on:Click="addCount">点我count++</button>
    <br/>
    <h2>count：{{count}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            count:0
        },
        methods:{ //用来定义事件
            addCount:function (){
                this.count++;
            }
        }

    });
</script>
</body>
</html>

总结：

在Vue中事件的函数统一定义在Vue实例的methods属性中
在Vue中绑定事件通过v-on完成如：v-on:Click
在v-on中,事件名的赋值语句中是当前事件触发调用的函数名
在Vue定义的事件中this指的就是当前的Vue实例，以后可以在事件中通过使用this获取Vue实例中的数据

4.2 绑定事件的简化语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
<!--    使用@绑定事件-->
    <button @Click="addCount">点我count++</button>
    <br/>
    <h2>count:{{count}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            count:0
        },
        methods:{
            addCount (){ //函数可以省略function
                this.count++;
            }
        }

    });
</script>
</body>
</html>

总结：

可以使用@符号绑定事件
书写函数可以直接函数名(){}

4.4 Vue事件的参数传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
<!--    使用@绑定事件-->
    <button @Click="addCount(25)">点我改变count为25</button>
    <br/>
    <h2>count:{{count}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            count:0
        },
        methods:{
            addCount (count){
                this.count=count;
            }
        }

    });
</script>
</body>
</html>

总结:

在使用事件时，可以直接在括号内传递参数

5.v-show v-if v-bind

5.1 v-show

v-show: 控制标签是否显示底层是控制display标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
    <button @Click="show">点击展示</button>
    <br/>
    <h1 v-show="isShow">hello world</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            isShow:false
        },
        methods:{ //用来定义事件
            show() {
                this.isShow=true;
            }
        }

    });
</script>
</body>
</html>

总结：

在使用v-show时可以直接书写boolean值、书写boolean变量、书写boolean表达式控制标签的显示和隐藏

5.2 v-if

v-if: 用来控制页面元素是否显示底层控制的是DOM元素 false则删除DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
    <button @Click="show">点击展示</button>
    <br/>
    <h1 v-if="isShow">hello world</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            isShow:false
        },
        methods:{ //用来定义事件
            show() {
                this.isShow=true;
            }
        }
    });
</script>
</body>
</html>

5.3 v-bind

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
    <button @Click="changeTarget">点击改变超链接地址</button>
    <br/>
    <a v-bind:href="target">点击跳转</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            target:"http://www.baidu.com/"
        },
        methods:{ //用来定义事件
            changeTarget() {
                this.target="http://www.w3school.com.cn/"
            }
        }
    });
</script>
</body>
</html>

5.4 v-bind的简化写法

v-bind:属性名 --> :属性名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
    <button @Click="changeTarget">点击改变超链接地址</button>
    <br/>
    <a :href="target">点击跳转</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            target:"http://www.baidu.com/"
        },
        methods:{ //用来定义事件
            changeTarget() {
                this.target="http://www.w3school.com.cn/"
            }
        }
    });
</script>
</body>
</html>

6.v-for 循环遍历

v-for:对对象进行遍历(包括数组)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
<!--    v-for遍历对象-->
    <span v-for="(value,key,index) in user">
        {{index}} : {{key}} : {{value}}
    </span>
    <br/>
<!--    v-for遍历数组-->
    <span v-for="(e,index) in arr">
        {{index}} : {{e}}
    </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            user:{
                name:"yaya",
                age:18
            },
            arr:[41,64,24,43]
        },
        methods:{

        }
    });
</script>
</body>
</html>

总结：

在使用v-for遍历较复杂对象数组时，一定要加入:key属性，用来给Vue内部提供重用和排序的唯一key

7.v-modle 双向绑定

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
<!--    文本框和msg变量的值双向绑定-->
    <input type="text" v-model="msg">
    <br/>
    msg: <span>{{msg}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            msg:""
        },
        methods:{

        }
    });
</script>
</body>
</html>

总结：

使用v-model指令可以实现数据的双向绑定（表单中数据的变化导致vue实例data数据变化 vue实例data变化导致表单中数据变化）

8.事件修饰符

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

# 常用的事件修饰符：
- stop：用来阻止事件冒泡
- prevent：用来阻止标签的默认行为
- capture
- self：只触发自己标签的上特定动作的事件，不监听事件冒泡
- once：让指定事件只触发一次
- passive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
    <a href="http://www.baidu.com" @Click.prevent.once="fun">链接</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            msg:""
        },
        methods:{
            fun() {
                alert("a被点了");
            }
        }
    });
</script>
</body>
</html>

9.按键修饰符

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

# 常用按键修饰符
- enter
- space
- tab
- esc
- up
- down
- left
- right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
<!--    enter键抬起时自动触发-->
    <input type="text" @keyup.enter="search">
    <!--    enter键按下时自动触发-->
    <input type="text" @keydown.enter="search">
    <button @Click="search()">点击搜索</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
        },
        methods:{
            search() {
                alert("共10条结果");
            }
        }
    });
</script>
</body>
</html>

10.Axios

中文网站：https://www.axios-http.cn/

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

10.1 GET方式的请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.get("http://localhost:8080/user/findAll").then(function (response){ //处理结果
        console.log(response.data);
    }).catch(function (err) { //处理异常
        console.log(err);
    });
    //简化写法
    axios.get("http://localhost:8080/user/findAll").then(res=> { //处理结果
        console.log(res.data);
    }).catch(err=> { //处理异常
        console.log(err);
    });
</script>
<script>
    const app=new Vue({
        el:"#app",
    });
</script>
</body>
</html>

10.2 Post方式的请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let user={
        username:"yaya",
        password:"123456"
    };
    axios.post("http://localhost:8080/user/save",user).then(res=> {
        console.log(res.data);
    }).catch(err=> {
        console.log(err);
    });
</script>
<script>
    const app=new Vue({
        el:"#app",
    });
</script>
</body>
</html>

10.3 并发请求

并发请求：将多个请求在同一时刻发出，最后再集中处理每个请求响应的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    function save() {
        let user={
            username:"yaya",
            password:"123456"
        };
        return axios.post("http://localhost:8080/user/save",user);
    }
    function findAll() {
        axios.get("http://localhost:8080/user/findAll");
    }

    //并发请求
    axios.all([save(),findAll()]).then(  //传入函数数组
        axios.spread(function (res1,res2) { //res1和res2分别是两个函数的返回结果
            console.log(res1.data);
            console.log(res2.data);
        })
    );
</script>
<script>
    const app=new Vue({
        el:"#app",
    });
</script>
</body>
</html>

11.Vue生命周期

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

# Vue生命周期分为三个阶段：
1. 初始化阶段
        beforeCreate() { //生命周期中的第一个函数，该函数在执行时vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作，vue实例中还没有data el methods相关属性
            console.log(this.msg); //undefined
        },
        created() { //生命周期中第二个函数，该函数在执行时vue实例已经初始化了data属性和methods中相关方法
            console.log(this.msg); //hello
        },
        beforeMount() { //生命周期中第三个函数，该函数在执行时Vue将el中指定作用范围作为模板编译，但暂未解析
            console.log(document.querySelector("span").innerText); //{{msg}}
        },
        mounted() { //生命周期中第四个函数，该函数在执行过程中，已经将数据渲染到界面中并且已经更新页面
            console.log(document.querySelector("span").innerText); //hello
        },
2. 运行时阶段
        beforeUpdate() { //生命周期中第五个函数，该函数是data中数据发生变化时执行 这个事件执行时仅仅是vue实例中data数据变化 页面显示的依然是原始数据
        },
        update() { //生命周期中第六个函数，该函数执行时data中数据发生变化，页面中数据也发生了变化 页面中数据已经和data中数据一致
        }
3. 销毁阶段
    	beforeDestroy() { //生命周期第七个函数，该函数执行时，vue中所有数据methods component都没销毁
        },
        destroy() { //生命周期的第八个函数，该函数执行时，Vue实例彻底销毁
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<div id="app">
<span>{{msg}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            msg:"hello"
        },
        methods:{},
        beforeCreate() { //生命周期中的第一个函数，该函数在执行时vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作，vue实例中还没有data el methods相关属性
            console.log(this.msg); //undefined
        },
        created() { //生命周期中第二个函数，该函数在执行时vue实例已经初始化了data属性和methods中相关方法
            console.log(this.msg); //hello
        },
        beforeMount() { //生命周期中第三个函数，该函数在执行时Vue将el中指定作用范围作为模板编译，但暂未解析
            console.log(document.querySelector("span").innerText); //{{msg}}
        },
        mounted() { //生命周期中第四个函数，该函数在执行过程中，已经将数据渲染到界面中并且已经更新页面
            console.log(document.querySelector("span").innerText); //hello
        },
        beforeUpdate() { //生命周期中第五个函数，该函数是data中数据发生变化时执行 这个事件执行时仅仅是vue实例中data数据变化 页面显示的依然是原始数据
        },
        update() { //生命周期中第六个函数，该函数执行时data中数据发生变化，页面中数据也发生了变化 页面中数据已经和data中数据一致
        },
        beforeDestroy() { //生命周期第七个函数，该函数执行时，vue中所有数据methods component都没销毁
        },
        destroy() { //生命周期的第八个函数，该函数执行时，Vue实例彻底销毁
        }
    });
</script>
</body>
</html>

12.Vue组件(Component)

组件的作用：

用来减少Vue实例对象中的代码量，日后在使用Vue开发过程中，可以根据不同业务将页面划分为不同的组件，由多个组件构成整个页面的布局，便于开发人员的管理和维护

12.1 组件的使用

Vue组件分为全局组件和局部组件

12.1.1 全局组件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
    <!--使用全局组件-->
    <login></login>
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  //全局组件注册 Vue.component(组件名,参数对象)
  //参数对象中 1.template：用来书写html代码(html代码中要有一个主容器)  2.
  Vue.component("login",{
    template:"<div><h1>用户登录</h1></div>"
  });
  const app=new Vue({
    el:"#app",
    data:{
    },
    methods:{
    }
  })
</script>
</body>
</html>

总结：

Vue.component用来开发全局组件参数1：组件的名称参数2：组件配置{} template:''用来书写组件的html代码template中必须有且只有一个root元素
使用时需要在Vue的作用范围内根据组件名使用全局组件
如果在注册组件过程中使用驼峰命名在使用组件时必须将驼峰的所有单词小写并在单词间加入 -

12.1.2 局部组件

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

12.1.2.1 第一种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
    <!--使用局部组件-->
    <login></login>
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
        },
        methods:{
        },
        //在components中注册局部组件
        components: {
            //组件名:组件对象
            login: {
                template:"<div><h1>用户登录</h1></div>"
            }
        }
    })
</script>
</body>
</html>

为了减少Vue实例中的代码量，可以将组件对象抽取出来

let login={
    template:"<div><h1>用户登录</h1></div>"
};
const app=new Vue({
    el:"#app",
    components: {
        login:login
    }
});

12.1.2.2 第二种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
    <!--使用局部组件-->
    <login></login>
  </div>
<!--  定义组件-->
  <template id="loginTemplate">
      <h1>用户登录</h1>
  </template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
        },
        methods:{
        },
        //在components中注册局部组件
        components: {
            //组件名:组件对象(css选择器)
            login: {
                template:"#loginTemplate"
            }
        }
    })
</script>
</body>
</html>

12.2 props的使用

prop: 用来给组件传递相应的静态或动态数据（组件间传递数据）

12.2.1 在组件上声明静态数据传递给组件内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--使用局部组件-->
    <login name="yaya"></login>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let login = {
        template: "<div><h1>欢迎，{{name}}</h1></div>",
        //参数列表
        props: ["name"]
    }
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        //在components中注册局部组件
        components: {
            login: login
        }
    })
</script>
</body>
</html>

总结：

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

12.2.2 在组件上声明动态数据传递给组件内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--使用局部组件-->
<!--    使用v-bind动态绑定数据-->
    <login :name="name"></login>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let login = {
        template: "<div><h1>欢迎，{{name}}</h1></div>",
        //参数列表
        props: ["name"]
    }
    const app = new Vue({
        el: "#app",
        data: {
            name:"yaya"
        },
        methods: {},
        //在components中注册局部组件
        components: {
            login: login
        }
    })
</script>
</body>
</html>

总结：

给属性名加上v-bind即可实现动态数据

12.2.3 props中的单向数据流

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

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

12.3.1 组件内数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--使用局部组件-->
    <login></login>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let login = {
        template: "<div><h1>欢迎，{{name}}</h1></div>",
        //组件内数据(必须为一个函数)
        data() {
            return {
                name:"yaya"
            }
        }
    }
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        //在components中注册局部组件
        components: {
            login: login
        }
    })
</script>
</body>
</html>

12.3.2 组件内事件

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--使用局部组件-->
    <login></login>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let login = {
        template: "<div><button @Click='fun'>点我</button></div>",
        //组件内函数
        methods: {
            fun() {
                alert("666");
            }
        }
    }
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        //在components中注册局部组件
        components: {
            login: login
        }
    })
</script>
</body>
</html>

12.4 向子组件中传递事件并完成事件调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--使用局部组件-->
    <login :username="name" @fun1="fun2"></login>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let login = {
        template: "<div><h1>欢迎，{{uName}}</h1> <hr> <button @Click='fun'>点我</button></div>",
        //组件内数据(必须为一个函数)
        data() {
            return {
                uName:this.username
            }
        },
        props:["username"],
        methods: {
            fun() {
                //调用其他组件传来的函数
                this.$emit("fun1");
            }
        }
    }
    const app = new Vue({
        el: "#app",
        data: {  //父组件通过v-bind向子组件传递数据
            name:"yaya"
        },
        methods: {
            fun2() {  //父组件通过v-on向子组件传递函数
                alert(666);
            }
        },
        //在components中注册局部组件
        components: {
            login: login
        }
    })
</script>
</body>
</html>

13.Vue中的路由(VueRouter)

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

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

13.1 路由的使用

引入路由
创建组件对象
将路由对象注册到vue实例
在页面中显示路由
可以根据链接切换路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a href="#/login">点我登录</a>
    <a href="#/register">点我注册</a>
<!--    显示路由的组件-->
    <router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--引入js-->
<script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>

<script>
    //声明组件模板
    const login={
        template:"<div><h1>用户登录</h1></div>"
    };
    const register={
        template:"<div><h1>用户注册</h1></div>"
    }
    //创建路由对象
    const router=new VueRouter({
        routes:[
            //绑定路径和路由对象
            {path:"/login",component:login},
            {path:"/register",component:register}
        ]
    });

    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components: {},
        router:router //绑定路由对象
    })
</script>
</body>
</html>

13.2 router-link

router-link:用来替换我们在切换路由时使用标签切换路由,可以自动给路由路径加入#不需要手动加入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    <a href="#/login">点我登录</a>-->
<!--    <a href="#/register">点我注册</a>-->
    <router-link to="/login">点我登录</router-link>
    <router-link to="/register">点我注册</router-link>
<!--    显示路由的组件-->
    <router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--引入js-->
<script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>

<script>
    //声明组件模板
    const login={
        template:"<h1>用户登录</h1>"
    };
    const register={
        template:"<h1>用户注册</h1>"
    }
    //创建路由对象
    const router=new VueRouter({
        routes:[
            //绑定路径和路由对象
            {path:"/login",component:login},
            {path:"/register",component:register}
        ]
    });

    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components: {},
        router:router //绑定路由对象
    })
</script>
</body>
</html>

总结：

router-link：用来替换a标签，好处是不用书写#
to属性用来书写路径，tag属性决定将router-link渲染成什么组件

13.3 默认路由

默认路由：访问根标签/时默认路由到的页面

方式一：

routes:[
    		{path:"/",component:login}
        ]

方式二（重定向，推荐）：

routes:[
    		{path:"/",redirect:"/login"}
        ]

13.4 路由中的参数传递

通过?的方式传递参数—this.$route.query.参数名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/login">点我登录</router-link>
<!--    传递参数-->
    <router-link to="/register?id=123">点我注册</router-link>
<!--    显示路由的组件-->
    <router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--引入js-->
<script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>

<script>
    //声明组件模板
    const login={
        template:"<h1>用户登录</h1>"
    };
    const register={
        template:"<h1>用户注册</h1>",
        data() {},
        methods: {},
        created() {
            //拿到参数
            alert(this.$route.query.id);
        }
    }
    //创建路由对象
    const router=new VueRouter({
        routes:[
            {path:"/",redirect:"/login"},
            //绑定路径和路由对象
            {path:"/login",component:login},
            {path:"/register",component:register}
        ]
    });

    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components: {},
        router:router //绑定路由对象
    })
</script>
</body>
</html>

restful风格传参—this.$route.params.参数名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/login">点我登录</router-link>
<!--    传递参数-->
    <router-link to="/register/123/yaya">点我注册</router-link>
<!--    显示路由的组件-->
    <router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--引入js-->
<script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>

<script>
    //声明组件模板
    const login={
        template:"<h1>用户登录</h1>"
    };
    const register={
        template:"<h1>用户注册</h1>",
        data() {},
        methods: {},
        created() {
            //拿到参数
            alert(this.$route.params.id);
            alert(this.$route.params.name);
        }
    }
    //创建路由对象
    const router=new VueRouter({
        routes:[
            {path:"/",redirect:"/login"},
            //绑定路径和路由对象
            {path:"/login",component:login},
            //绑定变量名和参数
            {path:"/register/:id/:name",component:register}
        ]
    });

    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components: {},
        router:router //绑定路由对象
    })
</script>
</body>
</html>

13.5 嵌套路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/product">商品管理</router-link>
<!--    显示路由的组件-->
    <router-view></router-view>
</div>
<template id="product">
    <div>
        <h1>商品管理</h1>
<!--        嵌套路由-->
        <router-link to="/product/add">新增商品</router-link>
        <router-link to="/product/edit">编辑商品</router-link>
<!--        router-view用来显示子组件-->
        <router-view></router-view>
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--引入js-->
<script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>

<script>
    //声明组件模板
    const product={
        template:"#product"
    };
    const add={
        template: "<h3>商品添加</h3>"
    };
    const edit={
        template: "<h3>商品编辑</h3>"
    };
    //创建路由对象
    const router=new VueRouter({
        routes:[
            //绑定路径和路由对象
            {
                path:"/product",
                component:product,
                // 绑定子路由
                children:[
                    {path:"add",component: add},
                    {path:"edit",component: edit}
                ]
            }
        ]
    });

    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components: {},
        router:router //绑定路由对象
    })
</script>
</body>
</html>

14 Vue Cli 脚手架

14.1 什么是Cli

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

14.2 什么是Vue Cli

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

14.3 Vue Cli的优势

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

14.4 Vue Cli的安装

14.4.1 环境准备

安装Nodejs

Node.Js
配置环境变量

验证nodejs环境配置是否成功

# 控制台输入
	node -v
# 如果显示版本，说明配置成功

14.4.2 安装脚手架

# 0.卸载脚手架
	npm uninstall -g @vue/Cli  //卸载3，x版本脚手架
	npm uninstall -g vue-c1i    //卸载2，x版本脚手架
# 1.Vue Cli官方网站
	https://Cli.vuejs.org/zh/guide/
# 2.安装Vue Cli
	npm install -g vue-Cli
# 3.安装init依赖
	npm install -g @vue/Cli-init

14.5 快速开始

# 1.创建Vu©脚手架第一个项目
	vue init webpack 项目名
# 2.创建第一个项目
	vue init webpack hello
# 3.命令行中依次输入 y-回车-回车-回车-y-n-n-n-回车
# 4.如何运行  在项目根目录执行
	npm start
# 5.如何访问
	http://localhost:8080/
# 6.项目结构
	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->对package.json加倾
        -README md -------->项目说明文件
# 7.Vue Cli中项目开发方式
	注意：一切皆组件  一个组件中包括js代码、html代码、css样式
	
    1.Vue Cli开发方式是在项目中开发一个一个组件对应一个业务功能模块，之后可以将多个组件组合到一起形成一个前端系境
    2.之后在使用Vue Cli进行开发时不再书写html,编写的是一个个组件（组件后缀.vue结尾的文件），打包时Vue Cli会将组件编译成运行的html文件