美文网首页
玩转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

    内容相关v-cloak(了解),v-text,v-html 绑定属性v:bind 绑定事件v-on 跑马灯练习 事...

  • 玩转Vue_指令2

    数据的双向绑定：v-model 简易计算器练习 通过绑定class赋予样式 使用内联样式 v-for v-for中...

  • Vue_常用指令

    常用指令 1、插值表达式 {{}}当模型中的数据发生改变时，视图中的数据也发生相应的改变 2、v-text 将一个...

  • 玩转Vue_组件

    什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们...

  • 玩转Vue_入门程序

    Vue简介 Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架2016年最火的前端...

  • 玩转Vue_使用axios

    进入项目安装axios（npm install axios -S） axios配置 项目中安装axios模块完成后...

  • 4、Vue_模板语法/指令

    介绍Vue常用的一些模板语法/指令 View层：定义div插值表达式{{}}：用于接收来自Model的数据并输出展...

  • 玩转Vue_项目实例_环境

    搭建项目环境 App.vue index.html main.js router.js .bablerc pack...

  • 玩转Vue_生命周期

    其中，created(创建)和mounted(挂载)钩子函数相对重要

  • 玩转Vue_路由vue-router

    什么是路由 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 对于单页面应用...

网友评论

      本文标题：玩转Vue_指令1

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

      延伸阅读

      深度阅读

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

      栏目导航

      热点阅读

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

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

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

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

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

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