vue指令

真的想不出名儿

已于 2024-03-04 12:47:58 修改

阅读量59

点赞数 1

分类专栏： vue基础语法文章标签： vue.js 前端

于 2023-05-24 20:40:21 首次发布

本文链接：https://blog.csdn.net/ioncannontic/article/details/130853073

版权

vue基础语法专栏收录该内容

26 篇文章 0 订阅

订阅专栏

指令（Directives）是带有 v- 前缀的特殊 attribute

每个指令，都有独立的作用

v-bind 属性绑定

把vue变量的值，赋给DOM属性，影响标签显示效果

给标签属性设置变量的值

语法：v-bind:属性名="vue变量"

简写： :属性名="vue变量"

<body>
    <div id="app">
        <a v-bind:href="url" target="_blank">我是a标签</a>
        <a :href="url" target="_blank">我是a标签</a>
        <hr>
        <img v-bind:src="imgurl" alt="">
        <img :src="imgurl" alt="">
    </div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url: 'http://www.baidu.com',
            imgurl: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
        }
    })
</script>

v-text/v-html

更新DOM对象的 innerText 和 innerHTML

语法：

v-text="vue数据变量"
v-html="vue数据变量"

<body>
    <div id="app">
        <p>{{str1}}</p>
        <p>{{str2}}</p>
        <hr>
        <p v-text="str1"></p>
        <p v-text="str2"></p>
        <hr>
        <p v-html="str1"></p>
        <p v-html="str2"></p>
    </div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            str1: '<span>我是span</span>',
            str2: '<div>我是div</div>',
        },
    })
</script>

v-text 把值当作普通字符串解析

v-html 把值当作 html 解析

v-on 绑定事件

语法：

v-on:事件名="要执行的少量代码"
v-on:事件名="methods中的函数"
v-on:事件名="methods中的函数（实参）"
简写：@事件名="methods中的函数"

<body>
    <div id="app">
        <p>要购买的商品数量{{count}}</p>
        <button v-on:click="add">+1</button>
        <button @click="sub">-1</button>
    </div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            count: 2,
        },
        methods: {
            add() {
                this.count++  // this代表当前vue实例对象
            },
            sub() {
                this.count--
            }
        }
    })
</script>

注意：methods中的this都是代表当前vue实例的对象

案例

<body>
    <div id="app">
        <p>{{str}}</p>
        <button @click="fn">翻转</button>
    </div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            str: 'hello world!'
        },
        methods: {
            fn() {
                this.str = this.str.split('').reverse().join('')
            }
        }
    })

v-on事件对象

vue处理函数中，拿到事件对象

语法：

无传参：通过形参直接接收
传参：通过$event指定事件对象传给事件处理函数

<body>
    <div id="app">
        <a @click="fn" href="http://www.baidu.com">阻止跳转到百度</a>
        <hr>
        <a @click="eveFn(10,$event)" href="http://www.baidu.com">阻止跳转到百度</a>

    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            fn(e) {
                console.log(e)
                e.preventDefault()
            },
            eveFn(num, e) {
                e.preventDefault()
            },
        }
    })

v-on修饰符

在事件后面.修饰符名，给事件带来更强大的功能

修饰符是由点开头的指令后缀来表示的

语法：

@事件名.修饰符="methods函数"
- .stop 阻止事件冒泡
- .prevent 阻止默认行为
- .once 程序运行期间，只触发一次事件处理函数
- .self 只当在 event.target 是当前元素自身时触发处理函数

事件冒泡

事件冒泡：如下图，当我们点击页面某个元素时，会产生点击事件，事件由外到内，逐层递进（事件捕获阶段，途中的1->2->3->4），当目标元素捕捉到目标事件时，会响应事件，并由内到外，逐层往外传递(事件冒泡阶段，图中的4->5->6->7)，这便是事件冒泡。正式因为冒泡机制，当用户点击图中目标元素div时，5,6,7事件区的元素都会响应点击事件（如果具备响应事件能力的话）
原文链接：https://blog.csdn.net/kuang_nu/article/details/127532913

下面代码中，onceFn在点击按钮时只触发一次，但是如果多次点击按钮，fn1仍会多次弹出，原因是事件冒泡不受once修饰符影响

<body>
    <div id="app">
        <div @click="fn1">
            <button @click.stop="btnFn">stop阻止事件冒泡</button>
            <a @click.prevent.stop="aFn" href="http://www.baidu.com">阻止跳转到百度</a>
            <button @click.once="onceFn">once触发一次</button>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            fn1() {
                alert('fn1')
            },
            btnFn() {
                alert('btnFn')
            }，
            aFn() {
                alert('aFn')
            },
            onceFn() {
                alert('onceFn')
            }
        }
    })
</script>

.stop可以阻止冒泡

<body>
    <div id="app">
        <div @click.self="fn1" class="main">
            <button @click="btnFn">stop阻止事件冒泡</button>
            <a @click.prevent="aFn" href="http://www.baidu.com">阻止跳转到百度</a>
            <button @click.once="onceFn">once触发一次</button>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            fn1() {
                alert('fn1')
            },
            btnFn() {
                alert('btnFn')
            },
            aFn() {
                alert('aFn')
            },
            onceFn() {
                alert('onceFn')
            }
        }
    })
</script>

v-on按键修饰符

给键盘事件添加修饰符

语法：

@keyup.enter 监听回车按键
@keyup.esc 监听返回按键
@keyup.tab 监听返回按键
@keyup.delete 监听返回按键
@keyup.space 监听返回按键
@keyup.up 监听返回按键
@keyup.down 监听返回按键
@keyup.left 监听返回按键
@keyup.right 监听返回按键

