vue基础

最新推荐文章于 2024-08-28 21:23:59 发布

David凉宸

最新推荐文章于 2024-08-28 21:23:59 发布

阅读量218

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/blue_698/article/details/114382090

版权

Vue 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

Vue的安装

vue的兼容性：

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器

可以下载也可以直接引入网络节点：

下载地址：下载后就是一个js文件

https://cn.vuejs.org/js/vue.js

https://cn.vuejs.org/js/vue.min.js

在这里插入图片描述

下载完毕后用script标签引入即可

直接引用网络节点：

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

用 Vue 构建大型应用时可以使用npm下载最新版

npm install vue

初识Vue

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

MVVM模式

（Model-View-ViewModel 的缩写）–后面会继续学，也可以去B站找视频

在这里插入图片描述

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>
</head>

<body>
    <div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {

        }
    });
</script>

</html>

运用：

<!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>
    <style>
        .dox {
            width: 300px;
            height: 300px;
            background: #000;
        }
    </style>
</head>

<body>
    <div id="app">
    
        <button v-on:click='togglePage'>点击</button>
        //初始是默认有class类名为dox
        //如果isLogin为true则有类名，false无类名
        <div :class='isLogin?"dox":""'></div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            isLogin: true
        },
        methods: {
        //点击事件
            togglePage: function() {
                this.isLogin = !this.isLogin;
            }
        }
    })
</script>

</html>

Vue渲染

条件渲染

v-if : 条件性地渲染一块内容

v-if
v-else-if 作为else if 使用
v-else

<!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 id="app">
        <p>你好，{{name}}</p>
        //pa判断是否
        <h3 v-if="isA">用户类型：A </h3>
        <h3 v-else-if="isB">用户类型：B </h3>
        <h3 v-else>用户类型：C </h3>
        //如果随机随机数大于0.5输出yes反则输出no
        <h3 v-if="Math.random() > 0.5">yes</h3>
        <h3 v-else="Math.random() < 0.5">no</h3>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "小明",
                isA: false,
                isB: false
            }
        })
    </script>
</body>


</html>

v-show

<!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 id="app">
        <h1 v-show="ok">Hello!</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
            //ok为true则显示h1内容，反之不显示
                ok: true
            }
        })
    </script>
</body>


</html>

v-show不支持元素

v-if vs v-show

	v-if	v-show
方式	删除创建DOM元素	display样式
条件	直到为真才会渲染	任何条件都会渲染
性能	更高的切换消耗	更高的初始加载消耗
场景	条件很少改变	频繁切换

v-for

<p v-for = "item index in arrs" :key = "index"></p>

v-for 中使用数组

//v-for = "item in arr" item->(item,index) 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>
</head>

<body>

    <div id="app">
        <h1 v-for="(item,index) in arr">{{index}}--{{item}}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                arr: [1, 2, 4]
            }
        })
    </script>
</body>


</html>

在这里插入图片描述

v-for中使用对象

//v-for = "value in obj" value -> (value,name,index) value为值，name为属性，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>
</head>

<body>

    <div id="app">
        <h1 v-for="(value,name,index) in obj">{{value}}--{{name}}--{{index}}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                obj: {
                    id: 1,
                    name: '张三'
                }
            }
        })
    </script>
</body>


</html>

在这里插入图片描述

列表＋条件渲染

使用v-for + v-if
永远不要把 v-if 和 v-for 同时用在同一个元素上。

一般我们在两种常见的情况下会倾向于这样做：

为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)