vue的单向数据绑定和双向数据绑定，事件

单项数据绑定：

1. 概念；
   将数据和属性进行绑定， 也就是原生身上的属性的值就是数据
2. 格式
   v-bind:attr = data
   简写：
   :attr = data
   数据更改 ， 视图就更新

<div id="app"><input type="text" v-bind:value="msg">
</div><script>new Vue({el: '#app',data: {msg: 'hello vue.js'}})
</script>

双向数据绑定
数据改变， 视图更新，
视图改变， 数据更新

1. 格式：
   v-model:attr=data
   简写：可以省略属性
   v-model=data
2. 特别强调：
   v-model用于表单， v-model默认绑定了value属性

<div id="app"><input type="text" v-model="msg">
</div><script>new Vue({el: '#app',data: {msg: 'hello vue.js'}})
</script>

使用单项数据绑定实现双向数据绑定？
思路：使用event的target.value属性

<div id="app"><input type="text" v-bind:value = "msg" @input = "inputHandler">
</div><script>new Vue({el: '#app',data: {msg: 'hello 骏哥'},methods: {inputHandler(e){// console.log( e )this.msg = e.target.value}}})
</script>

事件

事件初级操作

1. 属性绑定

<div onClick = "alert"></div>function alert(){alert('hello vue.js')
}

2. js操作
   // 1. 获取数据
   var data = ‘hello vue.js’
   // 2. 获取DOM
   var app = document.querySelector(’#app’)
   // 3. 渲染数据
   app.innerHTML = data
   // 4. 添加事件

app.onclick = function(){
app.style.background = 'red'
}

事件的组成部分：

1. DOM
2. on 添加事件的形式
3. 事件类型 click
4. 事件处理函数
   有上面的总结：
   vue使用第一种事件添加的形式 —》 v-on
   格式：
   v-on:eventType = eventFnName
   简写：
   @eventType = eventFnName// @click=“事件处理函数名称”
   事件处理函数写在配置项中 methods中
   书写步骤：
   先写方法， 再去绑定
   代码：

<div id="app"><h3> 事件添加 </h3><button v-on:click="changeMsg">{{ msg }}</button><button @click="changeMsg">{{ msg }}</button><hr><h3> 事件传参 </h3><button @click="argHandler('hello 骏哥~~~')">eventArgument</button><hr><h3> 事件对象 </h3><button @click="eventHandler">event</button><hr><h3> 事件多个参数 </h3><button @click="evHandler('骏哥',$event)">args</button>
</div><script>new Vue({el: '#app',data: {msg: 'hello vue.js'},methods: {/* 一个key 就是一个方法 */changeMsg() {this.msg = 'hello 我骏哥~~~'},argHandler(value) {alert(value)},eventHandler(e) {console.log(e)},evHandler(arg, e) {//此处传入了两个参数，思考怎么解决e不打印的问题console.log(arg)console.log(e)}}})//
问题：第二个参数 事件对象 = undefined
原因： 当我们自定义参数后， 系统无法自动识别 ， 是不是事件对象
解决： 传入事件对象的实际参数： $event</script>

事件高级操作

1. 事件修饰符
   举例：事件冒泡
   e.stopPropagation()这个代码的复用性差
   所以vue这边有一个解决方案： 使用事件修饰符(modify)
   格式：
       v-on:eventType.modify = eventFnName
   修饰符类型：
         .stop : 阻止冒泡行为
         .prevent ：阻止浏览器默认行为
         .capture ： 阻止捕获行为
         .self ： 自身触发,点谁谁触发事件，也可以解决事件冒泡，用再父元素身上
         .once ： 只执行一次
         .passive ：
   行为结束后触发（scroll），鼠标拉下去，拉到合适的地方才会执行事件

2. 按键修饰符 （ 键盘事件 keyup keydown keypress）
       .enter
       .tab
       .delete (捕获“删除”和“退格”键)
       .esc
       .space
       .up
       .down
       .left
       .right

3. 自定义按键修饰符

4. 全局修改

Vue.config.keyCodes.自定义修饰符 = 键盘码
使用：
@keyup.自定义修饰符 = eventFnName这个其实已经用不上了，因为更新后 可以直接在后面加上要按的键就 ，不需要再自定义

2. 自定义事件(自定义事件类型)
   如何定义？

3. 使用new Vue() 的到的实例来定义
   vm.$on(eventName,callback)//vm为Vue的实例

4. 如何触发呢？
   vm.$emit(eventName)

   this.$emit(eventName)

5.如何销毁一个dom元素？
看下面代码

上代码

<div id="app"><button @click='destory'> 销毁 </button><div @click.self="bigHandler" v-if="f">  <p @click.stop='smallHandler'></p></div><!-- <input type="text" @keyup.space = "submitHandler"> --><input type="text" @keyup.p="submitHandler"><h3>自定义事件</h3><button @click="myEventHandler">my-event</button>
</div><script>Vue.config.keyCodes.P = 80var vm = new Vue({//实例化一个vm等于vuedata: {f: true},methods: {bigHandler(e) {alert('bigger')},smallHandler(e) {alert('small')// e.stopPropagation()},submitHandler() {alert('keyup')},destory() {this.f = !this.f},myEventHandler() {this.$emit('my-event')console.log('events')}}}).$mount('#app')//这里时手动挂载#app和el:'#app'；作用相同vm.$on('my-event', function() {console.log('自定义事件')})
</script>