v-model 双向绑定

主要用于表单元素，把value属性和vue数据变量，双向绑定到一起

语法：

v-model="vue数据变量"

双向数据绑定
- 数据变化——>视图自动同步
- 视图变化——>数据自动同步

文本框

<div id="app">
        <!-- v-model：实现vue变量和表单标签value属性，双向绑定的指令 -->
        <div>
            <span>用户名</span>
            <input type="text" v-model="username">
        </div>
        <div>{{username}}</div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: 'ett',
        },
    })
</script>

密码框

<div id="app">
        <!-- v-model：实现vue变量和表单标签value属性，双向绑定的指令 -->
        <div>
            <span>密码</span>
            <input type="password" v-model="password">
        </div>
        <div>{{password}}</div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            password: '',
        },
    })
</script>

下拉框

要写value

<div id="app">
        <!-- v-model：实现vue变量和表单标签value属性，双向绑定的指令 -->
        <div>
            <span>来自于</span>
            <!-- 下拉菜单要绑定在select上 -->
            <select v-model="city">
                <option value="北京市">北京</option>
                <option value="杭州市">杭州</option>
                <option value="湖州市">湖州</option>
            </select>
        </div>
        <div>{{city}}</div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            city: '杭州市',
        },
    })
</script>

单选按钮

要写value

<div id="app">
        <!-- v-model：实现vue变量和表单标签value属性，双向绑定的指令 -->
        <div>
            <span>性别</span>
            <label for="boy">
                <input type="radio" id="boy" value="男" v-model="gender">男
            </label>
            <label for="girl">
                <input type="radio" id="girl" value="女" v-model="gender">女
            </label>
        </div>
        <div>{{gender}}</div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            gender: '男',
        },
    })
</script>

复选框

复选框多选一定要写value属性

<div id="app">
        <!-- v-model：实现vue变量和表单标签value属性，双向绑定的指令 -->
        <!-- 
            遇到复选框    v-model的变量值
            数组         关联的是复选框的 value 值 
            非数组       关联的是复选框的checked属性
        -->
        <div>
            <span>爱好</span>
            <input type="checkbox" v-model="hobby" value="篮球">篮球
            <input type="checkbox" v-model="hobby" value="听歌">听歌
            <input type="checkbox" v-model="hobby" value="喝酒">喝酒
            <input type="checkbox" v-model="hobby" value="打游戏">打游戏
        </div>
        <div>
            <span>全选</span>
            <input type="checkbox" v-model="checkAll">
        </div>
        <div>{{hobby}}</div>
        <div>{{checkAll}}</div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            hobby: [],
            checkAll: false,
        },
    })
</script>

textarea 文本域

<div id="app">
        <!-- v-model：实现vue变量和表单标签value属性，双向绑定的指令 -->
        <div>
            <span>自我评价</span>
            <textarea v-model="content"></textarea>
        </div>
        <div>{{content}}</div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            content: '',
        },
    })
</script>

v-model 修饰符

让v-model拥有更强大的功能

语法：

v-model.修饰符="vue数据变量"
- .number 以parseFloat转成数字类型
- .trim 去除首尾空白字符
- .lazy change时触发而非input

v-show和v-if

控制标签的显示与隐藏

语法：

v-show="vue变量"
v-if="vue变量"

原理：

v-show用的是display:none控制标签的显示与隐藏（频繁切换）
v-if用的是插入和删除节点；来控制标签的显示与隐藏
v-else

<body>
    <div id="app">
        <h1 v-show="isOk">v-show的盒子</h1>
        <h1 v-if="isOk">v-if的盒子</h1>
        <div>
            <!-- v-if和v-else的两个标签必须紧挨着 -->
            <p v-if="age>=18">我成年了</p>
            <p v-else>未成年</p>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isOk: true,
            age: 18,
        },
    })
</script>

案例

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        #app {
            width: 400px;
            margin: 20px auto;
            background-color: yellow;
            border: 1px solid burlywood;
            border-radius: 2px;
            padding: 10px;
        }

        h3 {
            text-align: center;
        }

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #ccc;
            padding: 0 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 目标：点击展开或收起时，把内容区域显示或者隐藏 -->
        <h3>折叠面板</h3>
        <div class="title">
            <h4>芙蓉楼送辛渐</h4>
            <span @click="isShow=!isShow">{{isShow?'展开':'收起'}}</span>
        </div>
        <div class="containner" v-show="isShow">
            <p>一片冰心在玉壶</p>
            <p>一片冰心在玉壶</p>
            <p>一片冰心在玉壶</p>
            <p>一片冰心在玉壶</p>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isShow: false,
        },
    })
</script>

v-for

列表渲染，所在标签结构，按照数据数量循环生成

语法：

v-for="(值,索引) in 目标结构"
v-for="值 in 目标结构"
- 目标结构
  - 可以遍历数组/对象/数字/字符串

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">{{index}}------{{item}}</li>
        </ul>
        <ul>
            <li v-for="item in stuArr">{{item.name}} 性别{{item.sex}} 爱好{{item.hobby}}</li>
        </ul>
        <ul>
            <li v-for="(value,key) in tObj">{{key}}-----{{value}}</li>
        </ul>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            arr: ['aaa', 'bbb', 'ccc', 'ddd'],
            stuArr: [
                {
                    id: 1001,
                    name: "孙悟空",
                    sex: '男',
                    hobby: '唱歌',
                },
                {
                    id: 1002,
                    name: "猪八戒",
                    sex: '男',
                    hobby: '吃西瓜',
                },
            ],
            tObj: {
                name: '傻妞',
                age: 18,
                class: '1班',
            }
        },
    })
</script>