Vue学习

最新推荐文章于 2023-11-21 09:55:16 发布

young_man2

最新推荐文章于 2023-11-21 09:55:16 发布

阅读量908

点赞数 3

分类专栏： java vue 文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/young_man2/article/details/126280767

版权

java 同时被 2 个专栏收录

103 篇文章 2 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

一、概述（加上一些概念的讲述）

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层(HTML+JS+CSS)，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

开发者为尤雨溪

网络通信：axios

页面跳转：vue-router

状态管理：vuex

VUE-UI：ICE

内容补充

CSS预处理器：给CSS添加了一点编程的特性，是一门新的语言

CSS预处理器之less & sass & stylus - 掘金 (juejin.cn)

vue：一款渐进式js框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular(模块化)和React(虚拟DOM)的优点

axios：前端通信框架，因为vue的边界很明确，就是为了处理DOM，所以不具有通信嫩里，这个时候就需要额外使用一个通信框架与服务器交互，当然也可以直接使用jQuery提供的AJAX功能

vue-element-admin: vue-element-admin (panjiachen.github.io)

node.js: Node.js 教程 | 菜鸟教程 (runoob.com)

二、第一个vue程序

1. 什么是mvvm?

2. 为什么使用vue.js?

3. 第一个vue程序

常见的前端开发工具：vscode、webstorm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <h1> {{message}}</h1>
</div>

<!--1. 导入vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    /*2. 创建vue对象*/
    var vm=new Vue({
        /*3. 绑定*/
        el: "#app",
        /*4. 放置数据  model层*/
        data: {
            message: "hello vue"
        }
    });
</script>


</body>
</html>

4. 为什么使用MVVM

5. vue基本语法

学习前端：
判断-循环（if for）

v-if和v-for的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1 v-if="message">显示</h1>
    <h1 v-else>不显示</h1>
</div>

<!--1. 导入vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    /*2. 创建vue对象*/
    var vm=new Vue({
        /*3. 绑定*/
        el: "#app",
        /*4. 放置数据  model层*/
        data: {
            message: true
        }
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1 v-for="item in items">
        {{item.message}}
    </h1>
</div>

<!--1. 导入vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    /*2. 创建vue对象*/
    var vm=new Vue({
        /*3. 绑定*/
        el: "#app",
        /*4. 放置数据  model层*/
        data: {
            items: [{
            message: "hahaha"},
                { message: "呵呵呵呵呵呵"}
                ]
        }
    });
</script>
</body>
</html>

6. 监听事件使用v-on

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <button v-on:click="hello">点击</button>
</div>

<!--1. 导入vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    /*2. 创建vue对象*/
    var vm=new Vue({
        /*3. 绑定*/
        el: "#app",
        /*4. 放置数据  model层*/
        data: {
            message: "hello vue"
        },
        methods:{
        //这里需要添加一个事件来响应
            hello: function (event) {
                alert(this.message)
            }
        }
    });
</script>


</body>
</html>

在vue中是这样的

在jsp中是：

function  XXX(){

}

7. 双向绑定

7.1 文本框的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <input type="text" v-model="message"/>
    {{message}}
</div>

<!--1. 导入vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    /*2. 创建vue对象*/
    var vm=new Vue({
        /*3. 绑定*/
        el: "#app",
        /*4. 放置数据  model层*/
        data: {
            message: "hello vue"
        }
    });
</script>
</body>
</html>

7.2 单选与复选的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <input type="radio" name="boy" value="男" v-model="checked"/> 男
    <input type="radio" name="girl" value="女" v-model="checked"/> 女
    <p>
    选择的性别为：{{checked}}
    </p>
</div>

<!--1. 导入vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    /*2. 创建vue对象*/
    var vm=new Vue({
        /*3. 绑定*/
        el: "#app",
        /*4. 放置数据  model层*/
        data: {
            message: "hello vue",
            checked: ""
        }
    });
</script>
</body>
</html>

7.3 下拉框的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <!--<input type="radio" name="boy" value="男" v-model="checked"/> 男
    <input type="radio" name="girl" value="女" v-model="checked"/> 女
    <p>
    选择的性别为：{{checked}}
    </p>-->
    <select v-model="xuanzhong">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p> 选中的为：{{xuanzhong}}</p>
</div>

<!--1. 导入vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    /*2. 创建vue对象*/
    var vm=new Vue({
        /*3. 绑定*/
        el: "#app",
        /*4. 放置数据  model层*/
        data: {
            message: "hello vue",
            checked: "",
            xuanzhong: ""
        }
    });
</script>
</body>
</html>

这里使用disabled是让他变成不可交互的，在这里也就是不准在下拉框中选择它

8. Vue组件讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <!--组件：传递给组件中的值 props-->
    <haha v-for="item in items" v-bind:bangding="item"></haha>
</div>

<!--1. 导入vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>

    Vue.component("haha",{
        props: ['bangding'],
        template: '<li> {{bangding}}</li>'
        }

    )
    /*2. 创建vue对象*/
    var vm=new Vue({
        /*3. 绑定*/
        el: "#app",
        /*4. 放置数据  model层*/
        data: {
            items: ["java","python","C++"]
        }
    });
</script>

</body>
</html>

9. Axios的异步响应

9.1 什么是axios?

9.2 axios是干什么的?

使用axios必须将idea中的JavaScript修改为6的版本及以上

9.3 axios响应过程

实现代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>axios</title>
    <!--v-cloak：解决闪烁问题-->
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="vue" v-cloak>
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
    <div>{{info.links}}</div>
    <a v-bind:href="info.url">点我</a>
</div>

<!--引入js文件-->
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!--1. 导入vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#vue",
        data: function () {
            return {
                // 请求的返回参数名，必须和 json 字符串一样
                info: {
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null,
                    links: [
                        {
                            name: null,
                            url: null
                        }
                    ]
                }
            }
        },
        mounted: function () { // 钩子函数 链式编程 ES6新特性
            axios.get('../data.json').then(response => (this.info = response.data))
        }
    });
