vue的内置指令练习和 vue的事件练习

最新推荐文章于 2023-01-29 09:46:54 发布

看云清雾淡

最新推荐文章于 2023-01-29 09:46:54 发布

阅读量1k

点赞数 1

分类专栏： Vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_53366282/article/details/123568237

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.vue的内置指令练习

2. vue事件的练习

1.vue的内置指令练习

<head>
    <title>内置指令</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 建议用 v-if   -->
        <p><div v-if="isShow">v-if</div></p>
        <p><div v-show="isShow">v-show</div></p>
        <p><button @click="isShow=!isShow">隐藏/显示</button></p>
        <p>———————————————————————————————————————————————————————————————</p>
        <!-- v-for 可以实现页面的渲染 -->
        <!-- 遍历数组 -->
        <div v-for="(value,i) in list">
            索引：{{i}}。值：{{value}}
        </div>
        <!-- 遍历对象数组-->
        <div v-for="(user,i) in olist">
            索引：{{i}}.名称：{{user.name}}.年龄：{{user.age}}
        </div>
        <!-- 遍历对象 -->
        <div v-for="(value,i,j) in object">
            索引：{{j}}. {{i}}:{{value}}
        </div>
        <!-- 遍历数字 -->
        <div v-for="(v,i) in 5">
            索引：{{i}}。值{{v}}。
        </div>
        <p>———————————————————————————————————————————————————————————————</p>
        <!-- v-model  双向数据绑定  常用 -->
        <p><input type="text" v-model="msg"></p>
        <!-- v-text 单向数据输出 不能表单表现  只能从data向前端页面输出 -->
        <p><input type="text" v-text="msg"></p>
        <p v-text="msg"></p>
        <!-- v-html 将标签通过前端去展示   不能表单表现-->
        <p v-html="msg"></p>
        <!-- v-bind 改变属性值 ， 单向 -->
        <p><input type="text" v-bind:value="msg"></p>

    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'<h1>双向数据绑定演示</h1>',
                list:['软件','14班','同学们好'],
                olist:[{name:"张三",age:18},{name:"李四",age:19},{name:"王五",age:20}],
                object:{
                    name:"张大仙",
                    age:17,
                    phone:123456789
                },
                isShow:true
            }
        })
    </script>
</body>

alt+b快捷键运行代码的结果如下：

2. vue事件的练习

<!DOCTYPE html>
<head>
    <title>提交表单事件</title>
    <script src="../vue.js"></script>
    <style>
        .Odiv1 {width: 80px; height: 80px; background: #aaa; margin: 5px;}
        .Odiv2 {width: 50px; height: 50px; background: #ccc;}
    </style>
</head>
<body>
    <div id="app" >
        <p>{{msg}}</p>
        <p>————————————————————————————————————————————————————————————</p>
        <div class="Odiv1" v-on:click.self="doParent">a
            <div class="Odiv2" v-on:click="doThis">b</div>
        </div>
        <div class="Odiv1" v-on:click="doParent">c
            <div class="Odiv2" v-on:click.self="doThis">d</div>
        </div>
        <p>————————————————————————————————————————————————————————————</p>
        <!-- .prevent 阻止事件跳转 -->
        <a href="http://www.baidu.com" @click.prevent>跳转</a>
        <p>————————————————————————————————————————————————————————————</p>
        
        <!-- 按键     keyup.enter当enter键抬起时执行方法submit -->
        <!--  .stop 阻止冒泡  -->
        <!-- .capture 捕获事件优先执行   改变相反冒泡顺序 -->
        <!-- .capture .stop 一起用 只执行此事件 -->
        <!-- .once 事件只执行一次    常用，防止重复点击 -->
        <div v-on:keyup.enter="submit3">
            <p v-on:keyup.enter.once="submit2">   
                <input type="text" v-on:keyup.enter="submit1">
            </p>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"数据"
            },
            methods:{
                submit1(){
                    console.log("表单已提交1") //alert页面输出
                },
                submit2(){
                    console.log("表单已提交2")//console.log控制台输出
                },
                submit3(){
                    console.log("表单已提交3")
                },
                doParent(){
                    console.log("doParent")
                },
                doThis(){
                    console.log("doThis")
                }
            }
        })
    </script>
</body>

alt+b快捷键运行代码结果如下：

看云清雾淡

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue的内置指令练习和 vue的事件练习

目录1.vue的内置指令练习2. vue事件的练习1.vue的内置指令练习<head> <title>内置指令</title> <script src="../vue.js"></script></head><body> <div id="app">  <p>&lt.
复制链接

扫一扫