vue第一节—数据绑定和第一个vue应用

vue-第一节—数据绑定和第一个vue应用

一. vue实例与数据绑定
     实例与数据：vue的创建很简单，是通过构造函数Vue创建一个根实例。
     el是用于指定一个页面中已经存在的DOM元素来挂载Vue实例，可以是HTMLelement,也可以是css选择器，

<div id="app"></div>

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实例。
三、插值与表达式
    使用大括号{{ }}是最基本的文本插值方法，他会自定将我们双向绑定的数据实时显示出来。例如：

<div id="app">
    {{book}}
</div>

<script>    
    var app= new Vue({
        el:"#app",
        data:{
            book:"hello world"
        }
    })
</script>   

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

<div id="app" >
    <span v-html="link"></span>
</div>

<script>    
    var app= new Vue({
        el:"#app",
        data:{
            link:"<a href='#'>这是一个链接</a>"
        }
    })
</script>

    需要注意的是，如果将客户产生的内容使用v-html输出后，有可能导致XSS攻击，所以需要在服务端对用户提交的内容进行处理，一般可以将尖括号转义。
    在{{ }}中，除了简单的绑定属性值外，还可以使用Javascript 表达式进行简单的运算、三元运算等。
    如果想显示{{ }}标签，而不进行替换，使用v-pre即可。例如：

<div id ="app">
    {{ number / 10 }},
    {{isOK ?  '确定','取消'}},
    {{text.split(',').reverse().jion(',') }}
</div>

<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 来设置，例如：

<div id ="app">
    {{ date | formatDate }}
</div>
<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') }}

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