vue学习之数据绑定
一、vue实例
vue根实例的创建可以通过构造函数Vue，
new Vue({
el:'#app'
})
在这里，必不可少的选项就是el, el用来指定一个页面中已经存在的DOM元素来挂载Vue实例。
比如：
<div id = "app">
</div>
<script>
new Vue({
el:'#app',
data:{
}
})
</script>
这就是说，我们创建的Vue实例是作用在 id为 app的div标签里的。
vue实例中另一个选项是data,它用来声明应用内所有用到的双向绑定数据。当然，除了显示在data里声明数据，还可以制定一个已有的变量，默认是在他们之间创建双向绑定，一个变化，另一个也会变化。
var mydate = {
a：1
}
new Vue({
el:'#app',
data:{
date:mydate;
}
})
二、插值与表达式
vue通过插值的方式，从而自动的将我们设置的双向绑定的数据实时显示出来。最基本的文本插值方式是通过大括号，即 “ {{ }} ”。
<div id="app">
{{greeting}}
</div>
<script>
new Vue({
el:'#app',
data:{
greeting:"Hello World";
}
})
</script>
结果是：Hello World
{{}}除了显示绑定的属性值，还可以在里面进行Javascript表达式的运算，比如三目运算，简单的运算等。
<div id="app">
{{number/10}}
{{isOk?'conform':'concel'}}
{{text.split(',').reverse().join(',')}}
</div>
<script>
new Vue({
el:'#app',
data:{
number:100,
isOK:false,
text:'123,456'
}
})
</script>
结果显示为： 10、concel、456,123
注意：双大括号内，只能进行单个表达式运算，不支持语句和流控制
三、过滤器
在Vue中，支持在{{}}中加一个管道符 “ | ”来对数据进行过滤。过滤的规则是自定义的，可通过在Vue实例中添加 filters 选项来进行自定义。
<div id="app">
{{date|formatDate}}
</div>
<script>
var setDate = function(value)
{
return value<10? '0'+value :value;
};
new Vue({
el:'#app',
data:{
date:new Date()
},
filters:{
formatDate:function(value)
{
var date = new Date(value);
var year = date.getFullYear();
var month = setDate(date.getMonth()+1);
var day = setDate(date.getDate());
var hours = setDate(date.getHours());
var minutes = setDate(date.getMinutes());
var seconds = setDate(date.getSeconds());
return year + '-' + month + '-' + day + '-' + hours + ':' + minutes + ':' +seconds;
}
},
mounted:function ()
{
var _this =this;
var time = setInterval(function(){
_this.date = new Date()
},1000);
},
beforeDestroy:function()
{
if(this.time)
{
clearInterval();
}
}
})
</script>
我们这里对时间进行了处理，当month ,day ,hours ,minutes ,seconds小于10时，会在前面加一个0。过滤器也可以串联和接收参数。
{{message | filtersA | filtersB}}
{{message | filtersA('arg1','arg2'}},但是字符串arg1 , arg2会传给过滤器的第二，和第三个参数，因为第一个参数是要处理的数据。
filters主要用于处理文本过滤，更复杂的数据变换，要用到计算方法。
四、指令
指令是vue中常用的功能，其是以 v- 开头。常见的指令有v-if, v-else ,v-else-if, v-html ,v-bind ,v-on, v-pre.
下面对这几个简单的指令简要介绍，后面会有更详细的介绍：
v-if ,v-else ,v-else-if 这几个常用在一起，当有单个选择时，用 v-if，两个时 要用到 v-if 和 v-else ，当有多个条件选择时，这三个都是会用到的。
<div id="app"> //根据a的不同，显示不同的内容
<template v-if="a===1">
<div>Hello</div>
</template>
<template v-else-if="a===2">
<div>I love Vue!</div>
</template>
<template v-else>
<div>Me too!</div>
</template>
</div>
<script>
new Vue({
el:'#app',
data:{
a:3
}
})
</script>
v-bind的基本作用是动态更新HTML元素的属性，比如 id ,class等
<div id="app">
<a v-bind:href="url">百度</a>
</div>
<script>
new Vue({
el:'#app',
data:{
url:"https://www.baidu.com"
}
})
</script>
v-on用来绑定事件监听器。
<div id="app">
<button v-on:click="buttonClick">Click Me</button>
</div>
<script>
new Vue({
el:'#app',
methods:{
buttonClick:function()
{
alert("You clicked the button");
}
}
})
</script>
v-pre 用于显示{{}}标签
<div id="app">
<span v-pre>{{url}}</span>
</div>
<script>
new Vue({
el:'#app',
data:{
url:"https://www.baidu.com"
}
})
</script>
结果会是： {{ url }}
五、语法糖
语法糖是在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。
<a v-bind:href="url">百度</a>
<button v-on:click="buttonClick">Click Me</button>
可以改为：
<a :href="url">百度</a>
<button @click="buttonClick">Click Me</button>
网友评论