开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue学习 -> 正文阅读

[JavaScript知识库]Vue学习

Vue

渐进式 JavaScript 框架

1、简介

官网：https://cn.vuejs.org

前端体系、前后端分离

SOC:关注点分离

只管视图层

网络通信：axios
页面跳转：vue-router
状态管理：vuex
Vue-UI: ICE
结构层：HTML
表示层：CSS
- CSS预处理器：动态变化——>SASS(Ruby)、LESS(NodeJS)
行为层：JavaScript

2、UI框架

Ant-Design：https://ant.design/index-cn

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cZlnxPVb-1628518619223)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210808225039186.png)]
ElementUI：https://element.eleme.cn/#/zh-CN

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-19jie8vw-1628518619226)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210808224958661.png)]

vue-element-admin：https://panjiachen.github.io/vue-element-admin-site/zh
Bootstrap：https://www.bootcss.com

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a9lYEH10-1628518619228)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210808225107756.png)]
AmazeUI：http://amazeui.shopxo.net

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Igjdoc5C-1628518619230)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210808225317225.png)]
iView：https://www.iviewui.com/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KpY4BdGM-1628518619231)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210808233743681.png)]

iview控制台：https://adminpro.iviewui.com/dashboard/console

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JxB343PQ-1628518619233)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809000046367.png)]

iview-admin：https://github.com/iview/iview-admin
ICE：https://ice.work/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0noAX3qR-1628518619235)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809000338263.png)]
VantUI：https://vant-contrib.gitee.io/vant/#/zh-CN/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-liWMxPki-1628518619236)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809000558464.png)]
AtUI：https://aliqin.github.io/atui/
CubeUI：https://didi.github.io/cube-ui/#/zh-CN

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tFsowewO-1628518619237)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809000916954.png)]

NodeJS 带来的全栈时代：http://nodejs.cn/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vPIfkEaH-1628518619238)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809003703568.png)]

3、Vue基础语法

CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

官网的GitHub也可以直接下文件

3.1、v-bind:title = ‘’

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

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

    <!-- 方式二 -->
    <!-- 会出现 message 的数据 -->
    <div id="app">
        <!-- v-bind:title 绑定元素的 title 与 message 属性一致 -->
        <!-- 用于鼠标触碰显示信息 -->
        <span v-bind:title="message">
            鼠标悬停几秒查看此处动态绑定的提示信息
        </span>
    </div>
    
    <!-- 也可以用lib包下的vue.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            //Model层 数据
            data:{
                message:"hello,vue"
            }
        });

        //双向绑定，就是前端数据改变，data数据也会改变，反过来也可以，而且这个页面不用刷新
        //上面这种被广泛应用了，例如节假日做活动，只需要改变前端样式即可，不需要不断刷新页面
        vm.message = 'Happy~Study🙂';
    </script>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ovODPabe-1628518619239)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809014348733.png)]

3.2、v-if 和 v-else

<body>

    <!-- 这就只需要后端传数据过来就可以判断选择 -->
    <div id="app">
        <h1 v-if="type==='A'">A</h1>
        <h1 v-else-if="type==='B'">B</h1>
        <h1 v-else>C</h1>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                // ok:true
                type:'A'
            }
        });

        // vm.ok = false;  //显示 No

        // vm.type = 'B'; //显示B
        // vm.type = 'R'; //显示C
    </script>
</body>

3.3、v-for

<body>
    <div id="app">
        
        <li v-for="(item,index) in items">
            {{item.message}}--{{index}}--{{item}}
        </li>

    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                // 下面 items 数组有两个对象
                items:[
                    {message:'Happy😄'},
                    {message:'Sad😥'},
                    {message:'angry😤'},
                ]
            }
        });
    </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JgryCi9M-1628518619239)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809021820296.png)]

4、事件

4.1、v-on

<body>
    <div id="app">
        
        <button v-on:click="sayHi">click me</button>

    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "Happy🥰"
            },
            methods: {
                //方法必须定义在 vue 的 methods 对象里面
                sayHi: function(){
                    alert(this.message);
                }
            }
        });
    </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BjlilZKM-1628518619240)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809111210253.png)]

