美文网首页
玩转Vue_指令1

玩转Vue_指令1

作者: 伍陆柒_ | 来源:发表于2019-01-31 17:44 被阅读0次
    内容相关v-cloak(了解),v-text,v-html
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*属性选择器*/
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <!--v-cloak能够解决插值表达式闪烁的问题-->
            <p v-cloak>{{msg}}</p>
            <!--
                v-text默认是没有闪烁问题的
                但是内容区域需要有其他内容时，就不能用v-text
                例如：
                <p v-text="msg">你好</p>，标签中的'你好'会被msg对应的值替换
                而
                <p v-cloak>你好{{msg}}</p>，标签中的你好会被保留
            -->
            <p v-text="msg"></p>
            <!--
                v-html会将内容当成html输出
                而v-cloak，v-text则是单纯的放字符串
            -->
            <div v-cloak>{{msg2}}</div>
            <div v-text="msg2"></div>
            <div v-html="msg2"></div>
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el : '#box',
                data : { 
                    msg : 'hello,vue!',
                    msg2 : '<h2>Hello,vue!</h2>'
                }
            })
        </script>
    </body>
</html>
    绑定属性v:bind
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            <!--v-bind绑定属性的指令-->
            <input type="button" value="按钮" v-bind:title="mytitle"/>
            <!--简写方式：直接用一个:，绑定属性中可以写一些表达式-->
            <input type="button" value="按钮" :title="mytitle"/>
            <input type="button" value="按钮" :title="mytitle+666"/>
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el : '#box',
                data : { 
                    msg : 'hello,vue!',
                    msg2 : '<h2>Hello,vue!</h2>',
                    mytitle: '绑定属性'
                }
            })
        </script>
    </body>
</html>
    绑定事件v-on
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            <!--v-on绑定事件，所有事件都能绑定，这里以一个click为例-->
            <input type="button" value="按钮" v-on:click="show"/>
            <!-- 简写方式 -->
            <input type="button" value="按钮" @click="show"/>
        </div>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el : '#box',
                data : { 
                    msg : 'hello,vue!',
                    msg2 : '<h2>Hello,vue!</h2>',
                    mytitle: '绑定属性'
                },
                methods:{
                    // methods属性中定义了Vue实例所有可用的方法
                    show : function(){
                        alert('GOGOGO');
                    }
                }
            })
        </script>
    </body>
</html>
    跑马灯练习
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!-- 控制区域 -->
        <div id="app">
            <input type="button" name="" id="" value="浪起来" @click="lang"/>
            <input type="button" name="" id="" value="低调" @click="stop"/>
            <h4>{{msg}}</h4>
        </div>
        <script type="text/javascript">
            var vue = new Vue({
                el:'#app',
                data:{
                    msg:'猥琐发育，别浪~~!',
                    intervalId : null // 自定义的定时id
                },
                methods:{
                    // ES6写法
                    // 注意:在VM实例中想要获取data中的数据,或者想要调用methods中的方法,
                    // 必须通过this.数据属性名或this.方法名来访问,this表示new出赖的VM实例
                    lang(){
                        // 判断this.intervalId若不为空,不向下进行,否则定时器将会重复开启,"越跑越快"
                        if(this.intervalId != null){return;}
                        // 尖嘴函数,这样就不会出现this指向问题
                        this.intervalId = setInterval(()=>{
                            // console.log(this.msg);
                            // 截取首字符
                            var start = this.msg.substring(0,1);
                            // 截取剩余字符
                            var end = this.msg.substring(1);
                            // 拼接新的字符串赋值给this.msg
                            this.msg = end + start;
                        },400)
                    },
                    stop(){
                        clearInterval(this.intervalId);
                        // 每当清除定时器后,需要重新把this.intervalId赋值为null,否则无法再次启动
                        this.intervalId = null;
                    }
                }
            })
            /*
                分析
                给【浪起来按钮】绑定点击事件
                在按钮的时间处理函数中拿到msg字符串，然后调用字符串的substring进行截取，
                把第一个字符截取放到最后位置即可
                这里需要启动一个定时器定时截取字符串
            */
        </script>
    </body>
</html>
    事件修饰符

    stop和prevent

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <style>
            #app{
                height: 150px;
                background: #42B983;
            }
        </style>
    </head>
    <body>
        <div id="app" @click="divShow">
            <!-- stop阻止事件冒泡 -->
            <input type="button" value="按钮1" @click.stop="btnShow">
            <!-- prevent阻止默认行为 -->
            <a href="https://www.baidu.com" @click.prevent="linkShow">去百度</a>
        </div>
        <script type="text/javascript">
            // 创建一个vue实例,这个实例，即VM
            var vm = new Vue({
                el : '#app',
                data : {},
                methods:{
                    divShow(){
                        console.log('div显示信息');
                    },
                    btnShow(){
                        console.log('btn显示信息');
                    },
                    linkShow(){
                        console.log('link显示信息');
                    }
                }
            })
        </script>
    </body>
</html>

    capture

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <style>
            #app{
                height: 150px;
                background: #42B983;
            }
        </style>
    </head>
    <body>
        <div id="app" @click.capture="divShow">
            <!-- capture添加事件侦听器时使用事件捕获模式,事件顺序由外向内 -->
            <input type="button" value="按钮2" @click="btnShow">
        </div>
        <script type="text/javascript">
            // 创建一个vue实例,这个实例，即VM
            var vm = new Vue({
                el : '#app',
                data : {},
                methods:{
                    divShow(){
                        console.log('div显示信息');
                    },
                    btnShow(){
                        console.log('btn显示信息');
                    },
                    linkShow(){
                        console.log('link显示信息');
                    }
                }
            })
        </script>
    </body>
</html>

    self

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <style>
            #app{
                height: 150px;
                background: #42B983;
            }
        </style>
    </head>
    <body>
        <div id="app" @click.self="divShow">
            <!-- self点击自己才触发事件 -->
            <input type="button" value="按钮1" @click="btnShow">
        </div>
        <script type="text/javascript">
            // 创建一个vue实例,这个实例，即VM
            var vm = new Vue({
                el : '#app',
                data : {},
                methods:{
                    divShow(){
                        console.log('div显示信息');
                    },
                    btnShow(){
                        console.log('btn显示信息');
                    },
                    linkShow(){
                        console.log('link显示信息');
                    }
                }
            })
        </script>
    </body>
</html>

    once

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <style>
            #app{
                height: 150px;
                background: #42B983;
            }
        </style>
    </head>
    <body>
        <div id="app" @click="divShow">
            <!-- once事件只触发一次 -->
            <!-- <a href="https://www.baidu.com" @click.prevent.once="linkShow">去百度</a> -->
            <input type="button" value="按钮1" @click.once="btnShow">
            <a href="https://www.baidu.com" @click.once="linkShow">去百度</a> 
            <!-- stop和self的区别 : self不能阻止子级元素冒泡 -->
        </div>
        <script type="text/javascript">
            // 创建一个vue实例,这个实例，即VM
            var vm = new Vue({
                el : '#app',
                data : {},
                methods:{
                    divShow(){
                        console.log('div显示信息');
                    },
                    btnShow(){
                        console.log('btn显示信息');
                    },
                    linkShow(){
                        console.log('link显示信息');
                    }
                }
            })
        </script>
    </body>
</html>

    相关文章

      网友评论

          本文标题：玩转Vue_指令1

          本文链接：https://www.haomeiwen.com/subject/vuoksqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|玩转Vue_指令1|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！