Vue的学习-CSDN博客

本文链接：https://blog.csdn.net/weixin_45852471/article/details/123724466

1.Vue简介

1.1作者：尤雨溪
1.2官网：https://cn.vuejs.org/index.html

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

1.4 Vue是MVVM框架
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
如图

看到了这里是不是一脸懵逼，没事，接着来看具体的操作，后面再慢慢理解。

2.Vue的基本使用

在Vue的起步中，区分开发环境和生产环境，两者的不同，开发环境可以清晰的看清源码，生产环境就是将源码进行压缩，占比大小更小，我们学习过程中使用生产环境

在这里插入图片描述

2.1把Vue.js保存到本地

把Vue.js的官网地址复制到浏览器打开
ctrl + A 全选代码
创建一个vue.js的文件，把赋值的js代码粘贴进去即可
检验vue.js是否成功复制到本地

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <div>11111</div>
   <script src="js/vue.js"></script>
   <!-- 测试 -->
   <script>
       alert(Vue);
   </script>
</body>
</html>

如果显示，则成功了！
在这里插入图片描述注意：在vscode里面写的代码，需要ctrl+s保存之后才会生效哦！！！

2.2关于Vue的数据驱动视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        当前数字为：{{a}} <br>
        <button @click="add">点我加1</button>
        <button @click="minus">点我减1</button>
    </div>
    <script>
        new Vue({
            el: "#app", // 挂载点
            data: { // 数据
                a: 10
            },
            methods: { // 方法
                add(){
                    this.a++
                },
                minus(){
                    this.a--
                }
            }
        });
    </script>
</body>
</html>

效果：
在这里插入图片描述
可以发现我们并没有对视图进行更新，但是Vue自动帮我更新了视图数据，是不是很神奇，哈哈哈！

2.3 Vue的插值语法

插值语法是通过一对{{}}进行书写，内部是对data数据管理中心的属性进行渲染，也可以是表达式moustache（胡子）是双大括号学名，也叫（胡子语法）
在2.2那个例子里面已经使用过了插值语法
当然插值语法内部也可以是表达式例如

{{ a >= 100 ? 20 : 10}}

但是注意不至于复杂的运算，比如含有if的语句

补充：所有的对象中的清单内容，都是Vue规定，内置的，不可以自由发挥
例如 el就是挂载点，data就是数据，methods就是方法名字不可以被改变

2.4 指令

2.4.1 v-if

v-if 的作用是通过一个布尔表达式进行对dom的上树和下树的渲染
基本使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-if="false">我是第一行dom元素</p>
        <p v-if="true">我是第二行dom元素</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {

            },
            methods: {
                
            }
        })
    </script>
</body>
</html>

效果如下：发现第一行元素没有了

在这里插入图片描述
但是我们在实际的开发中，不是直接用布尔值来放在v-if里面使用的，而是通过data带有布尔值的进行渲染
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-if="!boo">我是第一行dom元素</p>
        <p v-if="boo">我是第二行dom元素</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                boo : false
            },
            methods: {

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

还有就是可以使用表达式来进行逻辑判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 如果a的值大于了5 则显示 -->
        {{a}}
        <p v-if="a > 5">我是第一行dom元素</p>
        <br>
        <button @click="add">点击我加1</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                a :1
            },
            methods: {
                add(){
                    this.a++
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

当然有v-if，那必然有v-else和v-else-if
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 如果a的值大于了5 则显示 -->
        {{a}}
        <p v-if="a < 5">我小于5</p>
        <p v-else-if="a >= 5 && a <= 10">我大于5，但是小于等于10</p>
        <p v-else="a > 10">我大于10</p>
        <br>
        <button @click="add">点击我加1</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                a :1
            },
            methods: {
                add(){
                    this.a++
                }
            }
        })
    </script>
</body>
</html>

需要注意的是v-else的使用前提是必须先有v-if并且中间不允许有任何的元素间隔下面这样是不行的

~~<p v-if='boo >= 0 && boo <= 5'>我是5</p>
<div></div>
<p v-else="boo > 20">我是大于20</p>~~

2.4.2 v-show

v-show和v-if的显示情况类似，但是原理不一样，v-show是通过控制元素的display属性，对元素的显示和隐藏进行逻辑判断，并没有实现元素的下树

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 如果a的值大于了5 则显示 -->
        {{a}}
        <p v-show="a > 5">我大于5</p>
        <br>
        <button @click="add">点击我加1</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                a :1
            },
            methods: {
                add(){
                    this.a++
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

使用场景：v-show和v-if的使用场景区分是如果页面切换的特别频繁使用v-show，如果页面的涉及范围特别大并且不是特别频繁的切换使用v-if，因为主要区分是涉及到页面的加载性能

2.4.3 v-for

v-for是vue 的循环指令，作用是遍历数组（对象）的每一个值

遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="js/vue.js"></script>
</head>
<body>
   <div id="app">
       <ul>
           <li v-for="(item,index) in arr">{{index}}-{{item}}</li>
       </ul>
   </div>
   <script>
       new Vue({
           el: "#app", // 挂载点
           data: { // 数据
               arr: [1,2,3,4,5,6,7]
           },
       });
   </script>
</body>
</html>

在这里插入图片描述

此时的item代表的是数组的元素，index为数组的下标

遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in obj">{{index}}-{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app", // 挂载点
            data: { // 数据
                obj:{
                    name: "小王",
                    age: 18,
                    height: 65,
                    high: 170
                }
            },
        });
    </script>
</body>
</html>

在这里插入图片描述

此时我们发现一个有趣的现象，为什么这个 index这个时候不是下标，而是属性名称呢，别急，看看下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,key,index) in obj">{{index}}-{{key}}-{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app", // 挂载点
            data: { // 数据
                obj:{
                    name: "小王",
                    age: 18,
                    height: 65,
                    high: 170
                }
            },
        });
    </script>
</body>
</html>

在这里插入图片描述

此时发现有下标值了，于是我们得出结论，当我们遍历对象的时候，需要注意，第一个值为属性值，第二值为属性名，第三个才是下标值

遍历json

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="js/vue.js"></script>
   <style>
       table,tr,td{
           border: 1px solid #222;
           border-collapse: collapse;
       }
   </style>
</head>
<body>
   <div id="app">
       <table>
           <tr v-for="item in arr">
               <td v-for="value in item">{{value}}</td>
           </tr>
       </table>
   </div>
   <script>
       new Vue({
           el: "#app", // 挂载点
           data: { // 数据
               arr: [
                   {name:"小王",age:18,height:65},
                   {name:"小刘",age:19,height:63},
                   {name:"小红",age:17,height:42},
                   {name:"小刚",age:21,height:70}
               ]
           },
       });
   </script>
</body>
</html>

在这里插入图片描述

两个for循环搞定，第一for遍历出行，第二个for遍历出行中的列,我们实际开发中遍历json数据的居多

补充

<li v-for="(item,key,index) in obj" :key="index">{{index}}-{{key}}:{{item}}</li>

key是用来给每一项值加元素标识，作用是为了区分元素，为了实现最小量的更新

利用v-for打印九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        table,tr,td{
            border: 1px solid #222;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <tr v-for="i in arr">
                <td v-for="j in i">{{i}}*{{j}}={{i*j}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el: "#app", // 挂载点
            data: { // 数据
                arr: [1,2,3,4,5,6,7,8,9]
            },
        });
    </script>
</body>
</html>

在这里插入图片描述