1. Event Action
Get Event Object in Vue
Common event function, the first form parameter of event handler receives injection of event object by default when called without any parameters, that is, the first parameter of event function is event object
<div id='app'>
<input @keyup='getKey' type='text'/>
</div>
...
<script>
...
methods: {
getKey(e) {
console.log(e.keyCode)
}
}
...
</script>
Receive Parameters in Vue Event Function
Vue provides explicit event objects for event functions with event parameters: $event
<div id='app'>
<button @keyup='del($event,12)'>delete</button>
</div>
...
<script>
...
methods: {
del(e,id) {
console.log(e)
console.log(id)
}
}
...
</script>
Operating Event Objects in Vue
stop Prevents Event Bubbles
Usage: @Event Object.stop='Event Handler'
<div id='app'> <div @click='outer'> <div @click='middle'> <!--Prevent Event Bubbles--> <div @click.stop='inner'> </div> </div> </div>
.prevent prevents event default behavior
Usage: @Event Object.prevent='Event Handler'
<div id='app'> <div @click='outer'> <div @click='middle'> <!--Prevent event default behavior--> <a @click.prevent='inner'> </div> </div> </div>
.capture triggers events as capture mechanisms
Usage: @Event Object.capture='Event Handler'
<div id='app'> <!--Change event trigger mechanism--> <div @click.capture='outer'> <div @click='middle'> <div @click='inner'> </div> </div> </div>
Events bound to a node by.self can only be triggered by itself (not by capture or bubble)
Usage: @Event Object.self='Event Handler'
<div id='app'> <div @click='outer'> <!--Let events trigger only by themselves--> <div @click.self='middle'> <div @click='inner'> </div> </div> </div>
Note:.self modifier, only let the current element's event trigger by itself, will not affect the bubbling of internal elements
.self can be used in combination with other modifiers
<!--Prevent event bubbles while letting the event trigger itself--> <div @click.self.stop='middle'></div>
.once makes events bound to a node valid only once
Usage: @Event Object.once='Event Handler'
<button @click.once='onceGetMsg'>One-click effect</button>
Key modifier (binds keyboard function to the corresponding event)
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
Custom keys
Vue.config.keyCodes.a = 65
<!--Simultaneously Press enter and ctrl Trigger Event--> <input type='text' @keyup.enter.ctrl='getDate'> <!--Simultaneously Press ctrl And customization keyCodes Key for 65(a) Trigger Event--> <input type='text' @keyup.ctrl.a='getDate'>
2. Form operations
Data Binding
Bidirectional data binding: Describes how data binds in an instance to a view in both directions. Data updates in an instance affect the display of data in the view, and data updates in the view are synchronized to the instance.
Form Data Binding
Data Binding (MVVM) The main experience is data binding operations through v-mode instructions in form data
<div id='app'>
<input type='text' v-model.trim='msg'>
<h2>{{msg}}</h2>
</div>
....
<script>
...
data:{
msg:''
}
...
</script>
Form Modifier
.trim: Used to eliminate invalid spaces on either side of a form element that are transported as data
.number: Used to convert data entered in the form into values
.lazy: Used to delay data synchronization in a form until it loses focus
vm.$set() and Vue.set()
Typically, a two-way binding of data is an operation function that listens to the data at the bottom, and the interface is rendered again once the operation function is called, but when the data is manipulated (array, object) it contains data updates of query syntax and does not cause data to be rendered again.
Instance function $set() and global function Vue.set() are provided in Vue to actively update data in query syntax
vm.$set(Target object, property, value) Vue.set(Target object, property, value)
<body>
<div id="app">
<button @click="arrAdd">Add data to the array</button>
<ul>
<li v-for="n in names" :key="n">{{n}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
...
data: {
names: ["zhangsan", "lisi", "wangwu", "zhaolliu"],
},
methods: {
arrAdd() {
// this.names.push("xuqi")//Call an array function to add data
// This.names[4] ='wangba'//Add data by index
// Vue provides its own instance function, $set, to add data directly through an index
this.$set(this.names, 4, "xuqi")
// Vue provides a generic function set for adding data directly through an index
Vue.set(this.names, 5, "wangba")
console.log(this.names)
},
}
...
</script>
Data Hijacking (Key)
In Vue2.x, the underlying layer completes the declaration of data through the native object Object.defineProperty(), which is called data hijacking and can be listened for when the hijacked data is queried and edited.
// Declare a variable: Declare it through data hijacking
// 1 Data storage container
let temp= "zhangsan"
// (2) Data monitoring objects
Object.defineProperty(window, "myName", {
get() { // Listen for read data
console.log("get Function call")
return temp
},
set(value) {
console.log("set Function call")
temp = value
}
})
Case study: Two-way data binding through data hijacking
<div id="app"></div>
<input type="text">
<script>
let app = document.getElementById('app')
let inp = document.querySelector('input')
let temp = 'Initial data'
Object.defineProperty(window,'content',{
get() {
return temp
},
set(val) {
temp = val
render(content)
}
})
function render(html) {
app.innerHTML = html
}
render(content)
inp.oninput = function(){
content= this.value
render(content)
}
</script>
Custom Vue Framework (Organizing)