Vue中强大的指令功能（1）

春日部防卫队队长
160 阅读1分钟

这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战

前言

大家好，我是不吃鱼d猫，又来了，现在武汉陷入紧张状态，唉，下午又要捅喉咙，对即将毕业的我们不友好啊，不过耽误不了我学习Vue,今天给大家说说Vue中强大的指令功能，超级好用，运用广泛，代替你进行dom操作啊。虽说简单，还是蛮重要的

Vue常用的指令

绑定事件 V-on

用法

绑定事件，方法一般写在methods中，可以通过this访问定义在data中的数据（注：methods,data都是实例化Vue中的配置项），我们来看看
现在有这样一个结构：

<div class="app">
        <h1>不吃鱼的猫年龄--{{age}}</h1>
        <button v-on:click="changeAge">点击改变年龄</button>
    </div>

image.png 当我们点击按钮时，改变年龄，学习JavaScript时，我们可以立马想到，肯定先得获取元素吧，然后拿到对应的age值，添加方法改变age值，然后渲染到页面中，想一想也很麻烦，但是Vue中那就非常简单明了了，（注意的是，在Vue中不要出现dom操作，人家都给你封装了，在底层给你操作dom了）。我们来看

 const vm = new Vue({
        data: {
            age: 18
        },
        methods: {
        //点击事件时触发的方法
            changeAge() {
                this.age += 1
            }
        },
    }).$mount(".app")

注意：这里的this指的是我实例化Vue的对象vm，一般出现定时器啊，ajax的回调函数等一些不是Vue所管理的函数最好写成箭头函数，因为this的指向改变的，this的指向问题可以看我前面的文章。\

事件修饰符

事件修饰符，事件后面跟上'.'可以对事件进行限制，我们可以来看下面的结构：

keyup键盘抬起事件

 <input type="text" v-on:keyup.enter="log">{{cont}}

触发事件时会执行log方法,

  log(e) {
                this.cont = e.target.value
                console.log(this.cont);
            }

image.png 我们可以看到事件一直在触发，控制台一直在打印，输入框的值。我们现在来给事件加上修饰符。

//v-on指令是可以简写的可以将v-on:写成@
  <input type="text" @keyup.enter="log">{{cont}}

在事件后面加上了.enter，表示，按下enter键时，才会触发事件。说到这里我们一起说了常用的时间修饰符

vue常用的修饰符

  • .once:事件只触发一次
  • .prevent阻止默认事件（可能不理解默认事件，比如a标签自带跳转是不是，可以阻止的）
  • .stop阻止事件冒泡

绑定静态属性的指令 v-bind

绑定Vue标签或者组件的属性

  • 静态属性:永远不改变，不是变量
  • 动态属性：接受的是变量 用法：v-bind：属性名=表达式，我们来练练看看
  <img src="./images/1642131151272.jpg" alt="">

我们看看img标签的src属性是不是静态的，始终不会变化，那么现在我们加上v-bind后看看，将他变成动态的属性

  <img v-bind:src="imgSrc" alt="">
  ---------------------------------------
    const vm = new Vue({
        data: {
            age: 18,
            cont: "不吃鱼d猫",
            imgSrc: "./images/1642131151272.jpg"
        },
    }).$mount(".app")

图片依然能够正常显示，当然也可以简写成‘ ：’，此时src属性就是动态的了。

image.png

总结

是吧，vue的指令是不是很方面，操作dom更加便捷了，不像原生一样，还要那元素啊数据渲染 多麻烦，还是指令香。后面还给大家详细说说其他指令。

avatar
文章
阅读
粉丝