05.v-on事件绑定和methods方法属性以及v-bind属性绑定

最新推荐文章于 2023-09-26 14:33:22 发布

啊唯11

最新推荐文章于 2023-09-26 14:33:22 发布

阅读量644

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_66059613/article/details/126894072

版权

methods

在开发中,我们经常需要用到函数, 通过将一些需要复用的逻辑封装在函数里,多次调用这个函数来达到逻辑代码复用的目的.

在vue中,函数被定义成为方法来使用,这些方法定义在methods属性中,然后就可以在vue 表达式中调用函数

只要methods里面关联的代码一改变，methods就会加载一次重新解析模

v-on事件绑定

v-on：用于绑定事件（可简写为@），事件触发的方法需要在new返回对象的methods属性中定义，

准确来说v-on指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件。

代码展示：

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
   <div id='app'>
       <!-- //点击这个调用fn1事件 -->
       <button v-on:click="fn1">
           点我嘿
       </button>
       <!-- //双击击这个调用fn2事件 -->
       <button v-on:dblclick="fn2">双击</button>
       <h4>以下是简写形式</h4>
       <!-- 把v-on改成@就是简写形式 -->
       <hr>
       <button @click="fn1">
        点我嘿        
    </button>
    <button><a href="https://www.iconfont.cn/">za</a></button>
    <button @dblclick="fn2">双击</button>
   </div>
    
    <script src="./vue.js"></script>
    <script>
        new Vue({
           el:'#app',
           data:{

           },
           methods:{
            fn1(){
                alert('上当了吧,恭喜你浪费了几秒钟的生命')
                alert('看后面')
                alert('还™点,跟王子一个bi样')
                
            },
            fn2(){
                alert('就这就这。。')
            }
           }
        }) 
    
        </script>

</body>
</html>

v-bind属性绑定

v-bind指令：用于绑定属性，可以简写为一个冒号，v-bind中可以写合法的JS表达式。v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找,当然也可以等于一个常数，这样就不用去data里找了。
当我们在控制台改变url时，对应也会变化。
相同的，我们还可以绑定图片src属性、超链接的class，直接上代码：

<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <div id="app">
        <a href="https://swiper.com.cn/usage/index.html">跳转</a>
        <a v-bind:href="url">跳转</a>
        <button @click="change" target="_blsnk">跳转</button>
    </div>


    <script src="./vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                url: 'https://www.csdn.net/'
            },
            methods: {
                change() {
                    this.url = 'http://xiaomi.com'
                }
            }

        })
    </script>
</body>

</html>