Vue基础【二】

千梦、流羽

已于 2022-08-07 18:18:01 修改

阅读量113

点赞数

分类专栏： Vue 文章标签： vue.js 前端

于 2022-08-03 10:02:11 首次发布

本文链接：https://blog.csdn.net/qq_51133939/article/details/126109856

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue本地应用

v-text指令

v-text 指令的作用是：设置标签的内容；
默认写法会替换全部内容，使用插值表达式 {{}} 可以替换指定内容；

测试：

<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-text标签中使用data中的变量名，变量值会在标签内部显示 -->
        <h2 v-text="message + '!'"></h2>
        <h2 v-text="info + '!'"></h2>
        <h2>深圳{{message + "!"}}</h2>
    </div>

    <script>
        var app = new Vue({
            // id选择器
            el:"#app", 
            data:{
                message:"v-text的使用",
                info:"前端开发"
            }
        })
    </script>
</body>
</html>

效果：
在这里插入图片描述

v-html 指令

v-html 指令的作用是：设置元素的 innerHTML；
当 data 数据为普通文本时，v-text 和 v-html 指令几乎没有区别；
当 data 数据有 html 标签修饰时，v-text 不会解析 html 标签，而 v-html 指令会解析 data 数据中 html 标签显示在浏览器上。
解析文本内容使用 v-text，需要解析 html 标签使用 v-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>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <p v-text="content"></p>
        <p v-html="content"></p>
        <hr>
        <p v-text="message"></p>
        <p v-html="message"></p>
        <hr>
        <h2 v-text="text"></h2>
        <h2 v-html="text"></h2>
    </div>

    <script>
        var app = new Vue({
            // id选择器
            el: "#app",
            data: {
                content: "普通文本",
                message: "<p>有p2标签修饰的文本</p>",
                text: "<ul><li>第一个li标签</li><li>第二个li标签</li></ul>"
            }
        })
    </script>
</body>

</html>

效果：
在这里插入图片描述

v-on指令

v-on 指令的作用是：为元素绑定事件；
事件名不需要写 on；
指令可以简写为 @；
绑定的方法定义在 methods 属性中；
方法内部通过 this 关键字可以访问定义在 data 中的数据，this代指Vue实例对象

js 中事件(event)的事件三要素：

事件源：发生特定动作的 html 标签；
事件：发生特定动作事件，如单击事件-onclick，双击事件-ondblclick 等；
监听器：事件处理程序，一般在 js 中是事件处理函数 function()

v-on 的语法：v-on:事件名=“事件处理函数名”

测试：

<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="click">
        <input type="button" value="v-on指令使用@符号简写" @click="click">
        <input type="button" value="双击事件" @dblclick="click">
        <h2 @click="changeFood">
            {{food}}
        </h2>
    </div>

    <script>
        var app = new Vue({
            // id选择器
            el: "#app",
            data: {
                food: "西红柿炒蛋"
            },
            methods: {
                // 定义click函数
                click: function () {
                    alert("执行click函数");
                },
                changeFood: function () {
                    this.food += "！";
                }
            }
        })
    </script>
</body>

</html>

效果：
在这里插入图片描述

v-show指令

v-show 指令的作用是：根据表达式的真假，切换元素的显示与隐藏；
v-show 指令的本质是：更改标签的 display 状态，当不显示时添加 display:none，当显示时删除；
指令后面的内容，最终都会解析为 bool 值；
值为 true 的元素显示，为 false 时隐藏

测试：

<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <span v-show="isShow">显示</span>
        <hr>
        <input type="button" value="增加年龄" @click="addAge">
        <input type="button" value="减小年龄" @click="subAge">
        <div v-text="age"></div>
        <span v-show="age < 20">小于20岁显示</span>
        <br>
        <span v-show="age >= 18">大于等于18岁显示</span>
        <br>
        <span v-show="age < 18">小于18岁显示</span>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: true,
                age: 18
            },
            methods: {
                changeIsShow: function () {
                    this.isShow = !this.isShow;
                },
                addAge: function () {
                    this.age++;
                },
                subAge: function () {
                    this.age--;
                }
            },
        })
    </script>
