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

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