Vue概述常用指令-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_61102549/article/details/131919209

Vue是一个前端框架，基于MVVM模式，简化DOM操作，提供数据双向绑定。文章介绍了Vue的快速入门，包括创建Vue对象和数据模型，以及展示视图。此外，还详细讲解了Vue的常用指令，如v-model用于双向数据绑定，v-on处理事件，v-if/v-else-if/v-else进行条件渲染，v-show控制元素显示，v-for进行列表渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue概述

Vue快速入门

常用指令

Vue概述

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
机遇MVVM（由三部分组成Model-View-View Model）思想，实现数据的双向绑定，将编程的关注点放在数据上。

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基础框架进行开发，更加快捷，更加高效。

Vue快速入门

新建HTML页面，引入Vue.js文件

<script src="js/vue.js"></script>

在JS代码区域，创建Vue核心对象，定义数据模型

el代表Vue它要控制哪个区；其中data就是定义的数据模型

<script>
    new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!";
        }
    })
</script>

编写视图

<div id="app">
    <input type="text" v-model="message ">
    {{message }}//插值表达式
</div>

插值表达式：

形式：{{表达式}}
内容可以是：变量三元运算符函数调用算数运算

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入门</title>
    <!-- 引入vue的js文件 -->
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 编写视图层的展示 -->
    <div id="app">
        <!-- v-model是进行数据绑定的指令 -->
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>
<script>
    // 定义vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            message:"Hello"
        }
    })
</script>
</html>

常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令含义不同。
常用指令

指令	作用
v-bind	为HTML标签绑定属性值，如设置href，css样式
v-model	在表单元素上（input）创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-blind：

例子：
<a v-blind:href="url">教鱼</a>
简化写法：
<a :href="url">教鱼</a>

注意：

表单元素就是输入框
通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

v-on：

若想为button绑定一个单击事件则，

 <input type="button" value="按钮" v-on：click="handle()">
 <!-- 简化写法 -->
 <input type="button" value="按钮" @click="handle()">

例子：

<!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">
        <!-- <input type="button" value="点我一下" v-on:click="handle()"> -->
        <input type="button" value="点我一下" @click="handle()">
        

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{


        },
        // 在methods中可以定义很多的方法
        methods:{
            handle:function(){
                alert("1111");

            }

        }
    })
</script>
</html>

点击后的运行结果：

条件渲染的指令 v-if、v-else-if、v-else、v-show

v-if 若年龄小于等于35，则进行展示，不再进行第二条与第三条并比较。

v-else-if
v-else
v-show

测试代码：

<!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">
        年龄<input type="text" v-model="age">经判定为：
        <span v-if="age<=35">年轻人（35及以下）</span>
        <span v-else-if="age>35&&age<60">中年人（）35-60</span>
        <span v-else="age>=60">老年人</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定为：
        <span v-show="age<=35">年轻人（35及以下）</span>
        <span v-show="age>35&&age<60">中年人（35-60）</span>
        <span v-show="age>=60">老年人</span>
    </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            age:20
        },
        methods:{

}

    })

</script>
</html>

注意：v-show与v-if的主要区别就是：v-show是通过display来控制这个元素是展示出来，还是隐藏。如果是v-if条件不成立，则浏览器不渲染；v-show则如果条件不成立，浏览器也会渲染。

v-for

形式：

<!-- 第一个addr指遍历出来的元素 -->
<div v-for="addr inaddrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>

测试样例：

<!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">
        <!-- index遍历的索引 items遍历的元素 -->
        <div v-for="addr in addrs">{{addr}}</div>
        <hr>
        <div v-for="(addr,index) in addrs">{{index}}:{{addr}}</div>

        <hr>
        <!-- 若要想从索引1开始 -->
        <div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>


    </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            addrs:['北京','上海','西安','成都']
        },
        methods:{

}

    })

</script>
</html>

结果为：