Vue is a MVVM (Model/View/ViewModel) front-end framework. It is simple and easy to learn compared to Angular, and it has become more popular in the past two years and has grown faster than Angular. More suitable for mobile terminal, lightweight framework, small files, fast running. The  V-model command is mostly used for two-way data binding of form elements (same as ng-model in Angular). V-for =” field name in(of) array json” loop array or json(same as ng-repeat in Angular). Note that $index  V-show  V-hide starting with vue2   Show and hide (same as ng-hide in Angular)  THE DOM element deletion is the same as the ng-if in Angular. The default value is false.  V-else -if must be  V-if must be  V-if  Template compilation error  V-bind Dynamic binding:  V-ON: Click The tag binding function.  V-text  V-html   V-bind :class There are three ways to  V-bind :class. The object type is ‘{red:isred}’.   V-once Only renders the page  V-cloak prevents blinking  V-pre Outputs the basic component properties of the elements inside the tag in place

3, basic use 1.html

2.js

The MSG content in JS will be displayed in the P tag. The life cycle

A Vue instance has a complete life cycle, that is, from the beginning to create, initialize data, compile templates, mount Dom, render, update, render, uninstall, etc., we call this a Vue life cycle. Vue instance is the process from creation to destruction.

Router-link and router-view appear in pairs in Vue, and in the same page, they do not interact with each other, because of the routing configuration, so they become very close. Take a look at this route configuration:

Vue contains a routing array, which consists of objects. The routing object has the following attributes: Path: the relative address of the access route Path; Component: Indicates the value of a Component in a route. When the user clicks an address, the value of the Component is queried. In my opinion, the path and name attributes are provided for router-link, for example: Router-link has a to attribute, which indicates where the user will go after clicking a button. The value of path in the configuration route can be omitted, indicating that to is binding (:to= ‘ ‘), and the word of path can be omitted. To = “{Name: ‘XXX’}”; to= “{Name: ‘XXX’}”; to= “{Name: ‘XXX’}” To = ‘/home’ <==> :to= “{name: ‘homelink’}” All router-link links to the route will be displayed in the router-view. One of the values of components is that they can be reused. We can reuse components by giving router-view a name attribute.

Note in red that if only one component is shown, it should be written component without an S. We need to mount under the default display multiple components are: orderingGuide, delivery, and the history of course they are the corresponding values are import display module routing address.

Add a name attribute to the router-view

A subclass defines a property, such as the title property, that specifies its typeNext, have the subclass bind this property where the parent class calls the subclassThe parent class simply passes a value to the title property of the binding

This is slightly more convoluted because a subclass needs a third party to pass a value to its parent. For example, a subclass triggers a click event, and then registers itself with an event.

Where the parent class calls the child class, the child class binds the registered event and writes the implementation method in the parent class

Finally, I summarize the above knowledge through a unified diagram, involving component reuse, parent-child transmission value. Component reuse

A parent class passes a value to a child class

A subclass passes a value to its parent

Common data format for POST requests (content-Type) 1. Content-type: application/json: Data in the request body is sent to the back end as a JSON string. 2. Application/X-www-form-urlencoded: Data in the request body will be sent to the back end as a normal form (key-value pairs) Multipart /form-data: It processes the data in the request body into a message, grouped by labels and separated by delimiters. You can upload both key-value pairs and files. 2. Router-link parameters and data transmission

The work_task.id that will be passed will be renamed as ID and stored in the query to the target component. A created() hook accepts an ID from the target component as follows:

Sometimes we want to pass an array with multiple parameters. We can use the above notation, but when the array has too many parameters, it becomes too cumbersome and cumbersome to use the following notation.

Arry is the work_task parameter. The next target component will receive the same arry as work_task.

