重新开始认识前端之vue.js（一）

断更了很长时间，最近有时间开始前端vue学习，vue这种VM的中间体，结合es6，适合现在代码快速开发。

前期主要做了几个案例，主要用到的vue组件：v-bind缩略写法为：（缩写为冒号）v-bind  主要用于属性绑定， v-on缩写为@ v-on大多数用在绑定事件。

v-text用于操作纯文本，替代显示对应的数据对象上的值，容易发生覆盖。v-cloak不会发生覆盖，但有闪烁。

<!--用v-cloak解决插值表达式闪烁问题-->
<p v-cloak>{{ msg }}</p>
<!--默认V—text是没有闪烁问题的 但是会覆盖-->
<h4 v-text = "msg"></h4>
用v-cloak解决插值表达式闪烁问题 闪烁问题具体是：js文件在网速慢的时候加载时候变量值不能获取，造成先显示{{内容}}类似这种，之后显示具体变量的值。
默认V—text是没有闪烁问题的 但是会覆盖
 
<!--v-bind可以写合法的表达式，也可以简写例如 :title="mytitle"-->
<input id="btn" type="button" value="button" :title="mytitle+'123'" >

vm对象实例的基本格式如下：

 var vm =new Vue({
            el:'#app',
            data :{
                msg:'欢迎需学习vue',               
                mytitle:'这是标题'
            },
            methods :{
            show(){
                alert('hello')
            }  
        }
        })

基本的格式就是这样子的，但是实际和以前的js大相径庭，逻辑写法稍微简单点。

 

以下代码是一个跑马灯的实例,可以直接用来调试，但是请认准vs code编程软件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h4>{{ msg }}</h4>
        <input type="button" value="低调" @click="stop">
        <input type="button" value="浪起来" @click="lang">
        <!--
            给浪起来设置click事件，
            v-on或者@用substring截取字符串，
            将截取的第一个字符，放最后。设置一个定时器-->
    </div>
    
    <script>
        //在vm实例中如果想要获取data里的数据，或者想要调用methods中的方法，
        //必须通过this.数据属性名 或者 this.方法名 来访问，这里的this就表示new Vue实例
    var vm = new  Vue({
        el:'#app',
        data:{
            msg:'这是一个滚动条',
            setIntervalid:null 
            },
        methods:{
            lang () {
                if(this.setIntervalid != null) return;
                //this指向性问题得用一个变量代替
               this.setIntervalid = setInterval( ()=>{  
                //获取字符串头第一个字符
                var start = this.msg.substring(0,1)
                //获取字符串除第一个字符其他的字符
                var end = this.msg.substring(1)
                //重新拼接得到新的字符串 并赋值给this.msg
                this.msg = end+start  
            },400)
           
                          
        },
         stop () {//停止计时器
            clearInterval(this.setIntervalid)
            //每当清除了定时器，重新把setIntervalid置位null
            this.setIntervalid = null
            }

        }
    })
    </script>
    
</body>
</html>

posted on 2020-03-23 19:52  gaga123456  阅读(193)  评论(0)  编辑  收藏  举报

导航