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

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') }}

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