vue的单向数据绑定和双向数据绑定，事件
单项数据绑定：
- 概念；
将数据和属性进行绑定， 也就是原生身上的属性的值就是数据 - 格式
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>
双向数据绑定
数据改变， 视图更新，
视图改变， 数据更新
- 格式：
v-model:attr=data
简写：可以省略属性
v-model=data - 特别强调：
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>
事件
事件初级操作
- 属性绑定
<div onClick = "alert"></div>
function alert(){
alert('hello vue.js')
}
- 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'
}
事件的组成部分：
- DOM
- on 添加事件的形式
- 事件类型 click
- 事件处理函数
有上面的总结：
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>
事件高级操作
-
事件修饰符
举例：事件冒泡
e.stopPropagation()这个代码的复用性差
所以vue这边有一个解决方案： 使用事件修饰符(modify)
格式：
v-on:eventType.modify = eventFnName
修饰符类型：
.stop : 阻止冒泡行为
.prevent ：阻止浏览器默认行为
.capture ： 阻止捕获行为
.self ： 自身触发,点谁谁触发事件，也可以解决事件冒泡，用再父元素身上
.once ： 只执行一次
.passive ：
行为结束后触发（scroll），鼠标拉下去，拉到合适的地方才会执行事件 -
按键修饰符 （ 键盘事件 keyup keydown keypress）
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right -
自定义按键修饰符
-
全局修改
Vue.config.keyCodes.自定义修饰符 = 键盘码
使用：
@keyup.自定义修饰符 = eventFnName
这个其实已经用不上了，因为更新后 可以直接在后面加上要按的键就 ，不需要再自定义
-
自定义事件(自定义事件类型)
如何定义？ -
使用new Vue() 的到的实例来定义
vm.$on(eventName,callback)//vm为Vue的实例 -
如何触发呢？
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 = 80
var vm = new Vue({//实例化一个vm等于vue
data: {
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>