Custom instruction
- The instructions simplify DOM operations and are intended to encapsulate the underlying DOM operations.
- We can customize directive Settings when we want to use SOME DOM functionality that the built-in directives do not have.
Custom global directives
- Scope: global
- Directives that can be used by any Vue instance or component.
<body>
<div id="app">
<input type="text" v-focus = "100 + 1">
</div>
<script>
// Custom global directives
Vue.directive('focus', {// The hook function
inserted(el,binding){
console.log(el);
console.log(binding);
// Get the focus eventel.focus(); }});new Vue({
el: "#app".data:{
},methods: {}});</script>
</body>
Copy the code- When the global focus directive binds two inputs to the page, it will be displayed in the second Input after running the page because only one can be focused in the page.
Hook function arguments
- El: The element bound by the directive that can be used to manipulate the DOM directly.
- Binding: An object containing the following properties:
- Name: indicates the command name, excluding the V – prefix.
- Value: specifies the binding value of the directive. For example, v-my-directive=”1 + 1″, the binding value is 2.
- Expression: command expression in the form of a string. For example, if v-my-directive=”1 + 1″, the expression is “1 + 1”.
- Modifiers: An object that contains modifiers. For example, in v-my-directive.foo.bar, the modifier object is {foo: true, bar: true}.
Custom local directives
- Scope: local
- Directives that can be used within the current Vue instance or component.
<body>
<div id="app">
<input type="text" v-focus = "100 + 1">
</div>
<div id="app2">
<! Unable to use local command, error -->
<input type="text" v-focus>
</div>
<script>
new Vue({
el: "#app".data:{
},methods:{
},
// Define local directives
directives: {
// The name of the directive
focus: {
inserted(el){ el.focus(); }}}});new Vue({
el: '#app2'.data: {},methods: {}});</script>
</body>
Copy the codeThe filter
- Filters are used to format text content.
- Filters can be used in interpolation and v-bind.
- The data displayed in the view comes from the return value of the filter.
- You need to use the pipe: |
Global filter
- Elementary: Pass a piece of data into a filter for processing (page rendering: ABC)
<body>
<div id="app">
<! | - interpolation expressions: pipe -- -- >
<p>{{value | filterA}}</p>
<! -- v-bind -->
<p v-bind:title="value | filterA">This is the label</p>
</div>
<script src="lib/vue.js"></script>
<script>
// Define a global filter
Vue.filter('filterA'.function(value){
// The filter is just an output statement and does not return any information, so the view layer does not display any information
console.log(value);
return value.split(The '-').join(' ');
});
new Vue({
el:'#app'.data: {
value:'a-b-c'
},methods: {}});</script>
</body>
Copy the code- A single data can be passed into multiple filters for processing. (Page rendering: Abc)
<body>
<div id="app">
<! | - interpolation expressions: pipe -- -- >
<p>{{value | filterA | filterB}}</p>
</div>
<script src="lib/vue.js"></script>
<script>
// Define a global filter
Vue.filter('filterA'.function(value){
// The filter is just an output statement and does not return any information, so the view layer does not display any information
console.log(value);
// Split the string into arrays and concatenate them
return value.split(The '-').join(' ');
});
Vue.filter('filterB'.function(value){
// slice: string interception
return value[0].toUpperCase() + value.slice(1);
});
new Vue({
el:'#app'.data: {
value:'a-b-c'
},methods: {}});</script>
</body>
Copy the code- A filter can pass in multiple parameters.
<body>
<div id="app">
<! Pass multiple parameters to a filter
<p>{{value | filterA | filterC('baidu-',200)}}</p>
</div>
<script src="lib/vue.js"></script>
<script>
// Define a global filter
Vue.filter('filterA'.function(value){
// The filter is just an output statement and does not return any information, so the view layer does not display any information
console.log(value);
return value.split(The '-').join(' ');
});
// A filter can pass in multiple arguments: parameter 1 is the data bound to the data layer
Vue.filter('filterC'.function(para1,para2,para3){
return para2 + para1;
});
new Vue({
el:'#app'.data: {
value:'a-b-c'
},methods: {}});</script>
</body>
Copy the codeLocal filter
- Local filters can only be used in the current Vue instance. (Case: scope of local filter)
<body>
<div id="app">
<P>{{content | filterA}}</P>
</div>
<div id="app2">
<! Vue. Js :634 [Vue WARN]: Failed to resolve filter: filterA-->
<p>{{content | filterA}}</p>
</div>
<script>
new Vue({
el: '#app'.data: {
content: 'a-b-f'
},methods: {},// Define local filters
filters: {
filterA: function(value){
return value.split(The '-').join(' '); }}});new Vue({
el: '#app2'.data: {
content: 'g-t-s'}});</script>
</body>
Copy the code- Pass one data into multiple filters for processing (page rendering: FBA)
<body>
<div id="app">
<P>{{content | filterA | filterB}}</P>
</div>
<script>
new Vue({
el: '#app'.data: {
content: 'a-b-f'
},methods: {},// Define local filters
filters: {
filterA: function(value){
return value.split(The '-');
},
// The function shorthand for filter
filterB(value){
return value.reverse().join(' '); }}});</script>
</body>
Copy the code- Pass multiple data into a filter for processing (page presentation: Bidu-FBA)
<body>
<div id="app">
<P>{{content | filterA | filterB('baidu-')}}</P>
</div>
<script>
new Vue({
el: '#app'.data: {
content: 'a-b-f'
},methods: {},// Define local filters
filters: {
filterA: function(value){
return value.split(The '-');
},
filterB(value,prefix){
return prefix + value.reverse().join(' '); }}});</script>
</body>
Copy the code- When global filter and local filter have the same name, local filter is executed.
<body>
<div id="app">
<P>{{content | filterA | filterB('baidu-')}}</P>
</div>
<script>
// Global filter with the same name
Vue.filter('filterA'.function(value){
return 'Hello,filterA'.split(' ');
});
new Vue({
el: '#app'.data: {
content: 'a-b-f'
},methods: {},// Define local filters
filters: {
filterA: function(value){
// Split the string into arrays
return value.split(The '-');
},
filterB(value,prefix){
// Array methods
return prefix + value.reverse().join(' '); }}});</script>
</body>
Copy the codeThe problem
- What happens when both global and local filters have the same name?
- Only local filters will take effect.
- Summary: some basic global filters can be defined in the global filter, in a particular instance of the function, wish to carry out new function Settings, you can cascade the global filter through the way of name. In order to achieve different Vue instances, the same filter function is not the same.
Calculate attribute
- Improve execution efficiency by reducing the number of times a function is executed
Methods are different from computed
- Computed has a cache type, whereas Methods does not.
- Computed is accessed by attribute name, and methods needs to be called.
- Computed applies only to computing operations.
Scenarios for calculating attributes (Exercise)
- The calculation property can cache the result of the calculation. When we use it later, as long as the data has not changed, the calculation will not be repeated, but directly read the data in the cache.
- V-for has a higher priority and lower efficiency than V-IF (not recommended)
- Methods apply when data is used only once
- Use data once or more for high efficiency (recommended)
- Demo code
<body>
<div id="app">
<! -- Not recommended -->
<! -- <p v-if="item > 10" v-for="item in arr">{{item}}</p> -->
<p v-for="item in result">{{item}}</p>
</div>
<script src=".. /note/lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app'.data: {arr: [2.67.45.9.0]},methods: {// Handle the function through the method, return the processed array
result(){
var resultArr = [];
for(var i = 0; i <this.arr.length; i++){
if(this.arr[i] > 10){
resultArr.push(this.arr[i]); }}returnresultArr; }}computed: {// It will only be executed once, through the property name
result(){
var resultArr = [];
for(var i = 0; i <this.arr.length; i++){
if(this.arr[i] > 10){
resultArr.push(this.arr[i]); }}returnresultArr; }}});</script>
</body>
Copy the codeSetters for computed properties (modify operations performed by computed properties)
- By default, computed properties only have getters, and vue.js also allows setters for computed properties.
- FullName = vm.fullName = “wang Xiamei”
<body>
<div id="app">
<p>{{fullName}}</p>
</div>
<script src=".. /note/lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app'.data: {firstName:'张'.lastName:'里斯'
},
computed: {
// Default writing mode
// fullName(){
// return this.firstName + this.lastName;
// }
// Write getter and setter separately
// Console: vm. FullName = "wangxiaomi"
fullName: {
get(){
return this.firstName + this.lastName;
},set(newName){
var nameArr = newName.split(' ');
this.firstName = nameArr[0];
this.lastName = nameArr[1]; }}}});</script>
</body>
Copy the codeThe listener
- Used to listen for data changes and perform specified operations.
- Demo code (basic listening)
<body>
<div id="app">
<input v-model='value'>
</div>
<script src=".. /note/lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app'.data: {value:' '
},
// Listen for data
watch: {value(val,oldval){
// Outputs new and old values
console.log('Value has been modified',val,oldval); }}});</script>
</body>
Copy the code- To listen for changes in internal values, write watch as an object and set the option deep:true, then set the handler through handler.
Listen for changes in the object itself and data inside the object (deep:true)
- Demo code
<script src=".. /note/lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app'.data: {obj: {content1:Content of the '1'.content2:Content of the '2'}},// Listen for data
watch: {// obj(){
// // allows assignment changes to obJ as a whole, but internal changes do not trigger listener functions
// console.log('obj has been modified ');
// }
obj: {deep:'true'.handler(){
console.log('OBj has been modified'); }}}});</script>
Copy the codePay attention to
- Arrays do not need to add deep:true as objects do;
- When you change (not replace) an array or object, the new value in the callback function is the same as the old value, because their references refer to the same array, object.
- Do not use index and length for array operations. Listener functions cannot be triggered. Push\pop\ vue.set ()
- Demo code
<script src=".. /note/lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app'.data: {value:' '.obj: {content1:Content of the '1'.content2:Content of the '2'
},
arr: [3.56.23.99]},// Listen for data
watch: {arr(val,oldval){
// The listener function was successfully executed and the new value was found to be the same as the old value
console.log('ArR has been modified',val,oldval); }}});</script>
Copy the codeVue DevTools
- Vue. Js is officially provided to debug Vue application tools.
- Note: Google Access Assistant download address: chrome.zzzmh.cn/
Note (3 points to see the Vue on the console)
- 1. The web page must have vue.js function
- 2. Web pages must use vue.js instead of vue.min.js
- 3. The web page must be opened in HTTP rather than file
- Note: it is only applicable to the debugging of web pages with VUE function
Vue.js life cycle
- The vue.js lifecycle refers to the lifecycle of a Vue instance.
- The life cycle of a Vue instance refers to the process of creating, running, and destroying the instance.
Vue.js life cycle function
- By setting life cycle functions, you can perform functions at specific stages of the life cycle.
- Lifecycle functions are also called lifecycle hooks.
Create a stage
- BeforeCreate: called before instance initialization
- Created: called after an instance is created
- BeforeMount: called before the instance is mounted
- Mounted: Indicates that an instance is mounted
- Features: Each instance can only be executed once
Operation phase
- BeforeUpdate: Called after data is updated before view is updated
- Updated: Invoked after the view is updated
- Features: Call on demand
Destruction of phase
- BeforeDestory: called before instance destruction
- Destoryed: called after the instance is destroyed
- Features: Each instance can only be executed once