Vue--1.4Vue指令

小沐°2023-09-14 2:37

Vue会根据不同的指令，针对标签实现不同的功能。

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

v-前缀="表达式"

1.v-html

作用:动态解析标签innerHTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="Author" content=""/>
  <meta name="Keywords" content=""/>
  <meta name="Description" content=""/>
</head>
<body>
<div id="app">
    <div v-html="msg"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            msg:'<a href="http://www.itheima.com">黑马程序员</a>'
        }
    })
</script>
</html>

2.v-show

作用：控制元素显示隐藏

语法：v-show="表达式" 表达式值true显示，false隐藏

原理：从css角度进行了隐藏，添加了display:none;

场景：频繁切换显示隐藏的场景

3.v-if

作用：控制元素显示隐藏（条件渲染）

语法：v-if="表达式" 表达式值true显示，false隐藏

场景：要么显示，要么隐藏，不频繁切换的场景

4.v-else v-else-if

作用：辅助v-if进行判断渲染

语法：v-else v-else-if="表达式"

注意：需要紧挨着v-if一起使用

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="Author" content=""/>
  <meta name="Keywords" content=""/>
  <meta name="Description" content=""/>
</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>=75">成绩评定B:奖励周末郊游</p>
    <p v-else-if="score>=60">成绩评定C:奖励零食礼包</p>
    <p v-else>成绩评定D:奖励一周不能玩手机</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            gender:1,
            score:80
        }
    })
</script>
</html>

5.v-on

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

语法：1）v-on：事件名="内联语句"

2）v-on：事件名="methods中的函数名"

简写：@事件名=""

注意：methods函数内的this指向Vue实例

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="Author" content=""/>
  <meta name="Keywords" content=""/>
  <meta name="Description" content=""/>
</head>
<body>
<div id="app">
    <!-- 鼠标点击 -->
    <button @click="count--">-</button>    <!-- @=v-on: -->
    <span>{{count}}</span>
    <button v-on:click="count++">+</button>
    <hr>
    <!-- 鼠标划入 -->
    <button v-on:mouseenter="count--">-</button>
    <span>{{count}}</span>
    <button v-on:mouseenter="count++">+</button>
    <hr>
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">黑马程序员</h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            count:0,
            isShow:true
        },
        methods:{
            //methods中的函数使用this都指向当前实例
            fn(){
                app.isShow=!app.isShow  //this.isShow=!this.isShow
            }
        }
    })
</script>
</html>

v-on调用传参

实例：饮料自动贩卖机

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="Author" content=""/>
  <meta name="Keywords" content=""/>
  <meta name="Description" content=""/>
</head>
<body>
<div id="app">
    <div style="border:2px solid #000;width:140px;height:auto;padding:20px;border-radius:15px;">
        <h3>饮料自动售货机</h3>
        <button @click="buy(5)">可乐5元</button>
        <button @click="buy(10)">咖啡10元</button>
    </div>
    <p>银行卡余额:{{money}}元</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            money:100
        },
        methods:{
            buy(a){
                this.money-=a
            }
        }
    })
</script>
</html>

6.v-bind

作用：动态的设置html的标签属性->src url title......

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

简写：:属性名="表达式"

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="Author" content=""/>
  <meta name="Keywords" content=""/>
  <meta name="Description" content=""/>
</head>
<body>
<div id="app">
    <!-- v-bind:src可简写为:src -->
    <img v-bind:src="imgUrl" v-bind:title="msg">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            imgUrl:'./image/logo.jpeg',
            msg:'hello Vue'
        }
    })
</script>
</html>

实例：图片轮播

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="Author" content=""/>
  <meta name="Keywords" content=""/>
  <meta name="Description" content=""/>
</head>
<body>
<div id="app">
    <button @click="i--" v-show="i>0">上一页</button>
    <img :src="imgList[i]" style="width:300px;">
    <button @click="i++" v-show="i<imgList.length-1">下一页</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            i:0,
            imgList:[
                './image/1.jpg',
                './image/2.jpg',
                './image/3.jpg',
            ]
        }
    })
</script>
</html>

v-bind对于样式控制的增强

为了方便开发者进行样式控制，vue扩展了v-bind的语法，可以针对class类名和style行内样式进行控制。还要注意样式优先级。

操作class语法： :class="对象/数组"

1）对象->键就是类名，值是布尔值。如果值为true,有这个类，否则没有这个类。

<div class="box" :class="{类名1:boolean，类名2:boolean}"></div>

适用场景：一个类名，来回切换

2)数组->数组中所有的类，都会添加到盒子上，本质就是一个class列表

<div class="box" :class="['类名1','类名2','类名3']"></div>

适用场景：批量添加或删除类

案例：tab导航高亮

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="Author" content=""/>
  <meta name="Keywords" content=""/>
  <meta name="Description" content=""/>
  <style>
    .tab li{
        width:100px;
        height:40px;
        float:left;
        text-align:center;
        font:700 18px simsun;
        line-height:40px;
        color:#000;
    }
    .tab li a{
        text-decoration:none;
    }
    .active{
        background-color:#409EFF;
        color:#fff;
    }
    .active a{
        color:#fff;
    }
  </style>
