频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
vue知识讲解之数据绑定和第一个vue应用
2018-03-26 11:26:00         来源:何作胜的博客  
收藏   我要投稿

vue知识讲解之数据绑定和第一个vue应用

一. vue实例与数据绑定 

实例与数据:vue的创建很简单,是通过构造函数Vue创建一个根实例。 

el是用于指定一个页面中已经存在的DOM元素来挂载Vue实例,可以是HTMLelement,也可以是css选择器,

<p id="app"></p>

var app=new Vue({

    el:document.getElementById("app")   // 或者 el:'#app'

    data:{

        a:2

        }

    })

console.log(app.a);  //2

//建议所有会用到的数据都预先绑定在data内声明,这样不至于将数据散落在业务逻辑中,难以维护

    除了显示的声明外,也可以指向一个已有的变量,并且他们之间默认建立双向绑定,当修改一个的时候,另外一个也会变化。 

二、生命周期 

每个vue实例创建时,都会经历一系列的初始化过程,同时也会调用相应的生命周期钩子,我们可以在利用这些钩子,在合适的时候执行我们的业务逻辑。 

    常用的生命周期钩子有: 

       created:实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂在,el还不可用,与要初始化处理一些数据是比较有用。 

       mounted:  el挂载到实例上后调用,一般我们的第一个业务会从在里开始。 

       beforeDestroy:   实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。 

    这些钩子与el与data类似,也是作为选项写入vue 实例内,并且钩子的this指向的是调用他的vue实例。 

三、插值与表达式 

    使用大括号{{ }}是最基本的文本插值方法,他会自定将我们双向绑定的数据实时显示出来。例如:

<p id="app">

    {{book}}

</p>

<script>    

    var app= new Vue({

        el:"#app",

        data:{

            book:"hello world"

        }

    })

</script>   

       如果输出HTML,而不是将数据解释后的纯文本,可以使用v-html:

<p id="app" >

    <span v-html="link"></span>

</p>

<script>    

    var app= new Vue({

        el:"#app",

        data:{

            link:"<a href='#'>这是一个链接</a>"

        }

    })

</script>

    需要注意的是,如果将客户产生的内容使用v-html输出后,有可能导致XSS攻击,所以需要在服务端对用户提交的内容进行处理,一般可以将尖括号转义。 

    在{{ }}中,除了简单的绑定属性值外,还可以使用Javascript 表达式进行简单的运算、三元运算等。 

    如果想显示{{ }}标签,而不进行替换,使用v-pre即可。例如:

<p id ="app">

    {{ number / 10 }},

    {{isOK ?  '确定','取消'}},

    {{text.split(',').reverse().jion(',') }}

</p>

<script>

    var app = new Vue({

         el:"#app",

         data:{

             number:100,

             isOk:false,

             text:'123.456'

         }  

    })

</script>

//显示结果依次为10, 取消 ,456.123。vue.js只支持单个表达式,不支持语句和流控制。

四、过滤器 

    vue.js支持在{{}}插值的尾部添加一个管道符“(|)”对整数进行过滤,经常用于格式化文本,过滤规则是自定义的,通过给vue实例添加选项 filters 来设置,例如:

<p id ="app">

    {{ date | formatDate }}

</p>

<script>

    var padDate = function(){

    //在月份、日期、小时等于小于10前补0

        return value <10 ? '0' + value : value;

    }

    var app = new Vue({

        el:"#app",

        data:{

            date:new Date()

        },

        filters:{

            formatDate:function(value){

                var date=new Date(value);

                var year=date.getFullYear();

                var month=padDate(date.getMonth()+1);

                var day=padDate(date.getDate());

                var hours=padDate(date.getHours());

                var minutes=padDate(date.getMinutes());

                var seconds=padDate(date.getSeconds());

                //将整理的数据返回出去

                return year + "-" + month + "-" + day + " " + hours + ':" + minutes + ":" + seconds;

            }

        },

        mounted:function(){

            var _this=this; //声明一个变量指向vue实例this,保证作用于一致

            this.timer= setInterval(function(){

                _this.date = new Date(); //修改数据date

            },1000)

        },

        beforeDestroy:function(){

            if(this.timer){

                clearInterval(this.timer);  //在vue实例销毁前,清楚定时器。 

            }

        }

    })

</script>

过滤器也可以串联,而且可以接受参数,例如:

<!-- 串联 -->

{{ message | filterA | filterB }}

<!-- 接收参数 -->

{{ message | filterA('agr1' , 'agr2') }}

    过滤器应当用于处理简单的文本转换,如果要实现更为复杂的数据交换,应该使用计算属性。

点击复制链接 与好友分享!回本站首页
上一篇:Object.defineProperty()介绍
下一篇:仿小米官网轮播图(Banner)的实现(代码教程)
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站