学习Vue第二节，v-cloak，v-text，v-html，v-bind，v-on使用

 v-cloak，v-text，v-html，v-bind，v-on使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="app">
            <!-- v 指令 -->
            <!-- 1.有闪烁问题 2.可以放内容 -->
            <p v-cloak > {{ msg }} ！</p>
            <!-- 1.没有闪烁问题 2.会覆盖内容 -->
            <p v-text="msg2"></p>
            <!-- 1.会覆盖内容 2.把内容可以当做HTML -->
            <div v-html="msg3"></div>
            <!-- v-bind ,用于绑定属性的指令，这样就可以用js变量或表达式了 -->
            <button type="button" v-bind:title="msg + '可以用连接符'">绑定属性</button>
            <!-- v-bind ,可以简写 : -->
            <button type="button" :title="msg + '可以用连接符2'">绑定属性2</button>
            <!-- v-on 事件绑定机制 -->
            <button type="button" v-on:click="alertPlus" >绑定事件</button>
            <button type="button" v-on:mouseover="alertPlus" >绑定事件2</button>
                        
        </div>
                
        <script type="text/javascript">
            new Vue({
                el:'.app',
                data:{
                    msg:'表达式',
                    msg2:"<h1>html标签</h2>",
                    msg3:"<h1>html标签</h2>",
                },
                methods:{//methods 定义Vue实例所有可以用的方法
                    alertPlus: function(){
                        alert("hello 绑定事件")
                    }                    
                }                
            })
        </script>
        
        
    </body>
</html>

 使用vue写出一个文字的跑马灯效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>跑马灯效果</title>
        <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" value="跑起来" @click="running"/>
            <input type="button" value="停" @click="stop"/>
            <h4>{{msg}}</h4>
        </div>
        <script type="text/javascript">
            new Vue({
                el:'#app',
                data:{
                    msg:"学习完Vue的第二节！",
                    timerId:null//定时器id
                },
                methods:{
                    // ES6语法，省去function
                    running(){
                        // 当定时器为null时，创建定时器
                        if(this.timerId == null){                        
                            // ES6语法,箭头函数，申请function，方法的this也指向函数外的this
                            this.timerId=setInterval(()=>{
                                // 获得到字符串第一个字符
                                var start=this.msg.substring(0,1);
                                // 获取到第一个字符后的所有内容
                                var end=this.msg.substring(1);
                                // 将第一个字符以后的内容排在前面，第一个字符排在后面
                                this.msg=end+start;
                                
                            },400)
                        }
                    },
                    stop(){
                        // 清除定时器
                        clearInterval(this.timerId)
                        // 重新赋值为null
                        this.timerId=null;
                    }
                    
                }
                
            })
            
            
            
        </script>
    </body>
</html>

 

posted @ 2020-05-03 22:20  三线码工  阅读(373)  评论(0)  编辑  收藏  举报