vue基础（2）数据绑定、单双向数据流与监听器

三.Vue的单双向数据流与数据绑定
1.单向绑定的概念及使用

单向绑定指的是页面的改变不会影响到内存（变量）的改变，但是内存的改变会影响到页面的改变的一种操作。
这么解释还是会有一些模糊，下面我给出一个示例代码块进行讲解
new Vue({	
			....,
			template:`
				<div>
					<input type='text' v-bind:value='name'/>
				</div>
			`,
			data:function(){
				return{
					name:'test'
				}
			}
		})
这样，页面中就会出现输入框内有字符串'test'的存在，通过更改data内变量的值，可以更改输入框的值。

2.双向绑定的概念及使用

双向数据绑定的意思是：内存（变量）的改变也会影响到页面的改变，页面的改变也会影响到内存的改变，是通过v-model来进行实现的。

但是与v-bind不同，v-model的双向绑定只作用于有value属性的标签。示例如下：

new Vue({
			el:"#app",
			template:`
				<div>
					你输入的:<input type='text' v-model='name'/><br>
					你输出的:{{name}}
				</div>
			`,
			data:function(){
				return{
					name:''
				}
			}
		})

这样的页面，会出现一个输入和输出同步显示的效果。非常酷炫。

四.过滤器的使用
1.过滤器的概念及定义方式

过滤器，顾名思义就是对一个变量进行过滤，并返回过滤后的结果的一种工具。过滤器分为全局过滤器和组件过滤器,两者的作用一样，定义方式不同。过滤器其实就是实现了对我们的数据进行添油加醋之后再显示的功能。

a.全局过滤器
语法：Vue.filter(函数名,function(传入的形参){
			....//功能编写
		})
b.组件过滤器
语法:new Vue({
	.....,
	filters:{
				函数名(传入的形参){
					....//功能编写
				}
			}
})

组件过滤器与Vue内部的属性是同级的

2.过滤器的调用

调用过滤器时，应先加入双大括号{{}}，并写入竖直分割分'|'，分隔符的左边写入被改变的变量，分隔符的右边写入过滤器的函数名。格式如下:
{{变量名 | 过滤器名}}
变量应该事先在Vue中的data里提前定义！！

五.数据监听watch和计算属性computed
1.watch监听的概念与语法

监听器的作用是用于监听某一个属性值的变化，只要值发生了变化，就会调用watch的一些方法。
语法：
new Vue({
	...,
	template:`
		<div>
			<input type='text' v-model='name'/>
		</div>
	`,
	data(){
		return{
			name:''
		}
	},
	watch:{
		name(newval,oldval){
			console.log('新值：'+newval,'旧值'+oldval);
		}
	}
})