</body>

</html>

效果：
在这里插入图片描述
当点击 切换显示状态后，显示二字会消失；
当点击增加年龄，减小年龄会对应增加和减少年龄，显示内容也会发生变化。

v-if 指令

v-if 指令的作用是：根据表达式的真假切换元素的显示状态；
本质是通过操纵 dom 元素来切换显示状态；
当表达式为 true 时，元素存在于 dom 树；当表达式为 false 时，元素从 dom 树中移除；

v-if 与 v-show 都能控制dom元素在页面的显示
v-if 相比 v-show 开销更大（直接操作dom节点增加与删除）
如果需要非常频繁地切换，则使用 v-show 较好
如果在运行时条件很少改变，则使用 v-if 较好

由于 v-if 和 v-show 除了原理几乎没有不同，在此不做测试。

v-bind 指令

v-bind 指令的作用是：为标签绑定元素；
完整写法是：v-bind:属性名
简写可以省略’v-bind’，只保留:属性名
设置 class，更建议使用对象的写法，三元表达式较为繁琐。
测试：

<!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>v-bind指令</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .active {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 切换类名class的两种方法，两种效果一样 -->
        <!-- 第一种：三元表达式，当isActive为true时，class为'active'，否则为'' -->
        <img v-bind:src="imgSrc" :class="isActive?'active':''" @click="toggleClass">
        <br>
        <!-- 简写，使用:属性名 ，这一种更为常用-->
        <!-- 第二种：对象的方法，当isActive为true时，class为active，否则为空-->
        <img :src="imgSrc" :title="imgTitle + '!'" :class="{active:isActive}" @click="toggleClass">

    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
                imgTitle: "图片名称",
                isActive: true
            },
            methods: {
                toggleClass: function () {
                    this.isActive = !this.isActive;
                }
            },
        })
    </script>
</body>

</html>

效果：
在这里插入图片描述
通过点击可以使红边框显示或消失。

v-for 指令

v-for 指令的作用：根据数据生成列表结构；
数组经常和 v-for 结合使用；
语法是 (item, index) in 数据；
item 和 index 可以结合其他指令一起使用；
数组长度的更新会同步到页面上，是响应式的

a. 遍历对象(使用较少)：v-for=“value, key, index in 对象”
b. 遍历数组：v-for=“item, index in 数组”
注意：在使用 v-for 时尽可能的使用 key 属性。v-bind:key=“item.id”（key中的值唯一）
这样有利于提高 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>v-for指令</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
        <br>
        <!-- 语法二：索引语法 -->
        <ul>
            <!-- 如果插值表达式中的值为数字，则会进行加减运算；如果为字符串，则会进行字符串连接。 -->
            <li v-for="(item, index) in arr">{{index + 1}}.{{item}}</li>
        </ul>
        <hr>
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">

        <p v-for="item in vegetables" :title="item.name">
            {{item.name}}{{item.comment}}
        </p>

    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["北京", "上海", "广州", "深圳"],
                vegetables: [{
                        name: "西红柿炒蛋",
                        comment: "好吃"
                    },
                    {
                        name: "鱼香肉丝",
                        comment: "好吃"
                    },
                    {
                        name: "炒洋葱",
                        comment: "不好吃"
                    },
                ]
            },
            methods: {
                add: function () {
                    this.vegetables.push({
                        name: "蒜苔炒肉",
                        comment: "超好吃"
                    })
                },
                remove: function () {
                    this.vegetables.shift();
                }
            },
        })
    </script>
</body>

</html>

效果：

在这里插入图片描述

v-model 指令

v-model 指令的作用是：用来将 html 的 value 属性进行绑定，主要用于表单验证获取数据；
绑定的数据会和表单元素的值相关联；
绑定数据的值与表单元素的值是双向绑定的；
测试：

<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="message" @keyup.enter="getMsg">
        <p>当文本框里的文本改变时，message也会同步改变：</p>
        <p>message：{{message}}</p>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "v-model双向绑定"
            },
            methods: {
                getMsg: function () {
                    alert(this.message);
                }
            },
        })
    </script>
</body>

</html>