Axios is a PROMISE based HTTP library that can simply send GET and POST requests. When it comes to get and post, you should think of Jquery at the first time. After all, when Jquery was popular a few years ago, everyone was using it. But thanks to frameworks like Vue and React, Jquery isn’t as popular anymore. It was the advent of Vue, React and other frameworks that led to the creation of Axios lightweight libraries. Since Vue and others don’t need to manipulate Dom, jquery.js is no longer needed. Axios features: XMLHttpRequests in the browser; HTTP requests in Node.js; support for Promise apis; interception of requests and responses; transformation of request data and response data JSON data 8. Client support to protect against XSRF attacks As mentioned in the feature, a browser sending a request, or Node.js sending a request, can use Axios. Projects like Vue, React, Node, etc can use Axios. If you use Jquery in your project, you don’t need to use Axios. Jquery can send requests all by itself. How does Axios work?

Then (data => {}) then(data => {}) then(data => {}) then(data => {}) then(data => {}) then(data => {}) As the ancients say, “A gentleman keeps his word.” This kind of “Promise will be performed” object is called Promise object in JavaScript.

About shopping Carts

First define an array inside data, then loop it out using a for loop

Define an empty array of checkGroups in data. We then use V-model =’checkgroup’, and then use the computed property to listen for changes.

Finally, add the @click event.

The relationship between Methods, Watch and computed tomography

First of all,methods, Watch and computed tomography are all based on functions, but they are different from each other. In terms of mechanism and nature,methods and Watch /computed are different, so I will introduce two comparisons: 1. Comparison of methods and (Watch /computed) 2. Comparison of watch and computed on the mechanism of action 1. When a piece of data (called dependent data) changes, all the “related” data that depends on the data “automatically” changes, that is, the relevant function is automatically called to implement the change of data. 2. For methods: Methods are used to define functions, which obviously need to be called manually to execute. Instead of “automatically executing” pre-defined functions like watch and computed: Functions defined in methods need to be invoked actively, while functions related to Watch and computed are invoked automatically to do what we want them to do. You obviously need to call it like “fuc()”. 2.computed is a calculated property, which is in fact the same class as data properties in data objects.

When you retrieve data, use this.fullName just as you would retrieve data (not as a function call!!). Watch: similar to listening mechanism + event mechanism:

A change in firstName is the condition for this particular “event” to be triggered, and the function that corresponds to firstName is the equivalent of listening for a comparison between watch and computed after the event, so let’s start with watch and computed

First of all, they are the dependent on tracking mechanism of Vue based, they have in common is: at the time of change is all hope to rely on data, is dependent on the data according to predefined function, changing “automatic” Of course we can write their own code to complete it, but it is likely to cause confusion, writing code redundancy. Vue provides us with such a convenient interface and unified rules, but there are also obvious differences between Watch and computed: The data relation scenarios handled by watch and computed are different. 1. 2.com Puted is good at processing scenarios: one data is affected by multiple data. Watch is good at processing scenarios: one data affects multiple data

For Watch, let’s start with a scene. In One Piece, the name of the leading team is “Straw Hat Pirates”, so we call the crew members successively: Solon, straw Hat Pirates, Nami, and so on… We hope that when the name of the ship group is changed, the names of all the crew on this ship will be changed!! For example: one day, captain Lufei decided to change the name of “straw Hat Pirate Group” to “rubber pirate group” in order to strengthen team building and promote the pirate culture (Lufei is the rubber devil fruit ability) our code is as follows: var VM = new Vue({el: ‘#app’, /* data option data: 1.haiZeiTuan_Name –> Pirate group name 2. Crew name = Crew name (Straw Hat Crew) + Crew name (e.g. Sauron)

< span style = “color: RGB (62, 62, 62); font-family: ‘New style ‘,’ new style ‘, ‘new style ‘,’ new style ‘, ‘new style: NaMei: Nami, xiangJiShi: In Watch, crew names in data option are all automatically changed and printed once haiZeiTuan_Name is changed */ Watch: { haiZeiTuan_Name: Function (newName) {this.suolun = newName + ‘tholun’ this.namei = newName + ‘naMei’ this.xiangjishi = newName + ‘Xiangji’ console.log(this.suoLong) console.log(this.naMei) console.log(this.xiangJiShi) } } })

