Vue指令

2023-09-18

3.4k 词

Vue指令

Vue指令#

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

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

例如：

<!-- Vue指令：v-前缀的标签属性 -->
<div v-html="str"></div>

v-html:作用：设置元素的innerHTML

语法：v-html=" 表达式 "

练习-动态渲染标签#

将一个链接动态渲染到页面

<div id="link">
    <div v-html="msg"></div> 
</div>

const link = new Vue({
    el: '#link',
    data: {
        msg: `百度一下`,
    },
});

常用指令有10个，在官方API 中可以查看详细解释

v-show#

作用：控制元素显示隐藏

语法：

v-show="表达式"
<!-- 表达式值为true则显示，false隐藏 -->

原理：切换 display:none 控制显示隐藏
场景：频繁切换显示隐藏的场景
eg:鼠标移入显示对应模块内容，移出隐藏

v-if#

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

语法：

v-if="表达式"
<!-- 表达式值为true则显示，false隐藏 -->

原理：基于 条件判断 ，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换的场景
eg:登录提示信息，叉掉则隐藏不再显示

实例#

探索 v-show 和 v-if 的异同

v-show控制的盒子

v-if控制的盒子

当flag为true时，可以发现两个指令底层原理的不同

由 v-show 控制的盒子是通过切换css的 display:none 来将盒子隐藏掉的，实际盒子还在文档流中

而 v-if 则不同，它直接将其控制的盒子 从文档流中移除 ，即根据判断条件控制元素的创建和移除

<div id="hide">
    <div v-show="flag" class="testbox">v-show控制的盒子</div>
    <div v-if="flag" class="testbox">v-if控制的盒子</div>
</div>

const hide = new Vue({
    el: '#hide',
    data: {
        flag: false,
    },
});

v-else/v-else-if#

作用：辅助 v-if 进行判断渲染
语法：
```
v-else/v-else-if="表达式"
```
注意：需要紧挨着 v-if 一起使用

性别：男

性别：女

成绩评定A：奖励电脑一台

成绩评定B：奖励周末郊游

成绩评定C：奖励零食礼包

成绩评定D：惩罚一周不能玩手机

<div id="score">
    <p v-if="gender===1">性别：男</p>
    <p v-else>性别：女</p>
    <hr />
    <p v-if="score>=90">成绩评定A：奖励电脑一台</p>
    <p v-else-if="score>=70">成绩评定B：奖励周末郊游</p>
    <p v-else-if="score>=60">成绩评定C：奖励零食礼包</p>
    <p v-else>成绩评定D：惩罚一周不能玩手机</p>
</div>

// v-else v-else-if
const score = new Vue({
    el: '#score',
    data: { gender: 1, score: 80 },
});

v-on事件绑定#

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

语法：

v-on:事件名="内联语句"

v-on:事件名="methods中的函数名"

简写： @事件名
注意：methods函数内的 this指向Vue实例

<div id="count">
    <button v-on:click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
</div>

// v-on
const count = new Vue({
    el: '#count',
    data: { count: 0 },
});

以上效果采用的是第一种语法

但在实际开发中，全用内联语句来写不太现实

因此有第二种语法， methods 即vue实例对象中除 el 和 data 外的另一个属性，用于提供处理逻辑函数，以完成更多效果

而原本的内联语句，直接替换为methods中的逻辑 函数名 即可

hello vue

<div id="tooglevis">
    <button @click="toogleVis">切换显示隐藏</button>
    <p v-show="flag">hello vue</p>
</div>

const tooglevis = new Vue({
    el: '#tooglevis',
    data: { flag: true },
    methods: {
        toogleVis() {
            console.log('点击了切换');
            // 注意，模板中使用data的数据直接使用，而在methods中要使用data的数据需要用this
            // vue让提供的methods中的所有函数，this都指向当前实例，避免使用实例名操作数据时，若实例名改变其它都要改的情况
            this.flag = !this.flag;
        },
    },
});

v-on调用传参#

若在调用函数中需要传递参数，很简单，用实参传递形参接收

<p @click="fn(参数1,参数2)"></p>

自动售货机#

余额：{{ money }}

<div id="goods">
    <h5>自动售货机</h5>
    <button @click="buy(3)">可乐3元</button>
    <button @click="buy(10)">咖啡10元</button>
    <p>余额：{{ money }}</p>
</div>

