Day01 of Vue learning
Day01 of VUE learning
1. Interpolation syntax: used to parse tag content.
2. Instruction syntax: used to parse tag body content, attributes, and binding events.
3. One-way data binding: v-bind
4. Two-way data binding: v-model
5.v-model can only be used on form class (input class) elements, such as input,select, etc.
6.v-model:value can be abbreviated as v-model, because v-model collects the value of value.
7.el is element, which is used to establish the relationship between the template and the Vue instance object.
8. Two ways of writing association:
(1).create Vue object configuration el Attributes: el: '#root' is a string corresponding to the container's CSS selector
(2).Created Vue After the object, pass v.$mount('#root') specifies the container. mount: mount
9. Two ways of writing data:
(1).Object style: data: {name: 'Bob'}
(2).Functional: data: function() {
return{
name: 'Bob'}}
- MVVM model:
(1).M: Model(Model): data data in .
(2).V: view(View): template code
(3).VM: view model(ViewModel): Vue example
- Object.defineProperty(obj,property,descriptor)
Attribute value 1: value Set property defaults
Attribute value 2: writable Whether the setting property can be modified
Attribute value 3: enumerable Set whether the attribute can be enumerated, that is, whether to allow traversal
Attribute value 4: configurable Set whether the attribute can be deleted or edited
Attribute value 5: get Get the value of the property
Attribute value 6: set set the value of the property
- Data proxy: The Vue instance object vm adds _data, and uses the Object.defineProperty() method to create properties in data for vm. This creation operation generates a data proxy.
That is, the operation (reading and writing) of attributes in the data object is proxied through the vm object.
13.Vue.config.productionTip = false // Prevent Vue from generating production tips at startup
14. Basic use of events:
(1).v-on:xxx can be abbreviated as @xxx binding event, where xxx is the event name.
(2). Event callbacks need to be configured in methods, and will eventually be mounted on the vm object.
(3) For the functions configured in .methods, do not use arrow functions, otherwise this is not a vm, but an object of the outer layer.
(4). The functions configured in .methods are all functions managed by Vue, and this points to the vm or component instance object.
(5). Event parameter passing. When you want to pass in other parameters, don't forget to pass in the event object $event, otherwise the event object will be lost.
15. Event modifiers
(1).prevent: Prevent default events (commonly used)
(2).stop: prevent bubbling events (commonly used)
(3).once: The event is only triggered once (commonly used)
(4).capture: Use event capture mode (capture events from outside to inside, bubbling events from inside to outside)
(5).self: Events are triggered only when event.target is the element of the current operation
(6).passive: The default behavior of the event is executed immediately, without waiting for the event callback to complete
(7). Modifiers can be written consecutively, such as: @click.prevent.stop = "showInfo" It means that showInfo first prevents the default event and then prevents the bubbling event.
And @click.stop.prevent = "showInfo" It means that showInfo first prevents the bubbling event and then prevents the default event.
16. Keyboard events
(1). Commonly used button aliases in Vue:
carriage return => enter
delete => delete
exit => esc
space => space
Newline => tab (need to be used with keydown)
up, down, left, right => up down left right
(2). For key aliases not provided by Vue, you can use the original key value of the key to bind, but pay attention to converting it into kebab-case (short horizontal line naming), such as: caps-lock
(3). Special usage of system modifier keys: ctrl, alt, shift, win keys
Use with keyup: While pressing the modifier key, press other keys, and then release the other keys, the event is triggered.
Use with keydown to trigger events normally.
(4). If you want to trigger the event only when you press ctrl + y, you can use @keyup.ctrl.y = "showInfo"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>Interpolation syntax: used to parse tag content.{{ name.toUpperCase() }}</h1>
<h1>Instruction syntax: used to parse tag body content, attributes, and binding events</h1>
<a v-bind:href="url">Click to jump to Baidu</a>
<!-- v-bind Can be abbreviated as : -->
<label>
One-way data binding:
<input type="text" v-bind:value="name">
</label>
<label>
Two-way data binding:
<input type="text" v-model:value="name">
</label>
<h2>Welcome to{{ address }}</h2>
<button v-on:click="showInfo1">Click me to trigger the event, prompt information(No parameter)</button>
<button @click="showInfo2($event, '999')">Click me to trigger an event, prompt information (pass parameter)</button>
<a :href="url" @click.prevent="showInfo1">block default event</a>
<div class="demo1" @click="showInfo2($event,'outer layer')">
<button @click.stop="showInfo2($event,'inner layer')">prevent bubbling events</button>
</div>
<button @click.once = showInfo2($event,'Can only be triggered once')>Can only be triggered once</button>
<input type="text" placeholder="please enter information" @keyup.enter = "showInfo1">
</div>
<script type="text/javascript">
Vue.config.productionTip = false // Prevent Vue from generating production hints on startup
// Create a Vue instance
new Vue({
el: '#root', // el is used to specify which container the current Vue instance serves, and the value is usually a CSS selector string.
data: { // data is used to store data, and the data is used by the container specified by el.
name: 'Bob',
url: 'https://www.baidu.com',
address: 'Shanghai',
},
methods: {
showInfo1(event) {
console.log(event.target.value)
// alert('Hello classmate!')
},
showInfo2(event, str) {
console.log(str)
alert("hello" + str)
}
}
})
let num = 18
let person = {
name: 'Zhang San',
sex: 'male',
}
Object.defineProperty(person, 'age', {
get: function () {
console.log('someone read age')
return num
},
set(value) {
console.log('Revise age')
num = value
}
})
</script>
</body>
</html>