后端速成Vue

最新推荐文章于 2024-05-24 17:59:48 发布
最新推荐文章于 2024-05-24 17:59:48 发布
阅读量736 收藏 10
点赞数 3
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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 路由的使用

  1. 引入路由
  2. 创建组件对象
  3. 将路由对象注册到vue实例
  4. 在页面中显示路由
  5. 可以根据链接切换路由
<!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 路由中的参数传递

  1. 通过?的方式传递参数—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>
  1. 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 环境准备

  1. 安装Nodejs

    Node.Js

  2. 配置环境变量

  3. 验证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文件
asiaWu3
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue根据后台传递的json数据生成动态配置页面（一）动态组件
qq_42306286的博客
03-04 1万+
一、需求理解 前端主要分俩模块，一个是管理模块，一个是展示模块。 管理模块负责传递json数据。 如图1.1，目前只是大概做了一个静态数据传递,先做页面展示。 展示模块负责根据json数据展示页面。如图1.2，根据动态组件和传递json数据展示页面，页面主要有动态表单、动态按钮、动态列表、动态弹窗等。 ...
vue 从后台获取菜单数据并表示在前端的过程
m0_51459514的博客
03-28 3337
vue 从后台获取菜单数据并表示在前端的过程
vue拖拽组件生成前端页面,vue组件拖拽自定义界面
纸尿裤排行
09-10 3031
使用方法如下：比如想要给test组件发送一个“相加”广播:复制代码exportdefault{method:{click(){Vue.$emit('add',{})//第二个参数可作为传递数据传送到监听端口，不需要则传空对象}}}复制代码那么test组件中就需要监听，在created方法里写复制代码exportdefault{created(){Vue.$on('add',)},method:{add(){this.count++}}}。
Vue速成学习笔记
最新发布
TRXCX的博客
05-24 1026
三、ElementUI。
手把手教你搭建vue-cli前端页面【超详细教程】
xinin919的博客
06-23 3472
前端运行环境Node.js、npm工具、vue-cli脚手架项目、路由组件、ElementUI框架、Hbuilder
Ruoyi-Vue若依前后端分离版 代码生成
m0_70208154的博客
10-24 8527
关于 Ruoyi-Vue若依前后端分离版 基于代码生成的新建模块的添加。
webStorm 新建vue页面时自动生成页面的模版
m0_58565372的博客
12-30 1920
4.在页面上输入你的模板名称，按照出来的提示选择，就可以生成你的模板了。以上步骤就是webStorm 新建vue页面时自动生成页面的模版。3.按照要求填写你需要的模板。2.编译器---实时模板。
毕业设计项目-个人博客。前端基于Vue，Element-UI和Vue-Element-Admin实现，后台采用SpringBoot+MybatisPlus+Rd
07-09
总的来说，这个毕业设计项目结合了前端的Vue.js、Element-UI和Vue-Element-Admin，以及后端的SpringBoot、MybatisPlus和Redis等技术，构建了一个高效、易用的个人博客系统。这样的技术栈既保证了开发的效率，也确保...
公司员工管理系统，vue+express+mongodb，一天速成的代写课设，无阅读代码意义。.zip
08-03
标题中的“公司员工管理系统，vue+express+mongodb，一天速成的代写课设”表明这是一个基于前端Vue.js、后端Express.js框架和MongoDB数据库的快速开发项目，主要用于模拟或实践公司员工管理的场景。这个系统可能包含...
医院病例管理系统，vue+express+mongodb，一天速成的代写课设，无阅读代码意义。.zip
08-03
标题中的“医院病例管理系统，vue+express+mongodb，一天速成的代写课设”表明这是一个基于Web技术构建的医疗信息系统，主要用于管理医院的病例数据。这个系统利用了前端的Vue.js框架，后端的Express.js框架，以及...
learn-web-dev:Web开发迷你速成班
04-19
5. 前端框架：学习如React、Vue或Angular等流行的前端框架，它们提供了一套更高效地开发复杂应用的工具和方法。 二、后端开发 后端开发关注服务器、数据库和应用程序之间的交互。我们将探讨： 1. 服务器端语言：...
后端速成JavaScript
qq_51705526的博客
04-15 1307
前言: JavaScript是一种属于网络的脚本语言，有它自身的基本数据类型、表达式和算术运算符及程序的基本程序框架，已经被广泛用于Web应用开发。 更重要的是JavaScript同HTML5一样具有跨平台性。 简单是JavaScript的又一大优点。 随着服务器的强壮，引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript也逐渐被用来编写服务器端程序 一个合格和后端程序员, 必须要精通javascript ! 可能你在后面, 汇合js经常打交道! 全文是博主速成js
Vue制作静态页面--day01
m0_66711291的博客
04-22 1万+
希望能放置处游戏PHigros的界面，没有任何有用的功能，只是熟悉下vue中的一些语法。 1、脚手架创建项目 使用脚手架3.0创建项目 执行指令 vue create pgr 配置 babel，vuex，vue-router 然后删除掉多余的文件 2、vue文件快速生成 创建好vue文件后在文件内输入vue可以快速生成vue文件的框架 （之前都是手敲，后悔刚知道） 3、css文件的引入 在app.vue这个文件的css部分可以引入css文件作为全局样式 这里先引入两个——初始..
vue根据json数据生成流程图
weixin_43371136的博客
10-13 3436
根据json数据生成流程图
一键生成Springboot & Vue项目！ 【私活神器】
独行侠梦的博客
11-29 959
今天给大家推荐一款自己公司正在打磨的一款一键部署，一键生成全自动化的低代码生成器工具，可以实现前端可视化操作（拖拽形式+配置就可以生成前端页面），后端直接结合前端代码一键生成，数据库（含表...
Vue.js实现 项目 生成到上线的全过程
热门推荐
是什么让你停止不前？
09-14 1万+
生成项目目录 单页应用(SPA) 单页Web应用（single page web application，SPA），就是将系统所有的操作交互限定在一个web页面中。单页应用程序 (SPA) 是加载单个HTML页面，系统的不同功能通过加载不同功能组件的形式来切换，不同功能组件全部封装到了js文件中，这些文件在应用开始访问时就一起加载完，所以整个系统在切换不同功能时，页面的地址是不变的，系...
java web 速成_java web开发(前端+后端)整套流程（小白版，教你怎样从零学起web开发）...
weixin_29123181的博客
02-16 1057
一.前言有很多人告诉我一直想学web开发，却不知到从哪学起。前端，后端学的断断续续，学了前面忘了后面，前端后端也不知道怎么连接，与服务器怎么交互，网站怎么放入服务器等等一堆问题，搞了很长时间也没能完整的做出一个像样的网站。所以，在这里，我要把我的教训写下来，让你们不会浪费时间，不会走这么多弯路。(包括所有的教学视频，配置环境所需要的文件等等)。二.正文1.你百分百要掌握的东西，java基础。(资源...
java 后端 和 vue前端 那个比较难
04-21
作为一个AI语言模型，我不会对任何编程语言有偏见或主观看法。Java后端和Vue前端都有其独特的技术难点与优势，难易程度因人而异。具体来说，Java后端开发需要涉及到Java语言本身、数据库、框架等方面的知识，涵盖面更广。而Vue前端开发则需要掌握HTML、CSS、JavaScript等前端基础知识，同时需要掌握Vue框架的特点和使用技巧。因此，难易程度取决于您的技术背景和个人经验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值