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应用于其他表单元素，会根据控件类型自动选取正确的方法来更新元素。

相关推荐
关山月21 分钟前
掌握package.json：全面指南🚀
前端
GISer_Jing28 分钟前
Javascript数据结构——图Graph
开发语言·javascript·数据结构
平行线也会相交33 分钟前
云图库平台（四）——前端用户模块开发
前端·vue·云图库平台
_xaboy35 分钟前
开源的Vue低代码表单设计器 form-create-designer v3.2.9 版本发布，新增10多种功能
vue.js·低代码·开源·表单·formcreate·可视化表单设计器
rock——you35 分钟前
quasar v2 setup语法中报错： undefined is not an object (evaluating ‘this.$q.notify‘)
前端·javascript·vue.js·quasar
十月雨眠1 小时前
使用three.js 实现vr全景图展示，复制即可用
开发语言·javascript
朱小勇本勇2 小时前
Python-Pdf转Markdown
前端·python·pdf
EasyNTS2 小时前
EasyPlayer.js遇到播放RTMP视频时，画面显示异常是什么原因？
开发语言·javascript·音视频
小满zs2 小时前
React第二十章(useMemo)
前端·javascript·react.js
赵大仁2 小时前
Tailwind CSS：现代 CSS 框架的优雅之选
前端·javascript·vue.js·前端框架·css3·html5·scss
热门推荐
01新手学习VR全景需要知道的几个问题02docker安装启动问题解决排查03HCIA-datacom数通题库和录播视频资料04【一文读懂】NTN（非地面网络）技术介绍05ZZ038 物联网应用与服务赛题第J套06玄机平台应急响应—webshell查杀07西门子200SMART SB AE01的正确用法08Gitlab ci/cd09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10github pages + jekyll个人网页