Vue基础必备掌握知识点-Vue的指令系统讲解

不想睡醒的梦

已于 2023-11-14 18:51:33 修改

阅读量157

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端 web 前端框架

于 2023-11-14 10:39:51 首次发布

本文链接：https://blog.csdn.net/m0_52479012/article/details/134319444

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是Vue？

Vue的概念

Vue是一个用于构建用户界面的渐进式框架(通过数据渲染出用户所能够看到的界面)

Vue的两种使用方式

1：Vue核心包开发

场景：局部模块的改造

2：Vue核心包&Vue工程化的开发

场景：整站开发

Vue开发的优缺点:

优点：提高开发的效率,约提高70%之上，一套完整的项目解决方案

缺点：需要使用Vue框架的规则去实现，需要去记忆

你如果学过Java语言，那么你在学习这套框架，就会轻松一点，很多的知识点一看就能够看懂，不学过也没有关系，Vue框架规则十分的通俗易懂。

学习进入Vue世界的第一个案例:

直接上代码:

将数据渲染在页面上

body>
   <!-- 第一步:准备容器 -->
   <div id="app">{{msg}}</div>
   <!-- 第二步:引包(官网)：有两种版本，开发版本/生产版本:两种版本的应用场景不同 -->
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

   <!-- 第三步:创建Vue实例 -->
   <script>
        const app  = new Vue({
            // el指定挂载点
            el: '#app',
            // data方法是提供数据
            data:{
                msg:"不想睡醒的梦"
            }
        })
   </script>
</body>

运行页面

Vue指令

Vue会根据不同的指令实现不同的功能，Vue拥有着自身的一套规则

指令:带有v-前缀的特殊标签属性

<!--普通标签的属性-->
<div class="demo1"> </div>
<!--Vue框架的标签的属性-->
<div v-html="demo1"></div>

v-html：

作用：设置元素的InnerHTML(Html中的标签内容）

语法：v-html="表达式"

代码演示:代码实现的功能就是超链接

<body>
<div id="demo1">
    <div v-html="msg"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    //引入了
    const app = new Vue({
        el:'#demo1',
        data:{
            msg: '<a href="https://blog.csdn.net/m0_52479012?spm=1000.2115.3001.5343">"不想睡醒的梦"主页</a>'
        }
    })
</script>    
</body>

运行结果:点击链接就会实现网页的跳转

v-show与v-if两者有着异曲同工之妙

v-show:控制着元素的显示或者藏

语法:v-show="表达式" 布尔值，true显示，false则隐藏

v-if:通过条件去渲染元素

语法:v-if="表达式" 布尔值，true显示，false则隐藏

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            height: 100px;
            width: 200px;
            border-radius: 5px;
            box-shadow: 2px 2px 2px #ccc;
            border: 2px solid black;
            text-align: center;
            line-height: 100px;
        }
        .box2{
            margin-top: 10px;
            height: 100px;
            width: 200px;
            border-radius: 5px;
            box-shadow: 2px 2px 2px #ccc;
            border: 2px solid black;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-show="flag" class="box1">v-show控制的盒子</div>
        <div v-if="flag" class="box2">v-if控制的盒子</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                flag:true
            }
        })
    </script>
</body>
</html>

运行结果:

如果是隐藏，那么这两个的底层代码又有什么区别呢？

将flag:值，改为false

当需要隐藏时，发现了原始代码的变化得知

v-show与v-if的底层原理

v-show:切换css的display:none来控制显示隐藏

v-if:根据判断条件判断控制元素的创建和移除

v-else和v-else-if

与上面讲解的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>
</head>
<body>
    <div id="app">
        <!-- 性别进行判断 -->
        <p v-if="gender===1">男</p>
        <p v-else>女</p>
        <hr>
        <p v-if="score>=90">成绩：A</p>
        <p v-else-if="score>=70">成绩：B</p>
        <p v-else-if="score>=60">成绩：C</p>
        <p v-else=>成绩不合格</p>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                gender:2,
                score:80
            }
        })
    </script>
</body>
</html>

运行代码：

v-on：

作用:注册事件 = 添加监听 +提供处理逻辑

语法：

1）: v-on:事件名="内联语句"（例如: v-on:click="gendar--"：点击事件）

2）：v-on:事件名="methods中的函数名"（例如:<button @click="buy(3)">可乐</button> :按钮点击事件与方法连在一起）

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <div id="app">
        <!--按钮点击:实现数字的减少  -->
        <button v-on:click="gendar--">-</button>
        <!-- 当箭头放在按钮上实现数字的减少 -->
        <button @mouseenter="gendar--">-</button>

        {{gendar}}
        <!--按钮点击:实现数字的添加  -->
        <button v-on:click="gendar++">+</button>
        <!-- 当箭头放在按钮上实现数字的添加 -->
        <button @mouseenter="gendar++">+</button>
        <!-- 点击事件链接在methods中的方法:控制内容的显示或者隐藏 -->
        <button @click="fn">显示</button>
        <h1 v-show="isshow">不想睡醒的梦</h1>

        <!-- 案例：实现购买饮料业务（传参)  -->
        <button @click="buy(3)">可乐</button>
        <button @click="buy(5)">雪碧</button>
        <button @click="buy(10)">美年达</button>
        <p>余额:{{money}}</p>

    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                gendar:2,
                isshow :true,
                money:1000
            },
            methods: {
                fn(){
                    this.isshow = !app.isshow
                },
                buy(price){
                    this.money -=price
                }
            }
        })
    </script>
</body>
</html>

运行结果:

v-bind

作用:动态的设置html的标签属性例如：src url title 等标签

语法:v-bind:属性名="表达式"

案例实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo1">
        <img v-bind:src="img" v-bind:title="title" alt="">
        <!-- 更加简单的写法 -->
        <img :src="img" :title="title" alt="">

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#demo1",
            data:{
                img:"C:/Users/lenovo/Desktop/641.jpeg",
                title:"休闲时间"
            }
        })
    </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>
    <style type="text/css">
        img{
            height: 100px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="app">
        <button v-show="index > 0" @click="index--">上一页</button>
        <div>
            <img :src="list[index]" alt="index">
        </div>
        <button v-show="index < list.length - 1" @click="index++">下一页</button>
        <h3>美女合集</h3>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                index:0,
                list:[
                    './picture/1.jpg',
                    './picture/2.jpg',
                    './picture/3.jpg',
                    './picture/4.jpg',
                    './picture/5.jpg',
                    './picture/6.jpg',
                    './picture/7.jpg',
                    './picture/8.jpg',
                    './picture/9.jpg',
                ]
            }
        })
    </script>
</body>
</html>