</script>
</body>
</html>

我们来补充以下ajax的一些概念：

Ajax是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页页面。

AJAX实现方式有两种：

1）原生的JS实现方式：了解即可，了解即可，了解即可，实际项目中基本用的是下一种；
2）JQuery实现方式：.ajax()、.get()、

【实现步骤】：

1）创建核心对象
2）建立连接（方法的参数解释详见下面代码）；
3）发送请求；
4）接收及处理响应结果。

10.计算属性

也就是说计算出来的结果保存在属性中，内存中运行；减轻了浏览器的压力！

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<div id="app">
    <p>{{hello()}}</p>   <!--处于method中间，需要使用调用函数的方式进行调用-->
    <p>{{hello1}}</p>    
</div>

<!--1. 导入vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    /*2. 创建vue对象*/
    var vm=new Vue({
        /*3. 绑定*/
        el: "#app",
        /*4. 放置数据  model层*/
        data: {
            message: "hello vue"
        },
        methods:{
            hello: function () {
                return Date.now();
            }
        },
        computed:{
            hello1: function(){
                return Date.now();
            }
        }
    });
</script>
</html>

11. 插槽Slot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--v-clock解决闪烁问题-->
        [v-cloak ]{
            display: none !important;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!--1. 导入vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>

    //slot: 插槽
    Vue.component("todo",{
        template:
            '<div>' +
            '<slot name="todo-title"></slot>' +
            '<ul>' +
            '   <slot name="todo-items"></slot>' +
            '</ul>' +
            '</div>'

    });


    Vue.component("todo-title",{
        props: ["title"],
        template: '<div>{{title}}</div>'
    });

    Vue.component("todo-items",{
        props: ["item"],
        template: '<li>{{item}}</li>'
    });

    var vm=new Vue({
        el:'#app',
        data: {
            title: "haha的列表",
            todoItems: ['haha','zengyueqing','yeye']
        }



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

12.自定义事件内容分发

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--v-clock解决闪烁问题-->
        [v-cloak ]{
            display: none !important;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index" v-on:remove="removeItem(index)" :key="index"></todo-items>
    </todo>
</div>
<!--引入js文件-->
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!--1. 导入vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>

    //slot: 插槽
    Vue.component("todo",{
        template:
            '<div>' +
            '<slot name="todo-title"></slot>' +
            '<ul>' +
            '   <slot name="todo-items"></slot>' +
            '</ul>' +
            '</div>'

    });


    Vue.component("todo-title",{
        props: ["title"],
        template: '<div>{{title}}</div>'
    });

    Vue.component("todo-items",{
        props: ["item","index"],
        //click 只能绑定当前的方法
        template: '<li>{{index}}----------{{item}}<button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                //this.$emit  调用v:on的自定义事的方法
                this.$emit('remove',index);
            }
        }
    });

    var vm=new Vue({
        el:'#app',
        data: {
            title: "luyi的列表",
            todoItems: ['luyi','zengyueqing','luz']

        },
        methods:{
            removeItem: function (index) {
                console.log("删除了"+this.todoItems[index]+"ok");
                this.todoItems.splice(index,1);
            }
        }

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

三、第一个VUE-CLI项目

1. 什么是vue-cli?

2.使用前的准备

2.1安装一些需要的资源

①安装淘宝镜像

(2条消息) npm配置国内镜像（淘宝镜像）_young_man2的博客-CSDN博客_npm 设置国内镜像

②安装vue-cil

参照这个博客(2条消息) vue Cli（脚手架）安装_stay_少年与梦的博客-CSDN博客_安装vue-cli脚手架

2.2 创建文件过程

手动创建一个Vue-cli项目

创建一个vue项目首先创建一个文件夹myvue，然后在文件夹下打开Dos（以管理员身份）
执行 vue init webpack myvue命令，初始化一个基于webpack模板的vue应用程序
接下来如下操作：（为什么一直NO,因为可以更好的体验，每一个步骤，否则自动安装）

接下来使用 npm -install

然后使用idea打开项目

最后运行命令

3. webpack学习使用

3.1 es6模块

3.2 下载与安装

webpack的安装命令

npm install webpack-cli -g

npm install webpack -g

查看版本号

3.3 使用webpack

1. 创建项目

然后使用idea打开

2. 创建一个名为modules的目录，用来放置js文件

3. 创建项目来实实现

比如我们现在有一个hello.js，我们将它调用到main.js里面，然后我们使用webpack进行封装！

①hello.js

//暴露一个方法
exports.sayHi = function () {
    document.write("<p>一定要找到工作！</p>")
};

②main.js

var helper=require("./hello")
helper.sayHi();

③webpack.config.js

module.exports={
    entry: "./moudles/main.js",
    output: {
        filename: "./js/bundle.js"
    }
}

④在控制台使用webpack就可以进行打包

⑤然后他就会自动生成文件了

这个bundle.js里面就是整合了我们的main.js和hello.js的！

4. vue-rooter

4.1安装vue-rooter

npm install vue-rooter --save

Vite 搭建 Vue2 项目（Vue2 + vue-router + vuex）-KuangStudy-文章

5. elementUI

5.1 安装

npm i element-ui -S

Element - 网站快速成型工具