Vue.js

最新推荐文章于 2024-06-12 08:41:10 发布

junlingshiwo

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量103

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45722135/article/details/118959353

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

【一】事件修饰符

1：知识点

2：

结果：因黄色块在红色块内，当点击黄色块时就相当时点击了红色块，为避免这样的触发，可使用.stop来阻止事件冒泡。

3：

结果：当点击一次按钮时，就会一直触发增加，而我们需要的就是点击一次触发一次，就可以使用.once来进行触发。

4：按键修饰符

结果：在搜索框中搜入东西时，每当按键抬起时，就会触发，为防止这样，我们使用按键修饰符.enter来进行改进，当按回车才会触发。

5：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
    <style>
        .out{width: 200px;height: 200px;background: red;}
        .box{width: 100px;height: 100px;background: yellow;}
    </style>
</head>

<body>
    <div id="app">
        <div class="out" @click="clickOut">
            <!-- 阻止事件冒泡 -->
            <div class="box" @click.stop="clickBox"></div>
        </div>
        <form action="https://baidu.com">
            <!-- 提交事件不再重载页面 -->
        <input type="submit" @click.prevent="formBtn" >
        </form>
        <a href="http://jd.com" @click.prevent="linkBtn">京东购物</a>
        <!-- 点击事件将只会触发一次 -->
        <button @click.once="btnClick">按钮</button>

        <!-- 按键修饰符 -->
        <input type="text" @keyup.enter="keyFun">

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

            },
            methods: {
               clickOut(){
                   console.log("点击了out")
               },
               clickBox(){
                   console.log("点击了box")
               },
               formBtn(){
                   console.log("formBtn")
               },
               linkBtn(){
                   console.log("linkBtn")
               },
               btnClick(){
                   console.log("btnClick")
               },
               keyFun(){
                   console.log("keyFun")
               }

            }
        });
    </script>
</body>

</html>

【二】v-bind动态参数

v-bind指令用于设置HTML属性：v-bind:title 缩写为 :title

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
</head>

<body>
    <div id="app">
        <!-- <h1>{{name}}</h1> -->
        <!-- <h1 v-text="name"></h1> -->
        <!-- <h3 title="欢迎你来到我这里" v-bind:title="tit">我在我在你心里</h3> -->
        <!-- <h4 :title="tit">vue</h4> -->
        <!-- <img :src="picurl[1]"> -->

        <!-- 利用for循环和v-bind进行的遍历 -->
        <img v-for="v in picurl" :src="v" >

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name:"vue开发",
                tit:"我的心里有你",
                picurl:["images/pic2.webp","images/pic1.webp"]

            },
            methods: {

            }
        });
    </script>
</body>

</html>

喜欢的可以点个赞呦！

junlingshiwo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js

【一】事件修饰符1：知识点2：结果：因黄色块在红色块内，当点击黄色块时就相当时点击了红色块，为避免这样的触发，可使用.stop来阻止事件冒泡。3：结果：当点击一次按钮时，就会一直触发增加，而我们需要的就是点击一次触发一次，就可以使用.once来进行触发。4：按键修饰符结果：在搜索框中搜入东西时，每当按键抬起时，就会触发，为防止这样，我们使用按键修饰符.enter来进行改进，当按回车才会触发。5：<!DOCTYPE html&...
复制链接

扫一扫

专栏目录

Vue.js

“相关推荐”对你有帮助么？