// Change vm.haiZeiTuan_Name = ‘Rubber Pirates’

demo:

So the crew’s title prefixes have been uniformly changed! But captain Luffy had an idea: I like meat so much, why don’t we just call it the Meat Thieves? // Change vm.haiZeiTuan_Name = ‘Hibbit’ demo: // change vm.haiZeiTuan_Name = ‘hibbit’ demo:Computed is good at handling scenarios in which multiple data are affected by one data

Var vm = new Vue({el:) var vm = new Vue({el:) var vm = new Vue({el:) ‘#app’, /* Data options for data: firstName, secName,thirdName Computed monitoring data: lufei_Name Lufei_Name = firstName + secName + thirdName lufei_Name = firstName + secName + thirdName lufei_Name = firstName + secName + thirdName ‘Munch ‘, secName: ‘D’, thirdName:’ Lufei ‘}, computed: {luFei_Name: function () { return this.firstName + this.secName + this.thirdName } } })

ThirdName = ‘Navy King’ // Print luffy’s full name console.log(vm.luFei_Name) demo:

But then, one day, Luffy’s hilarious grandfather, Karp, accidentally realized that he might have made a mistake in the family tree, and that they were actually not one of the “D” family, but one of the “H” family, which means that “Munchy-D-Luffy” might be called “Munchy-H-Luffy” and changed the last code to read: // Change “D” to “H” vm.secName = ‘H’ // Print the full name of Lufei console.log(vm.luFei_Name) demo:

Compared to watch/computed, methods does not handle data logic and only provides callable functions New Vue({el: ‘#app’, template: ‘)

{{ say() }}

Look at the relationship between Methods, Watch and computed from the perspective of complementary functions

A lot of times, computed is used to deal with things that you can’t deal with with Watch or with methods, or that you don’t deal with properly with computed methods — double counting

1. A method function is a bunch of “straight boys” that, if called by another parent function, will execute and return results every time, even though those results are probably the same and unnecessary 2. However,computed is a “schemer Boy”. It is based on the dependency tracking system provided by Vue. As long as the dependency data does not change,computed does not perform calculations again. ‘# app’, / / set the two button, click call getMethodsDate respectively, getComputedDate method template: ‘

<button @click=”getMethodsDate”>methods<button @click=”getComputedDate”>computed

Click the Methods button for the second time:

Note that clicking methods returns different times!! Click the computed button for the first time:

Click the computed button a second time:

Note that both clicks on computed return the same amount of time!! 2. Notice that it takes the same time for two clicks on computed tomography. New Date() is not dependent data (not instance data placed under objects such as data), so computed only provides cached values, not recalculated values that match: 1. 2. Only when the dependent data changes, does computed data recalculate. However, the data under methods is calculated every time by using computed data to deal with the code redundancy of watch in certain cases and simplify the code

New Vue({el: ‘#app’, data: {fullName: ‘#app’, firstName: ‘#app’, secName: ‘#app’, thirdName: }, // The code in watch is clearly the same type, repeated, it is not concise, nor elegant watch: {firstName: function (newValue) { this.fullName = newValue + this.secName + this.thirdName console.log(this.fullName) }, secName: function (newValue) { this.fullName = this.firstName + newValue + this.thirdName console.log(this.fullName) }, thirdName: function (newValue) { this.fullName = this.firstName + this.secName + newValue console.log(this.fullName) } } })

New Vue({el: ‘#app’, data: {fullName: ‘penghuwan ‘, firstName:’ penghuwan ‘, secName: ‘Lake ‘, thirdName:’ bay ‘}, // Refactor the code in watch to achieve the same effect computed: function () { this.fullName = this.firstName + this.secName + this.thirdName console.log(this.fullName) } })