Due to the impact of the epidemic, I believe many friends are staying at home. Small and medium-sized companies will lay off staff due to operational difficulties, we are also facing ‘unemployment ‘, do you feel anxious. A recent survey asked, ‘Have you found a job yet? 1. Most of the replies: Job platforms are ‘replied’, and there is no follow-up, have you encountered? As far as I’m concerned, the year is already a quarter over and people should start working by February at the latest. It’s already the middle of March now, and I can probably go out to work in May. This period of time is actually quite precious, so I have a lot of free time to improve my skills and prepare for the following interview.
In this chapter, I will lead you to brush the Vue technology points to deal with the following interview. This time, we will update the Vue family bucket successively: Vue VueX VuE-Router; And later, if time permits, to implement a Vue project.
Vue
Style binding
Use the class
1. Add styles in arrays
Add styles by array [‘ style name ‘] –> Here the style name is pre-defined in CSS, using the :class binding
: < h1 class = "[' size ', 'color', boo? 'big' : 'weight']" > add style < / h1 >
Copy the code{‘ style name ‘, Boolean value variable}
<h1 :class="['color',{'big':boo}]">
Copy the code3. Control the display of styles by using computed properties
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && ! this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
Copy the codeStyle inline style is used
CSS property names can be camelCase or kebab-case delimited (remember to use quotes)
1. Change the style by passing in an object to style
Disadvantages: Cannot pass multiple objects
<h3 :style="ss"> </h3>
<script>
new Vue({
el: '#fade',
data:{
ss:{color:'red','font-size':"50px"},
}
})
</script>
Copy the code
- You can put multiple objects in an array by passing an array to style
< p style=" max-width: 100%; clear: both;
<script>
new Vue({
el: '#fade',
data:{
dd:{"font-weight":900},
yy:{color:'blue','font-size':"30px"},
}
})
</script>
Copy the codeConditions apply colours to a drawing
V – if with v – show
// Both commands can do control element rendering.
// The difference is:
1. v-ifIs used to control the creation and destruction of elements
2.V-show is used to control display changes of elements
// Select use:
If you need to switch very frequently, use V-show. If conditions rarely change at run time, use V -ifIs better.
Copy the codeThe list of rendering
v-for
The V-for directive renders a list based on an array.
Format: 1. Iterate over the number group
(item, index) in items
A) item B) index C) index D) index
- Traverse object
(value, name, index) in object
Value indicates the value. Name indicates the key. Index indicates the index
Pay attention to
1 According to the JavaScript mechanism, in can be changed to of, which is closer to JavaScript
- The traversal item must bind a key to determine the identity of each node
Variation method
// Changes the original array in which these methods were called.
Simply put: is to change the original array, in the original array to do some operations, such as: add, delete..
// Methods of variation include:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
Copy the codeNonmutational method
// Non-mutating methods: create a new array without changing the original array
// Non-mutating methods include:
filter()
concat()
slice()
.
Copy the codePay attention to
//vm is a Vue instance
var vm = new Vue({
data: {
items: ['a'.'b'.'c']
}
})
// When you set an array item directly using an index
Vm. items[indexOfItem] = newValue ❌ Error
// The authorities offer two solutions
1. Vue.set
Vue.set(vm.items, indexOfItem, newValue)
2. Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
// When you change the length of the array
Vm.items. length = newLength ❌ Error
// The authorities offer a solution
1.vm.items.splice(newLength)
Copy the codeObject Change notice
If you want to dynamically add properties to an existing data object property,
Direct addition is not reactive, the official provides the solution.
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
// Add an attribute that can be used
Vue.set(vm.userProfile, 'age'.27)
// Assign multiple new attributes to existing objects, using object.assign ().
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27.
favoriteColor: 'Vue Green'
})
Copy the codeDisplays the results of filtering/sorting
Sometimes we want to display a filtered or sorted version of an array without actually changing or resetting the original data. In this case, you can create a calculated property to return a filtered or sorted array.
<div>
<div id="main">
<template v-for='(item,index) in filters' :key=index>
<li>{{item}}</li>
</template>
</div>
</div>
<script>
var vm = new Vue({
el: '#main'.
data: {
list: [1.2.3.4.5.6]
},
computed: {
filters: function(){
return this.list.filter(item= >
item%2= =0
)
}
},
})
</script>
Copy the codeThe event processing
Event modifier
Vue.js provides event modifiers for V-Ons. For some operational restrictions on events, modifiers are indicated by an instruction suffix beginning with a dot.
.stop.prevent.capture.self.once.passive.once
<! -- Prevent the click event from propagating -->
<a v-on:click.stop="doThis"></a>
<! Submit events no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<! -- modifiers can be concatenated -->
<a v-on:click.stop.prevent="doThat"></a>
<! -- only modifiers -->
<form v-on:submit.prevent></form>
<! Add event listener with event capture mode
<! Events triggered by an inner element are processed here before they are processed by the inner element.
<div v-on:click.capture="doThis">.</div>
<! Trigger handler only if event.target is the current element itself -->
<! -- that is, events are not triggered from internal elements -->
<div v-on:click.self="doThat">.</div>
Copy the codeKey modifier
Since Vue has abolished the keyCode event, during development, you can customize key modifier aliases using the global config.keyCodes object if you want to retrieve keys entered by the user: The specific Settings for https://cn.vuejs.org/v2/api/#keyCodes
// Although Vue does away with keyCode events, Vue provides aliases for most commonly used keycodes:
.enter
.tab
.delete (capture the delete and backspace keys)
.esc
.space
.up
.down
.left
.right
<! Only in -`key` 是 `Enter`Called when the`vm.submit()` -->
<input v-on:keyup.enter="Custom Events">
Copy the codeForm input binding
Checkbox checkbox
A single check box is bound to a Boolean value
Multiple checkboxes bound to the same array
Radio button radio
Bind directly to custom properties in data
Select the select box
The V-model is bound to the SELECT element.
Please choose A, B, and C
Multiple selection: Bind to an array
Value binding
For radio buttons, check boxes, and select box options, the value of the V-model binding is usually a static string (it can also be a Boolean value for check boxes) :
ABC
To bind a value to a dynamic property of a Vue instance, you can use V-bind, and the value of the property may not be a string.
Check box
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
// when selected
vm.toggle === 'yes'
// When not selected
vm.toggle === 'no'
Copy the codeThe radio button
<input type="radio" v-model="pick" v-bind:value="a">
// when selected
vm.pick === vm.a
Copy the codeSelect box option
<select v-model="selected">
<! Inline object literals -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// when selected
vm.selected.number // => 123
Copy the codeThe modifier
-
.lazy
-
.number
-
.trim
Vue has been based on the finished, after reading the article can follow some demo, to master the basic use of Vue. The next chapter will update the use of Vue Components. Components are an important part of Vue, and component communication is especially important. With an understanding of how to use Components, you can build a Web Component for data communication.
Feel good praise, help forward share the following, the original is not easy!
Follow the wechat public account ‘Front-end Self-study Community’ for more information
