Vue 指令补充（入门）

莫道一龙

于 2023-07-11 19:07:52 发布

阅读量96

点赞数

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

本文链接：https://blog.csdn.net/m0_57284405/article/details/131664295

版权

Vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

一、指令修饰符

1.什么是指令修饰符？

指令修饰符：就是通过" . "指明一些指令后缀，用于指出一个指令应该以特殊方式绑定，不同的后缀封装了不同的处理操作，主要目的是为了简化代码。

2.按键修饰符

@keyup.enter —>当点击enter键的时候才触发

<body>
    <div id="app">
        <input type="text" @keyup.enter="enter">
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
            },
            methods:{
                enter(){
                    console.log(1);
                }
            }
        })
    </script>
</body>

3.v-model修饰符

v-model.trim —>在修改文本框内容时，会忽略前后的空格
v-model.number —>在修改文本框内容时，会将修改后的内容转为number类型
v-model.lazy —>在文本框失去焦点后在更新数据

<body>
    <div id="app">
        <input type="text" v-model.trim="username">
        <input type="text" v-model.number="pwd">

        <input type="text" v-model.lazy="msg">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                username,
                pwd
            },
            methods:{
                enter(){
                    console.log(1);
                }
            }
        })
    </script>
</body>

4.事件修饰符

@事件名.stop —> 阻止冒泡
@事件名.prevent —>阻止默认行为
@事件名.stop.prevent —>可以连用即阻止事件冒泡也阻止默认行为

<style>
    .fa {
        width: 400px;
        height: 400px;
        background-color: aquamarine;
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
</style>
<body>
    <div id="app">
        <div class="fa" @click="faFn">
            <div class="son" @click.stop="sonFn">
            </div>
        </div>
        <a href="www.baidu.com" @click.prevent="">百度(废弃)</a>
        <div class="son" @click="sonFn">
            <a href="www.baidu.com" @click.prevent.stop="fn">百度(废弃)</a>
        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {

            },
            methods: {
                faFn() {
                    alert('父亲')
                },
                sonFn() {
                    alert('儿子')
                },
                fn(){
                    console.log('这个链接已经废弃了');
                }
            }
        })
    </script>
</body>

二、v-bind对样式控制的增强

为方便开发者对样式进行控制，Vue扩展了v-bind的语句，可以针对class类名和style行内样式进行控制。

1.操作class

语法：

<div> :class = "对象/数组">这是一个div</div>

对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

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

数组语法

当class动态绑定的是数组时，数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

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

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

示例

<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        display: flex;
        border-bottom: 2px solid #e01222;
        padding: 0 10px;
    }
    li {
        width: 100px;
        height: 50px;
        line-height: 50px;
        list-style: none;
        text-align: center;
    }
    li a {
        display: block;
        text-decoration: none;
        font-weight: bold;
        color: #333333;
    }
    li a.active {
        background-color: #e01222;
        color: #fff;
    }
</style>

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" :key="item.id" @click="activeIndex= index"><a :class="{ active : index === activeIndex }" href="#">{{ item.name }}</a></li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                activeIndex:0,
                list: [
                    { id: 1, name: '京东秒杀' },
                    { id: 2, name: '每日特价' },
                    { id: 3, name: '品类秒杀' }
                ]
            }
        })
    </script>
</body>

2.操作style

语法

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

示例

<body>
    <div id="app">
        <div style="width: 200px; height: 200px; background-color: aquamarine;"></div>
        <div :style="{width:'200px',height:'200px',backgroundColor:'aqua'}"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
        })
    </script>
</body>

经典进度条案例

<style>
    .progress {
        height: 25px;
        width: 400px;
        border-radius: 15px;
        background-color: #272425;
        border: 3px solid #272425;
        box-sizing: border-box;
        margin-bottom: 30px;
    }

    .inner {
        width: 50%;
        height: 20px;
        border-radius: 10px;
        text-align: right;
        position: relative;
        background-color: #409eff;
        background-size: 20px 20px;
        box-sizing: border-box;
        transition: all 1s;
    }

    .inner span {
        position: absolute;
        right: -20px;
        bottom: -25px;
    }
</style>

<body>
    <div id="app">
        <div class="progress">
            <div class="inner" :style="{width: width+'%',backgroundColor: bgc}">
                <span >{{ width }}%</span>
            </div>
        </div>
        <button @click="width = 20;bgc='aquamarine'">设置25%</button>
        <button @click="width = 50;bgc='aqua'">设置50%</button>
        <button @click="width = 75;bgc='pink'">设置75%</button>
        <button @click="width = 100;bgc='#ff4079'">设置100%</button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                width:0,
                bgc: '#409eff'
            }
        })
    </script>
</body>

三、v-model在其他表单元素的使用

常见的表单元素可以用v-model绑定关联，快速获取或设置表单元素的值。
v-model会根据控件类型自动选取正确的方法来更新元素

输入框  input:text   ——> value
文本域  textarea	 ——> value
复选框  input:checkbox  ——> checked
单选框  input:radio   ——> checked
下拉菜单 select    ——> value
...

示例

<style>
    textarea {
        display: block;
        width: 240px;
        height: 100px;
        margin: 10px 0;
    }
</style>

<body>
    <div id="app">
        <h3>莫道相亲网</h3>
        姓名：
        <input type="text" v-model="username">
        <br><br>
        是否单身：
        <input type="checkbox" v-model="isSingle">
        <!-- <input type="checkbox" :checked="isSingle" @change="isSingle = $event.target.checked"> -->
        <br><br>
        <!-- 
          前置理解：
            1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
            2. value: 给单选框加上 value 属性，用于提交给后台的数据
          结合 Vue 使用 → v-model
        -->
        性别:
        <input type="radio" v-model="sex" value="男">男
        <input type="radio" v-model="sex" value="女">女
        <br><br>
        <!-- 
          前置理解：
            1. option 需要设置 value 值，提交给后台
            2. select 的 value 值，关联了选中的 option 的 value 值
          结合 Vue 使用 → v-model
        -->
        所在城市:
        <select v-model="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="chengdu">成都</option>
            <option value="nanjing">南京</option>
        </select>
        <br><br>
        自我描述：
        <textarea v-model="desc"></textarea>
        <button>立即注册</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                username: '',
                isSingle: false,
                sex: '男',
                city:'shanghai',
                desc:''
            }
        })
    </script>
</body>