</head>
<body>
<div id="app">
    <ul class="tab" style="list-style:none;" v-for="(item,index) in list" :key="item.id" @click="activeIndex=index" @mouseover="activeIndex=index">
        <li :class="{active:index==activeIndex}">
            <a href="#">{{item.name}}</a>
        </li>
    </ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            activeIndex:0,
            list:[
                {id:0,name:"京东秒杀"},
                {id:1,name:"每日特价"},
                {id:2,name:"品类秒杀"}
            ]
        }
    })
</script>
</html>

操作style语法：:style="样式对象"

注意：js中不支持-的属性名，例如：background-color应该加引号，或者使用驼峰式命名法写成backgroundColor。

<div class="box" :style="{css属性名1:'css属性值',css属性值2:'css属性值'}"></div>

适用场景:某个具体属性的动态设置

案例：进度条

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="Author" content=""/>
  <meta name="Keywords" content=""/>
  <meta name="Description" content=""/>
  <style>
    .progress{
        width:400px;
        height:30px;
        background-color: #409EFF;
        border-radius:20px;
        border:2px solid #409EFF;
    }
    .inner{
        width:100px;
        height:30px;
        background-color: #fff;
        border-radius:20px;
        transition:all 1s;
    }
  </style>
</head>
<body>
<div id="app">
    <div class="progress">
        <div class="inner" :style="{width:innerWidth+'%'}">
            <span style="line-height:30px;float:right;">{{innerWidth+"%"}}</span>
        </div>
    </div>
    <button @click="innerWidth=10">10%</button>
    <button @click="innerWidth=70">70%</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            innerWidth:"50"
        }
    })
</script>
</html>

7.v-for

作用：基于数据循环，多次渲染整个元素 ->数组、对象、数字...

语法：v-for="(item,index) in 数组" item是每一项，index是下标

如果不需要index，可简写为v-for="item in 数组"

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="Author" content=""/>
  <meta name="Keywords" content=""/>
  <meta name="Description" content=""/>
</head>
<body>
<div id="app">
    <h3>水果店</h3>
    <ul>
        <li v-for="(item,index) in list">{{item}}</li>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            list:['西瓜','葡萄','桃子']
        }
    })
</script>
</html>

实例：书架

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="Author" content=""/>
  <meta name="Keywords" content=""/>
  <meta name="Description" content=""/>
</head>
<body>
<div id="app">
    <h3>书架</h3>
    <ul>
        <li v-for="(item,index) in booksList">
            <span>{{item.name}}</span>
            <span>{{item.author}}</span>
            <button @click="del(item.id)">删除</button>
        </li>
    </ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            booksList:[
                {id:1,name:'《红楼梦》',author:'曹雪芹'},
                {id:2,name:'《西游记》',author:'吴承恩'},
                {id:3,name:'《水浒传》',author:'施耐庵'},
                {id:4,name:'《三国演义》',author:'罗贯中'}
            ]
        },
        methods:{
            del(id){
                //filter:根据条件，保留满足条件的对应项，得到一个新数组
                //箭头函数filter(item=>item.id!==id)相当于filter(item){item.id!==id}
                this.booksList=this.booksList.filter(item=>item.id!=id)
            }
        }
    })
</script>
</html>
v-for中的key

语法：：key=""

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

如果不添加key，那么v-for的默认行为会尝试原地修改元素（就地复用）

注意点：

1）key的值只能是字符串或数字类型

2）key的值必须具有唯一性

3）推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

<li v-for="(item,index) in xxx" :key="xxx.id"></li>

8.v-model

作用：给表单元素使用，双向数据绑定->可以快速获取或设置表单元素内容

1)数据变化->试图自动更新

2)视图变化->数据自动更新

语法：v-model='变量'

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="Author" content=""/>
  <meta name="Keywords" content=""/>
  <meta name="Description" content=""/>
</head>
<body>
<div id="app">
    账户：<input type="text" v-model="username"><br><br>
    密码：<input type="password" v-model="password"><br><br>
    <button @cilck="login">登录</button>
    <button @click="reset">重置</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            username:'',
            password:''
        },
        methods:{
            login(){
                console.log(this.username)
            },
            reset(){
                this.username='',
                this.password=''
            }
        }
    })
</script>
</html>

v-model应用于其他表单元素，会根据控件类型自动选取正确的方法来更新元素。

相关推荐
everyStudy24 分钟前
前端五种排序
前端·算法·排序算法
甜兒.1 小时前
鸿蒙小技巧
前端·华为·typescript·harmonyos
她似晚风般温柔7894 小时前
Uniapp + Vue3 + Vite +Uview + Pinia 分商家实现购物车功能（最新附源码保姆级）
开发语言·javascript·uni-app
Jiaberrr5 小时前
前端实战：使用JS和Canvas实现运算图形验证码（uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy5 小时前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白5 小时前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、5 小时前
Web Worker 简单使用
前端
web_learning_3215 小时前
信息收集常用指令
前端·搜索引擎
Ylucius5 小时前
动态语言？ 静态语言？ ------区别何在？java，js，c，c++，python分给是静态or动态语言？
java·c语言·javascript·c++·python·学习
tabzzz6 小时前
Webpack 概念速通：从入门到掌握构建工具的精髓
前端·webpack
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02RAG 实践- Ollama+RagFlow 部署本地知识库032024年高教社杯数学建模国赛C题超详细解题思路分析04【halcon】halcon字符识别——OCR05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提072024年网络安全比赛--系统渗透测试（超详细）08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10分享几个惊艳的 Three.js 个人站点