指令系统Vue-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_82017081/article/details/139702259

指令中封装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，框架会进行相应的DOM操作的绑定。

文章目录

一，更新元素的指令（文本指令）
二、事件指令
三，属性指令
- 1.引入库
- 2.读入数据
总结

一，更新元素的指令(文本指令)

1.v-text

　v-text等价于 {{}} ，实现原理：innerText。

2.v-html

　v-html实现原理是js中的innerHTML方法。

注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

常用的事件有：点击事件，双击事件，拖动事件，得到焦点，失去焦点。。。。

二，事件指令

1.v-on

v-on 事件绑定指令，用来辅助程序员为DOM 元素绑定事件监听，并提供处理逻辑。
常用的事件有：点击事件，双击事件，拖动事件，得到焦点，失去焦点........

2.es6的对象写法

3.v-on调用传参

1 》函数有一个参数
如果在事件中触发函数，没有传参数，会自动把事件对象传入
定义好的参数，传的就是什么参数
把事件对象传入（$event）
2》函数有多个参数
少传不加括号，但是js里面的函数需要多个参数，结果是第一个是事件对象，其他为undefined
少传加括号，但是js里面的函数需要多个参数，不会把自动把事件对象传入，均为undefined
需要3个参数，但是多传了参数，结果是只接受自己的3个参数，多的不要
多个参数中，需要传入事件对象，方式为$even

三，属性指令

v-bind 属性绑定指令，用来动态的设置html的标签属性，比如：src、url、title...

1，v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="toggleAutoChange">{{ isAutoChanging ? '停止' : '开始' }}自动切换美女图片</button>
    <img :src="currentImage" alt="Beautiful Girl">
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            isAutoChanging: false,
            images: [
                "http://img.netbian.com/file/2024/0416/004850qAPxg.jpg",
                "http://img.netbian.com/file/2024/0411/0016435MJh0.jpg",
                "http://img.netbian.com/file/2024/0409/002601sxcu4.jpg",
                "http://img.netbian.com/file/2024/0323/001609whWN7.jpg"
            ],
            currentIndex: 0,
            intervalId: null
        },
        computed: {
            currentImage() {
                return this.images[this.currentIndex];
            }
        },
        methods: {
            toggleAutoChange() {
                this.isAutoChanging = !this.isAutoChanging;
                if (this.isAutoChanging) {
                    this.interval = setInterval(() => {
                        this.currentIndex = (this.currentIndex + 1) % this.images.length;
                    }, 1000);
                } else {
                    clearInterval(this.interval);
                }
            }
        },
        destroyed() {
            clearInterval(this.interval);
        }
    })
</script>
</html>