Video tutorial
Please move because you don't support video link. https://www.henrongyi.top
What can you learn?
Hand in hand with you to learn VUE entry three files, VUE constructor internal use of various attributes, methods, computed, watch, filters, these four attributes, will often be used in the work. There are many mixed attributes, such as mixin, etc. Later there will be a separate video introduction. Now we can start with the introduction and development. Later, we will add some unusual usage. After this period, you can develop a small project to play.
Method options
Method is the event handler in our VUE. You can write the method here and call it by this. method name inside the constructor. We have used this method in our previous study, but here we emphasize that we should never use arrow function. After all, this is where we need to point to the VUE instance. Outside the VUE constructor, we can also invoke methods through instances. Here's an example.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .active{ color:red } </style> </head> <body> <div id="app"> <button v-on:click="add">+</button>{{num}}<button @click="minus">-</button> <!-- Here we go through click Called add and minus Method --> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ num:1 }, methods:{ add(){ this.num++ }, minus(){ this.num-- this.testMet()//Here we call the method in the event handler through this }, testMet(){ console.log("I was called.") } } }) app.testMet()//Here we call methods in the event handler through an app instance </script> </body> </html>
computed option
Remember the JS expression we talked about in the first issue {{message. split ('). reverse (). join (')}} that wrote a simple JS expression in the difference expression?
In fact, it is not elegant to process data like this. VUE provides us with the option of computed to process data. We call it computational attribute when the logic is complex.
We should use computed to compute properties.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .active{ color:red } </style> </head> <body> <div id="app"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello' }, computed: { // getter for calculating attributes reversedMessage: function () { // ` this `points to the app instance return this.message.split('').reverse().join('') } } }) </script> </body> </html>
This is a simple use case for calculating attributes. In fact, there are two methods for calculating attributes: get and set. We call them getter and setter. Here I'll show you the code.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .active{ color:red } </style> </head> <body> <div id="app"> <p>{{firstName}}</p> <p>{{lastName}}</p> <p>{{fullName}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { firstName: 'Foo', lastName: 'Bar', }, computed: { // getter for calculating attributes fullName:{ // getter triggers when using data get: function () { return this.firstName + ' ' + this.lastName }, // setter triggers the new Value when modifying the data, which is the data after we modify it. set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } }) </script> </body> </html>
Vm.fullName='John Doe'Everyone can modify fullName externally directly or trigger set events of fullName to modify firstName and lastName.
watch options
In Vue, we want to look at a data, what we have to do when it changes, and then we need to use the watch listener. Specific usage is also very simple, let's start with a shallow monitor. Each change triggers the function of the listener, which accepts the current val of two parameters and the one before the change. Old val, we can make a judgment based on this.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .active{ color:red } </style> </head> <body> <div id="app"> <p>{{Name}}</p> <p>{{ChangeName}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { Name: 'QM', ChangeName: 'Cool', Names: 'QMS', NameDeep: 'QMDeep', NameImm: 'QMImm', NameObj:{ QM: 'shuai' } }, watch:{ Name:function (val,oldval) { // You can write methods directly here. console.log(val,oldval) }, Names:[ function (val,oldval) { // Multiple methods can use the form of arrays console.log(val,oldval) }, function (val,oldval) { // Multiple methods can use the form of arrays console.log(val,oldval) } ], // Deep watcher NameDeep: { handler: function (val, oldVal) { /* ... */ }, deep: true }, // The callback will be called immediately after the listening starts NameImm: { handler: function (val, oldVal) { /* ... */ }, immediate: true }, //The form of Obj 'NameObj.QM':function (val, oldVal){ /* ... */ } } }) </script> </body> </html>
Filter option
Vue.js allows you to customize filters and can be used for some common text formatting. Filters can be used in two places: double bracket interpolation and v-bind expressions (which are supported starting with 2.1.0+). The filter should be added at the end of the JavaScript expression, indicated by the "pipe" symbol
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .active{ color:red } </style> </head> <body> <div id="app"> <!-- stay `v-bind` in --> <div v-bind:id="rawId | capitalize"> <!-- In double brackets --> {{ message | capitalize }} </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: "test", rawId: "change" }, filters:{ 'capitalize':function(value){ if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script> </body> </html>