Vue入门(二)常用指令

kong7906928

已于 2024-07-28 15:52:43 修改

阅读量665

点赞数 6

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

于 2024-07-26 16:43:15 首次发布

本文链接：https://blog.csdn.net/kong7906928/article/details/140714744

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、Vue 常用指令

Vue 常用指令

- 指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。

- 使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。

- 常用指令

二、常用指令介绍

2.1 文本插值 v-html：

-v-html：把文本解析为 HTML 代码。

与不加V-html 指令的div，对比demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本插值</title>
</head>
<body>
    <div id="div">
        <div>{{msg}}</div>
        <div v-html="msg"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:"<b>Hello Vue</b>"
        }
    });
</script>
</html>

执行结果：

2.2 绑定属性 v-bind：

- v-bind：为 HTML 标签绑定属性值。

绑定属性操作：

语法举例：绑定url：v-bind:href="url" ，简写语法::href="url" ，

绑定样式简写语法: :class="cls" ，

v-bind：绑定属性demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定属性</title>
    <style>
        .my{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div">
        <a v-bind:href="url">百度一下</a>
        <br>
        <a :href="url">百度一下</a>
        <br>
        <!--<a href="https://www.baidu.com">href百度一下</a>-->
           <br>
        <div :class="cls">我是div</div>
       <!-- <div class="my">我也是div</div>-->
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            url:"https://www.baidu.com",
            cls:"my"
        }
    });
</script>
</html>

2.3 条件渲染 v-if：

- v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。

- v-else：条件性的渲染。

- v-else-if：条件性的渲染。

- v-show：根据条件展示某元素，区别在于切换的是display属性的值。

示例：判断num的值，对3取余， div1余数为0时显示，div2 余数为1时显示，div3余数为2时显示， div4（v-show：）当flag 为true时显示，使用切换display属性的值实现。

条件渲染demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>
<body>
    <div id="div">
        <!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 -->
        <div v-if="num % 3 == 0">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>
        <div v-else="num % 3 == 2">div3</div>

        <div v-show="flag">div4</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:1,
            flag:false
        }
    });
</script>
</html>

2.4列表渲染v-for：

v-for：遍历容器的元素或者对象的属性。

示例：v-for 遍历数组和对象,通过无序列表ul显示;

v-for：列表渲染demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
</head>
<body>
    <div id="div">
        <ul>
            <li v-for="name in names">
                {{name}}
            </li>
            <li v-for="value in student">
                {{value}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"张三",
                age:23
            }

        }
    });
</script>
</html>

2.5 事件绑定 v-on：

v-on：为 HTML 标签绑定事件。

示例：

添加单击事件，写法: v-on:click="change()"
添加双击事件，写法:v-on:dblclick="change()"

添加事件简写形式:把v-on：去掉换成@+事件名称。如单击事件简写:@click="change()"

v-on：事件绑定demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <div id="div">
        <div>{{name}}</div>
        <button v-on:click="change()">改变div的内容(单击事件)</button>
        <button v-on:dblclick="change()">改变div的内容(双击事件)</button>

        <button @click="change()">改变div的内容(单击事件)</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"我是name"
        },
        methods:{
            change(){
                this.name = "改变name"
            }
        }
    });
</script>
</html>

2.6 表单绑定 v-model：

v-model：表单绑定

- 表单绑定
v-model：在表单元素上创建双向数据绑定。

双向数据绑定概念：更新data数据，页面中的数据也会更新。更新页面数据，data数据也会更新。

- MVVM模型(ModelViewViewModel)：是MVC模式的改进版
在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。
将Model和View关联起来的就是ViewModel，它是桥梁。
ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。

示例：

为form表单的username 和age 实现双向绑定；v-model：“username” v-model：“age”

   姓名：<input type="text" name="username" v-model="username">
            <br>
   年龄：<input type="number" name="age" v-model="age">

v-model：表单绑定demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单绑定</title>
</head>
<body>
    <div id="div">
        <form autocomplete="off">
            姓名：<input type="text" name="username" v-model="username">
            <br>
            年龄：<input type="number" name="age" v-model="age">
        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"张三",
            age:23
        }
    });
</script>
</html>

三、常用指令总结

常用指令总结:

- 指令：是带有v-前缀的特殊属性，不同指令具有不同含义。
- 文本插值 v-html：把文本解析为HTML代码。
- 绑定属性 v-bind：为HTML标签绑定属性值。
- 条件渲染
          v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
          v-else：条件性的渲染。
        v-else-if：条件性的渲染。
        v-show：根据条件展示某元素，区别在于切换的是display属性的值。

- 列表渲染 v-for：列表渲染，遍历容器的元素或者对象的属性。
- 事件绑定 v-on：为HTML标签绑定事件。
- 表单绑定 v-model：在表单元素上创建双向数据绑定。