// v-on调用传参
const goods = new Vue({
    el: '#goods',
    data: { money: 100 },
    methods: {
        buy(p) {
            this.money -= p;
        },
    },
});

v-bind属性绑定#

作用：动态地设置html的标签属性--src、url、title...
语法：
```
v-bind:属性名="表达式"
```
注意：简写形式： :属性名="表达式"

<div id="autumn">
    <img v-bind:src="imgUrl" :title="msg" alt="" />
</div>

// v-bind
const picbind = new Vue({
    el: '#autumn',
    data: {
        imgUrl: '/assets/images/self_Vue/cut_autumn.png',
        msg: 'hello autumn',
    },
});

案例-波仔学习之旅#

核心思路分析：

数组存储图片路径
准备下标index，用于取出图片路径-- v-bind 设置src展示图片--修改下标切换图片

<div id="bzstudy">
    <button @click="index--" v-show="index>0">上一页</button>
    <img :src="list[index]" alt="" />
    <button @click="index++" v-show="index<list.length-1">下一页</button>
</div>

// 案例-波仔的学习之旅
const bzstudy = new Vue({
    el: '#bzstudy',
    data: {
        index: 0,
        list: [
            '/assets/images/self_Vue/bozai/11-00.gif',
            '/assets/images/self_Vue/bozai/11-01.gif',
            '/assets/images/self_Vue/bozai/11-02.gif',
            '/assets/images/self_Vue/bozai/11-03.gif',
            '/assets/images/self_Vue/bozai/11-04.png',
            '/assets/images/self_Vue/bozai/11-05.png'
        ],
    },
});

v-for#

作用：基于数据（数组、对象、数字）循环，多次渲染整个元素
遍历数组语法：
```
v-for="(item, index) in 数组" :key="index"
```
item：每一项，index：下标

若用不上index，可以省略index：v-for="item in 数组"

v-for中的key#

语法： key属性="唯一标识"

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

若不加key，v-for的默认行为会尝试 原地修改元素（就地复用） ，比如删除一个li，不会删除li节点，而只是更新数据

注意点：

key的值只能是 字符串 或 数字类型
key的值必须具有唯一性
推荐使用 id 作为key（唯一），不推荐使用 index 作为key（会变化，不对应）

小黑水果店

{{ item }}

<div id="fruit">
    <p>小黑水果店</p>
    <ul>
        <li v-for="(item, index) in list">{{ item }}</li>
    </ul>
</div>

// v-for
const fruit = new Vue({
    el: '#fruit',
    data: {
        list: ['苹果', '西瓜', '梨'],
    },
});

案例-小黑的书架#

需求：1.渲染、2.删除功能

小黑的书架

{{ item.name }} {{ item.author }}

<div id="book">
    <p>小黑的书架</p>
    <ul>
        <li v-for="(item, index) in bookList" :key="item.id">
            <span>{{ item.name }}</span>
            <span>{{ item.author }}</span>
            <!-- 注册点击事件--通过id进行删除数组中的对应项 -->
            <button @click="removeBook(item.id)">删除</button>
        </li>
    </ul>
</div>

// 案例-小黑的书架
const book = new Vue({
    el: '#book',
    data: {
        bookList: [
            { id: 1, name: '《红楼梦》', author: '曹雪芹' },
            { id: 2, name: '《西游记》', author: '吴承恩' },
            { id: 3, name: '《水浒传》', author: '施耐庵' },
            { id: 4, name: '《三国演义》', author: '罗贯中' },
        ],
    },
    methods: {
        removeBook(id) {
            // 优先通过id删除对应项
            // filter:根据条件，保留满足条件的对应项，得到一个新数组
            this.bookList = this.bookList.filter(item => item.id !== id);
        },
    },
});

v-model#

作用：给 表单元素 使用， 双向数据绑定 --可以快速 获取或设置 表单元素内容
- 数据变化--视图自动更新
- 视图变化--数据自动更新
语法：
```
v-model='变量'
```

账户：
密码：

最新文章

标签

分类

归档

Vue指令

Vue指令#

练习-动态渲染标签#

v-show#

v-if#

实例#

v-else/v-else-if#

v-on事件绑定#

v-on调用传参#

自动售货机#

v-bind属性绑定#

案例-波仔学习之旅#

v-for#

v-for中的key#

案例-小黑的书架#

v-model#