Vue.js(四).数据绑定跟侦听

v-model

双向数据绑定（又叫双向链路），只能用于表单元素
示例：

	<div id="app">
        <input type="text" v-model="msg"/>
	</div>

	let vm = new Vue({
            el:"#app",
            data:{
                msg:"",
            },
 	})

vue实例里面的数据根据表单的数据改变而改变

1、v-model绑定数组
示例：

<div id="app">
        <input id="yi" type="checkbox" value="一" v-model="checked"/>
        <label for="yi">第一个</label>
        <input id="er" type="checkbox" value="二" v-model="checked"/>
        <label for="er">第三个</label>
        <input id="san" type="checkbox" value="三" v-model="checked"/>
        <label for="san">第四个</label>

        <div>
            我的选择：{{ checked }}
        </div>
    </div>

let vm = new Vue({
            el:"#app",
            data:{
                checked:[],
            }
        })

v-model修饰符

1、lazy

• 在默认的情况下v-model每次input事件触发后将输入框里面的内容和数据进行同步，添加了lazy之后当失焦之后才会进行数据同步
  示例

	<div id="app">
        <input type="text" v-model.lazy="msg"/>
	</div>

2、number

• 将用户输入的的值变为数字

	<div id="app">
        <input type="text" v-model.number.lazy="msg"/>
	</div>

3、trim

• 自动将用户输入的首尾空格字符取消掉，一般用于登录输入框

	<div id="app">
        <input type="text" v-model.trim="msg"/>
	</div>

侦听器

侦听属性 响应数据的变化，当数据发生改变的时候 会立即执行对应的函数。
1、watch
跟data和methods一样前两个储存数据跟方法，watch用来储存侦听器的方法
示例：

<div id="app">
        <input type="text" v-model="num1">
        <input type="text" v-model="num2">
    </div>

let vm =new Vue({
            el:"#app",
            data:{
                num1:'',
                num2:'',
                sum:''
            },
            methods:{
                add(){
                    this.sum = this.num1+this.num2;
                    console.log(this.sum);
                }
            },
            watch:{
                num1:'add'
            }
        })

watch也可以把方法这样

num1(newVal,oldVal){
          this.add();
    } 

newVal和oldVal是固定接收的参数

• newval 更改后的数据
• oldval 更改前的数据

deep 深度侦听

在默认情况下，侦听对象的对象只侦听引用的变化，只有给对象赋值时才能够被监听到
示例：

<div id="app">
        {{ num1.name }}
    </div>

let vm =new Vue({
            el:"#app",
            data:{
                num1:{
                    name:'123',
                    age:18
                },
                num2:[]
            },
            watch:{
             num1:{
                    handler(){
                        console.log("对象的值被改变了");
                    },
                    deep:true,
                },
            }
        })

• handler是固定的方法
• deep 是否深度侦探