5、双向绑定

input

<body>
    <div id="app">
        输入的文本：<input type="text" v-model="message">{{message}}
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "🧐😀😁😂🤣😃😄"
            },
            methods: {
                
            }
        });
    </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r40lqdLo-1628518619240)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809111807269.png)]

textarea

<textarea name="" id="" cols="30" rows="10"v-model="message"></textarea>
{{message}}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xhpAe4Td-1628518619241)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809112223654.png)]

单选框

<body>
    <div id="app">
        性别：
        <input type="radio" name="sex" value="👦🏻" v-model="qinjiang">👦🏻
        <input type="radio" name="sex" value="👧🏻" v-model="qinjiang">👧🏻

        <p>
            选中了谁：{{qinjiang}}
        </p>

    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                qinjiang: ''
            },
            methods: {
                
            }
        });
    </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jFq592J3-1628518619241)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809113036722.png)]

下拉框

<body>
    <div id="app">
        下拉框：
        <select v-model="qinjiang">
            <option value="" disabled>--请选择--</option>
            <option>😀</option>
            <option>😭</option>
            <option>😠</option>
            <option>😄</option>
        </select>
        <span>value：{{qinjiang}}</span>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                qinjiang: ''
            },
            methods: {
                
            }
        });
    </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LwBx0dUM-1628518619242)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809113839521.png)]

6、Vue组件

6.1、第一个组件程序

<body>
    <div id="app">
        <qinjiang></qinjiang>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>

        //定义组件component
        Vue.component(
            "qinjiang",
            {
                //用qinjiang代替li标签
                template: '<li>Hello</li>'
            }
        );

        var vm = new Vue({
            el: "#app"
        });
    </script>
</body>

6.2、进阶版

<body>
    <div id="app">
        <!-- 组件：传递给组件中的值：props -->
        <qinjiang v-for="item in items" v-bind:qin="item"></qinjiang>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>

        //定义组件component
        Vue.component(
            "qinjiang",
            {
                props: ['qin'],
                template: '<li>{{qin}}</li>'
            }
        );

        var vm = new Vue({
            el: "#app",
            data: {
                items: ["😀","😭","😠"]
            }
        });
    </script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Gf148SP-1628518619242)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809120226037.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i0AUzYXq-1628518619243)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809120251721.png)]

6.3、进阶到.vue文件

模板

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

7、axios 网络通信

实现ajax异步通信

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dUnbZTOl-1628518619243)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809120751917.png)]

官网：http://axios-js.com

CDN

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

7.1、第一个程序

data.json

{
    "name": "Happy~Study🧐",
    "url": "https://www.cnblogs.com/happy-msh/",
    "page": 1,
    "isNonProfit": true,
    "address": {
        "street": "三峡大学",
        "city": "湖北宜昌",
        "country": "中国"
    },
    "links": [
        {
        "name": "B站",
        "url": "https://space.bilibili.com/95256449"
        },
        {
        "name": "我的博客",
        "url": "https://www.cnblogs.com/happy-msh/"
        },
        {
        "name": "百度",
        "url": "https://www.baidu.com/"
        }
    ]
}

<body>
	<div id="vue"></div>
	<!--引入js文件-->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script type="text/javascript">
	    var vm = new Vue({
	        el:"#vue",
	        mounted(){//钩子函数
	            axios.get('data.json').then(response=>(console.log(response.data)));
	        }
	    });
	</script>
</body>

data.json 实现了ajax的异步刷新：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aWtnLCbH-1628518619243)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809134743081.png)]

结果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NHxJnAUw-1628518619244)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809134843268.png)]

7.2、进阶版

<head>
<!-- v-clock:解决页面闪烁问题 -->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<div id="vue" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>

    <a v-bind:href="info.url">点😀进入??世界</a>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:"#vue",
        data(){
            return{
                //请求返回参数合适，必须和json字符串一样
                info:{
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null
                }
            }
        },
        mounted(){//钩子函数,链子编程
            axios.get('data.json').then(response=>(this.info=response.data));
        }
    });
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AKaiuIIG-1628518619244)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809142210807.png)]

