1. Recite the directory structure
1. Create a Vue instance
2. Vue option name (8 types)
3. Vue instance mount element
4. Vue instance binding data
5. Instance properties and methods provided by vue.js
6. Data binding
(1) Text interpolation
(2) Output HTML content
(3) Binding HTML attributes
(4) Shorthand for binding HTML attributes
7. Filter
(1) Representation form
(2) Define a global filter
(3) Define local filters
8. Condition judgment instruction
(1) Single element judgment
(2) Judgment of a group of elements
9. Loop instruction
(1) Traversing array instructions and 2 usage forms
(2) Loop through a set of elements
(3) Use form of traversal object
(4) Traversing integers
10. Array update method
11. Definition and form of computed attributes
12. The difference between listening attributes and calculated attributes (2 points)
13. Definition and usage of monitoring attributes
14. Class attribute binding
(1) Inline binding
(2) Non-inline binding
15. Style binding
(1) Inline binding
(2) Non-inline binding
16. Event monitoring instructions and abbreviations
17. Two-way binding instructions for form elements
18. Binding checkbox
(1) Single check box binding
(2) Multiple checkbox bindings
19. v-model modifier
(1) Delayed synchronization
(2) Convert user input to numeric type
(3) Filter the spaces at the beginning and end of the input string
20. Register custom instructions
(1) Register global custom instructions and examples
(2) Register local custom instructions
21. Commonly used hook functions in custom instructions
22. Register components
(1) Register global components and examples
(2) Register local components
(3) data and template options in components
23. The parent component passes data to the child component
24. Methods and examples of passing dynamic Prop
25. Parent component receives information and examples of child components
26. Definition of content distribution
27. Examples of using slots
(1) Basic usage
(2) Named slots
28. Commonly used vue component declaration cycle functions
29. The method of dynamic components
30. The method of saving the state when the component is dynamically switched
31. The name of the plug-in that implements routing, data request, and state management
32. The role of vue-router
33. Basic usage of vue-router
34. The method of nesting routing
35. Vue's built-in dynamic navigation method
36. The method of multi-interface display in the routing view
37. The get request method of Axios returns success/failure and corresponding examples
38. The role of vuex
39. The role and inclusion of store in vuex
40. The working principle of vuex
41. ...mapState and ...mapActions functions in vuex
----------------------------------------------------------------------------------------------------------------
2. Corresponding content
1. Create a vue instance
var vm=new Vue({})
2. Vue option name (8 types)
el / data / methods / computed / watch / filters / direcitves / components
3. Vue instance mount element
Use the el option, e.g. el: "#app"
4. Vue instance binding data
Use the data option
5. Instance properties and methods provided by vue.js
prefixed with $, such as vm.$data.company
6. Data binding
(1) Text interpolation
Use { {}} double curly braces tags, such as { { message }}
(2) Output HTML content
Use the v-html directive, such as v-html="message"
(3) Binding HTML attributes
You cannot directly use text interpolation, you need to use v-bind: attribute instructions, such as v-bind:src="src"
(4) Shorthand form for binding HTML attributes
: attribute, for example: src="src"
7. Filter
(1) Representation form
Indicated by the pipe symbol "|", such as { { message | myFilter }}
(2) Define a global filter
Vue.filter(ID, function(){})
(3) Define local filters
Apply the filters option in the constructor created by Vue
8. Condition judgment instruction
(1) Single element judgment
v-if / v-else / v-else-if
For example: <p v-if="a<b">
(2) Judgment of a group of elements
Use the <template> element as a wrapper element
For example: <template v-if="show">
9. Loop instruction
(1) Traversing array instructions and 2 usage forms
v-for directive
Usage format: v-for=”item in items” / “(item, index) in items”
(2) Loop through a set of elements
Use the <template> element as a wrapper element
<template v-for=”item in items”>
(3) Use form of traversal object
v-for=”value in object” / v-for=”(value, key) in object”
(4) Traversing integers
v-for=”n in 5”
10. Array update method
push() / pop() / shift() / unshift() / splice() / sort() / reverse()
For example: vm.items.push()
11. Definition and form of computed attributes
Defined in the computed attribute, the attribute value will be updated if the data that the attribute depends on changes, and the data binding that depends on the attribute will also be updated.
for example:
computed: {
newstr: function(){}
}
12. The difference between listening properties and computing properties
- The value of the calculated property is defined in computed, while the listener is defined in data
- The value of the calculated property can be cached, while the monitored property is calculated every time
13. Definition and usage of monitoring attributes
A specific action is performed whenever the monitored property changes.
How to use: It can be defined in the watch option, or use the instance method vm.$watch()
14. Class attribute binding
(1) Inline binding
Bind the class attribute of the element directly into the form of an object
v-bind:class=”{active: isActive}”
(2) Non-inline binding
Define the object bound to the class attribute of the element in the data option
v-bind:class=”classObject”
15. Style binding
(1) Inline binding
Bind the element's style property directly to an object
v-bind:style=”{fontWeight: weight}”
(2) Non-inline binding
Define the object bound to the element's style attribute in the data option
v-bind:style=”styleObject”
16. Form and abbreviation of event monitoring command
v-on directive
For example: v-on:click="show" or @click="show"
17. Two-way binding instructions for form elements
v-model directive
18. Binding checkbox
(1) Single check box binding
Use v-model to bind a boolean value
for example:
<input type=”checkbox” v-model=”checked”>
Then checked in the data option: false
(2) Multiple checkbox bindings
Use v-model to bind an array
for example:
<input type=”checkbox” value=”A” v-model=”brand”>
<label>A</label>
<input type=”checkbox” value=”B” v-model=”brand”>
<label>B</label>
Then brand in the data option: []
19. Modifiers of v-model
(1) Delayed synchronization
After adding the lazy modifier, it is converted to use the change event for synchronization
(2) Convert user input to numeric type
Use the number modifier
(3) Filter the spaces at the beginning and end of the input string
Use the trim modifier
20. Register custom instructions
(1) Register global custom instructions and examples
Use the Vue.directive(id, definition) method. definition is a specific instruction hook function.
Example:
Vue.directive(‘focus’, {
inserted: function(el){
el.focus();
}
})
(2) Register local custom instructions
Register a local custom directive in the directives option.
21. Commonly used hook functions in custom instructions
bind: Called only once, when the directive is bound to the element for the first time.
inserted: Called when the bound element is inserted into the parent element
update: Called when the bound value changes
22. Register components
(1) Register global components and examples
Use the Vue.component(tagName, options) method.
Example:
Vue.component(‘my-component’, {
template: '<div> Register global components</div>'
})
(2) Register local components
Register a partial component in the components option.
(3) data and template options in components
A component's data option must be a function, not an object.
template is the page information of html
23. The parent component passes data to the child component
This is achieved through the Prop function.
Child components need to explicitly declare Prop with the props option, and the parent element passes data to the child component through this attribute.
24. Methods and examples of passing dynamic Prop
The data in the parent component is passed to the child component through v-bind.
Example:
<my-component v-bind:boxoffice=”boxoffice_data”>
25. Parent component receives information and examples of child components
The child component triggers a custom event by calling the built-in $emit() method and passing in the event name, and the parent component listens to the custom event of the child component instance through v-on.
The format of the emit method:
vm.$emit(eventName, parameter)
The parent component accesses the passed parameters through $event
Example:
In the subcomponent:
this.$emit(‘enlarge’, value);
In the parent component:
v-on:enlarge=”fontSize += $event”
26. Definition of content distribution
A way to mix parent component content and child component templates provided by Vue.js.
Pass the <slot> element in the child component as a slot for the original content.
27. Examples of using slots
(1) Basic usage
parent element:
<my-slot>{ { message }} </my-slot>
Subassembly:
Add <slot></slot> to the template
The { {message}} of the parent component will replace the <slot> tag in the child component when rendering .
(2) Named slots
To use multiple slots in a component template, you need to use the name attribute of the <slot> element. The v-slot directive can be used on a <template> element when providing content to named slots. The parameter of the v-slot directive needs to match the name value of the slot element in the child component.
parent element:
<my-slot>
<template v-slot:title>
{ { title_data }}
</template>
</my-slot>
Subassembly:
Add <slot name="title"></slot> to the template
28. Commonly used vue component declaration cycle functions
created: called after the instance has been created
mounted: called when el is replaced by the newly created vm.$el and mounted on the instance
updated: called when the data changes
29. The method of dynamic components
Use the <component> element to dynamically bind to its is attribute, and determine which component to use based on the value of the is attribute.
30. The method of saving the state when the component is dynamically switched
To keep the switched state in memory to avoid repeated rendering, use a <keep-alive> element to wrap dynamic components.
31. The name of the plug-in that implements routing, data request, and state management
Routing management: vue-router
Data request: axios
State management: vuex
32. The role of vue-router
Map each path to the corresponding component, and switch between each component through routing
33. Basic usage of vue-router
(1) Page side
Navigate through router-link, where the to attribute specifies the link
Then configure the routing exit router-view
(2) Script end
Define routing components
define routes
var routes = [{path: ‘/first’, component: first}]
Create a router instance
var router = new VueRouter({routes});
Mount the root instance
var app = new Vue({router}).$mount(‘#example’);
34. The method of nesting routing
When redefining the route, in addition to the path and component information, add the children information. The information of path and component is also in children.
35. Vue's built-in dynamic navigation method
this.$router.push({name: '<url-name>'})
36. The method of multi-interface display in the routing view
Add name information in router-view
for example:
<router-view name=”left”></router-view>
<router-view name=”right”></router-view>
37. The get request method of Axios, return success/failure processing, and corresponding examples.
axios.get()
.then(function(response){console.log(response.data);})
.catch(function(error){console.log(error);})
38. The role of vuex:
A component's state change affects other components so that they are also modified accordingly.
39. The role and inclusion of store in vuex
Used to store data or state information that needs to be shared by the entire application
Included information is:
State: Defined state information
Getters: equivalent to computed properties
Mutations: define mutation functions for changing state
Actions: Define the action to submit the method in mutations to change the state
40. The working principle of vuex
Trigger an action through the dispatch method in the Vue component, submit a mutation through the commit method in the action, change a new state value through the function corresponding to the mutation, and vuex will render the new state value into the component.
41. ...mapState and ...mapActions functions in vuex
...is an object expander, which means that it is followed by an array, which can be expanded.
The mapState function returns an array object, which maps the state in the store and can be used directly in the template, without the need to obtain the state data in the store one by one through this.$store.state.
For example:
computed:{ ...mapState(['name', 'age']) // same as the name in state, you can use name, age directly in template }
Otherwise, in the calculated property:
name: state => this.$store.state.name
age: state => this.$store.state.age
So in the case of the same name as store.js, using mapState simplifies writing
The mapActions tool function will map the dispatch method in the store to the methods of the component.
For example:
...mapActions([
'logoutAction'
])
If mapActions is used, it is written as:
logoutAction(){ this.$store.dispatch('logoutAction') } So in the case of the same name as store.js, using mapActions simplifies write.