I am following Black Horse Programmer Vue Complete Video Teaching Yes, thanks to the black horse programmer.
Filter
Filters are functions provided by vue for developers, often used for text formatting. Filters can be used in two places: interpolation expressions and v-bind attribute bindings. (Vue3 deleted)
Filters should be added at the end of JavaScript expressions and called by Pipeline |
<div id="app">
<p>message The value is:{{ message | capi }}</p>
</div>
Define filters: During the creation of a vue instance, filters can be defined in the filters node
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js'
},
// Filter function, must be defined under the filters node
// Filters are essentially functions
filters: {
// Note: The val in the filter function parameter is always the value before the pipe symbol
capi(val) {
// A string has a charAt method that receives an index value, meaning that the character corresponding to the index is extracted from the string
// val.charAt(0)
const first = val.charAt(0).toUpperCase()
// The slice method of a string, which intercepts strings from the specified index back
const other = val.slice(1)
// Emphasis: there must be a return value in the filter
return first + other
}
}
})
</script>
Private and global filters:
The filter defined under the filters node is called a "private filter" because it can only be used in the el area controlled by the current vm instance. If you want to share filters among multiple vue instances, you can define global filters in the following format:
<body>
<div id="app">
<p>message The value is:{{ message | capi }}</p>
</div>
<div id="app2">
<p>message The value is:{{ message | capi }}</p>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
// Use Vue.filter() defines a global filter
Vue.filter('capi', function (str) {
const first = str.charAt(0).toUpperCase()
const other = str.slice(1)
return first + other + 'Overall situation'
})
const vm = new Vue({
el: '#app',
data: {
message: 'hello vue.js'
},
// Filter function, must be defined under the filters node
// Filters are essentially functions
filters: {
// Note: The val in the filter function parameter is always the value before the pipe symbol
capi(val) {
// A string has a charAt method that receives an index value, meaning that the character corresponding to the index is extracted from the string
// val.charAt(0)
const first = val.charAt(0).toUpperCase()
// The slice method of a string, which intercepts strings from the specified index back
const other = val.slice(1)
// Emphasis: there must be a return value in the filter
return first + other
}
}
})
// ----------------------------------
const vm2 = new Vue({
el: '#app2',
data: {
message: 'heima'
}
})
</script>
</body>
Notes for filters:
- To be defined under the filters node, is essentially a function
- In filter functions, there must be a return value
- In the filter parameters, you can get the value to be processed before the "pipe symbol"
- If the global filter and the private filter have the same name, then the private filter is called according to the proximity principle.
In enterprise project development:
- If 2 is used. With version x of vue, you can still use filter-related functions
- If the project has been upgraded to 3. Version X of vue, the official recommendation is to use computed attributes or methods instead of excluded filter functions
watch listener
The watch listener allows developers to monitor changes in data to perform specific actions against changes in data.
const vm = new Vue({
el: '#app',
data: {username: ''},
// All listeners should be defined under the watch node
watch: {
// A listener is essentially a function. To monitor which data changes, just use the data name as the method name.
// Listen for changes to username
// newVal is the new value after change, oldVal is the old value before change
username(newVal,oldval) {
console.log(newVal,oldVal)
})
}
}
})
Immediate option: By default, components do not call the watch listener after initial loading. If you want the watch listener to be called immediately, you need to use the immediate option.
There is a handle property inside the username object.
const vm = new Vue({
el: '#app',
data: {
username: 'admin'
},
// All listeners should be defined under the watch node
watch: {
// A listener that defines the object format
username: {
// Processing functions for listeners
// handle triggers automatically whenever a change in value is heard
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
// The default value for the immediate option is false
// The purpose of immediate is to control whether the listener triggers automatically once!
immediate: true
}
}
})
Deep option: if watch is listening on an object, it cannot be listened on if the value of an attribute in the object has changed. The deep option is required at this point
const vm = new Vue({
el: '#app',
data: {
// User's Information Object
info: {
username: 'admin',
address: {
city: 'Beijing'
}
}
},
// All listeners should be defined under the watch node
watch: {
info: {
handler(newVal) {
console.log(newVal)
},
// Turn on deep listening, which triggers the Object's Listener whenever any of the properties of the object change
deep: true
}
}
}
})
Listen for changes in a single property of an object: If you only want to listen for changes in a single property in an object, you can define a watch listener as follows
const vm = new Vue({
el: '#app',
data: {
// User's Information Object
info: {
username: 'admin',
address: {
city: 'Beijing'
}
}
},
// All listeners should be defined under the watch node
watch: {
// If you want to listen for changes in the object's subattributes, you must wrap a single quotation mark around it
'info.username'(newVal) {
console.log(newVal)
}
}
})
Listener format:
- Method Format Listener
- Disadvantage 1: Cannot trigger automatically when you first enter the page!!!
- Disadvantage 2: If you are listening on an object, if the attributes in the object change, the listener will not be triggered!!!
- Listener in object format
- Benefit 1: The listener can trigger automatically through the immediate option!!!
- Benefit 2: The deep option allows the listener to listen deeply for each property change in the object!!!
Computing attributes
Calculating attributes means that an attribute value is obtained after a series of operations.
This dynamically computed attribute value can be used by the template structure or methods.
Characteristic:
- When defined, it is defined as a "method". Although a computed attribute is defined as a method when declared, the essence of a computed attribute is an attribute.
- When using computed attributes, common attributes can be used
- Calculating attributes caches the results of the calculation and will only be re-computed if the data on which the attribute depends changes
Benefits:
- Code Reuse Implemented
- As long as the data source on which the computed attribute depends changes, the computed attribute will be automatically re-evaluated!
<!-- :style Represents a dynamically bound style object whose value is { } Style object -->
<!-- Current style object, contains only backgroundColor background color -->
<div class="box" :style="{ backgroundColor: `rgb(${r}, ${g}, ${b})` }">
{{ `rgb(${r}, ${g}, ${b})` }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
r: 0,
g: 0,
b: 0
},
});
</script>
<script>
var vm = new Vue({
el: '#app',
data: {
r: 0,
g: 0,
b: 0
},
methods: {
// Click the button to display the latest colors in the terminal
show() {
console.log(this.rgb)
}
},
// All calculation properties are defined under the computed node
// When calculating an attribute, define it as a Method Format
computed: {
// rgb is defined as a method format as a computed property.
// Finally, in this method, a generated rgb(x,x,x) string is returned
rgb() {
return `rgb(${this.r}, ${this.g}, ${this.b})`
}
}
});