8、计算属性

计算出来的结果，保存在属性中

可以想象成缓存

<body>
<div id="app">
    <p>currentTime2:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data: {
            message: 'Happy~Study😀'
        },
        methods: {
            currentTime1: function(){
                return Date.now();//返回一个时间戳
            }
        },
        computed:{//计算属性，建议不要和 methods 方法重名，因为重名后只会调用 methods 里面的方法
            //节省浏览器的成本，不需要多次调用方法，在缓存去拿就行
            currentTime2: function(){
                this.message;
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VTxyBoMX-1628518619245)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809150156977.png)]

一个是方法，一个是属性

9、插槽 slot

承载分发内容的出口，即内容分发

<body>
<div id="app">

    <!-- 改用插槽实现 -->
    <!-- <p>书籍目录</p>
    <ul>
        <li>Java</li>
        <li>Mybatis</li>
        <li>Python</li>
    </ul> -->

    <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 src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

    Vue.component("todo",{
        // slot 定义插槽 实现动态编辑
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                  </div>'
    });

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

    var vm = new Vue({
        el:"#app",
        data: {
            title: "秦老师系列列表",
            todoItems: ['狂神说Java','狂神说前端',"你好"] //前端就只需要在这改动数据就行，就会在对应位置插入数据
        }
    });
</script>
</body>

10、自定义事件

this.$emit(‘自定义事件名’,参数)

实现参数传递与事件的并发

<body>
<div id="app">

    <!-- 改用插槽实现 -->
    <!-- <p>书籍目录</p>
    <ul>
        <li>Java</li>
        <li>Mybatis</li>
        <li>Python</li>
    </ul> -->

    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <!-- v-bind:title  => 简写： :title -->
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item="item" :index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

    // 组件
    Vue.component("todo",{
        // slot 定义插槽 实现动态编辑
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                  </div>'
    });

    Vue.component("todo-title",{
        props: ['title'],//传参
        template: '<p>{{title}}</p>'
    });
    Vue.component("todo-items",{
        props: ['item','index'],//传参
        // @ => v-on
        template: '<li>{{index}}---{{item}}<button @click="remove">删除</button></li>',
        methods:{
            remove: function(index){
                //
                this.$emit('remove',index);
            }
        }
    });

    // Vue 实例
    var vm = new Vue({
        el:"#app",
        data: {
            title: "秦老师系列列表",
            todoItems: ['狂神说Java','狂神说前端',"你好"] //前端就只需要在这改动数据就行，就会在对应位置插入数据
        },
        methods: {
            removeItems: function(index){
                console.log("删除了" + this.todoItems[index] + "OK");
                this.todoItems.splice(index,1);//一次只删除一个元素
            }
        }
    });
</script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XkzKuKDL-1628518619245)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809194741371.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3FFn5wV7-1628518619246)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809194819556.png)]

思路：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gQb3DPC6-1628518619246)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809194921789.png)]

11、总结

核心：数据驱动，组件化

常用属性

v-if
v-else-if
v-else
v-for
v-on 绑定事件，简写**@**
v-model 数据双向绑定
v-bind 给组件绑定参数，简写 :

组件化

solt 插槽，组合组件
this.$emit(‘自定义事件名’,参数); 组件内部绑定事件需要用到
计算属性的特色，缓存计算数据

12、第一个vue-cli项目

vue-cli是一个脚手架

12.1、安装NodeJS

官网：http://nodejs.cn/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cDmqTCzO-1628518619247)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809201610553.png)]

12.2、安装vue-cli

安装加速器：https://blog.csdn.net/m0_46462506/article/details/118641566?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162851321916780269846081%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=162851321916780269846081&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-1-118641566.first_rank_v2_pc_rank_v29&utm_term=npm+install+cnpm±g&spm=1018.2226.3001.4187

安装vue-cli：cnpm install vue-cli -g

测试：vue list

需要创建的文件地址下，用cmd创建项目：vue init webpack myvue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QgwnwodH-1628518619247)(C:\Users\11618\AppData\Roaming\Typora\typora-user-images\image-20210809210333351.png)]