https://panjiachen.github.io/vue-element-admin-site/zh/guide/
Template download
https://www.typora.io/
Software download
Vue
vue instance
El: the div element taken over by vue can only take over one. It can be considered as a vue box
data: data
methods: methods
v-show and v-if
If the condition of v-show is False, a property of display=none will be added to the tag
v-if the condition is met, the element will be loaded
v-on:click
Write all v-on:click, abbreviated @ click
The method corresponding to click is the method in methods
v-bind (tag attribute binding)
Write all v-bin:href
Abbreviation: href
Purpose: let html elements use the data defined in vue's data
V-model (bidirectional data Baoding)
Bind the value attribute in the tag to the data parameter in vue. When one party changes, the other party will change synchronously
v-for loop
v-for can be added to the label and will loop the label
<div v-for="value in values">
{{ value }}
</div>
<div v-for="(value,index) in values">
{{ value }}
</div>
day15 new content
filter
Filters can be used in two places: double bracket interpolation and v-bind expressions. The filter should be added at the end of the JavaScript expression, indicated by the "pipe" symbol
Local filter
Nonparametric filter {{ status|change }}
Reference filter {{ count|number( 'test' ) }}
Global filter {{ count| all }}
Vue.filter('all',function (value) {
return value + '%'
});
filters: {
change:function (status) {
if (status === 1) {
return 'success'
} else if (status === 2) {
return 'fail'
}
},
number:function (value,flag) {
return value + '%' + flag
}
}
Life cycle of vue
Life cycle refers to the steps Vue goes through when instantiating to the page
-Illustration:
-When each Vue instance is created, it goes through a series of initialization processes -- for example, setting data listening, compiling templates, mounting the instance to the DOM, and updating the DOM when the data changes. At the same time, some functions called life cycle hooks will be run in this process, which gives users the opportunity to add their own code at different stages.
const vm = new Vue({
el: '#app',
data: {
message: 'Vue Life cycle of'
},
// After instantiation, the data hasn't come out
beforeCreate: function() {
console.group('------beforeCreate Pre creation status------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
// After data initialization
created: function() {
console.group('------created Create complete status------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //Has been initialized
console.log("%c%s", "color:red","message: " + this.message); //Has been initialized
},
// Before associating with label
beforeMount: function() {
console.group('------beforeMount Pre mount status------');
console.log("%c%s", "color:red","el : " + (this.$el)); //Has been initialized
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //Has been initialized
console.log("%c%s", "color:red","message: " + this.message); //Has been initialized
},
// After the instance is associated with the label
mounted: function() {
console.group('------mounted Mount end status------');
console.log("%c%s", "color:red","el : " + this.$el); //Has been initialized
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //Has been initialized
console.log("%c%s", "color:red","message: " + this.message); //Has been initialized
},
// Before data update
beforeUpdate: function () {
console.group('beforeUpdate Status before update===============>');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
// After data update
updated: function () {
console.group('updated Update completion status===============>');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
// Before destruction
beforeDestroy: function () {
console.group('beforeDestroy Status before destruction===============>');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
// After destruction
destroyed: function () {
console.group('destroyed Destroy complete status===============>');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
-
Lifecycle between beforeCreate and created hook functions
During this life cycle, perform initialization events and observe the data. It can be seen that the data has been bound to the data attribute when created (when the value of the attribute placed in data changes, the view will also change).
Note: there is still no el option at this time
-
The lifecycle between the created hook function and beforeMount
There are still many things happening at this stage. First, it will judge whether the object has El option. If yes, continue to compile downward. If there is no El option * *, stop compiling, which means that the life cycle is stopped until vm.exe is called on the vue instance$ mount(el). ** Comment out the code:
el: '#app',
Then the run can see that it stops when it is created. If we continue to call VM$ Mount (EL), you can find that the code continues to execute downward
vm.$mount(el) //This el parameter is the dom node attached to the
Then, let's look down to see if the template parameter option has an impact on the life cycle.
(1) If the vue instance object has the template parameter option, it will be compiled into the render function as a template.
(2) . if there is no template option, the external HTML is compiled as a template.
(3) . you can see that the priority of the template in the template is higher than that of the outer HTML.
The modification code is as follows: a string of HTML is added to the HTML structure, and the template option is added to the vue object:
<!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>vue Life cycle learning</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<!--html Modified in-->
<h1>{{message + 'This is in outer HTML Medium'}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
template: "<h1>{{message +'This is in template Medium'}}</h1>", //Modified in vue configuration item
data: {
message: 'Vue Life cycle of'
}
</script>
</html>
Here we do two experiments. The first time we use the above code and the second time we annotate the code of template.
You can see that the page is rendered with:
Therefore, comprehensive ranking priority:
render function Options > template Options > outer HTML
3. Life cycle between beforemount and mounted hook functions
You can see that at this time, you add * * $el member * * to the vue instance object and replace the DOM element hanging on the. Because the results printed in the console can be seen that the el is still undefined before beforeMount.
4. mounted
Notice the screenshot below:
Before mounted, h1 is occupied by * * {{message} * * because it is still hung on the page and exists in the form of virtual DOM in JavaScript. After mounted, you can see that the content in h1 has changed.
5. Life cycle between BeforeUpdate hook function and updated hook function
When vue finds that the data displayed in the view layer will trigger the rendering of the corresponding components, the beforeUpdate and updated hook functions are called. We enter in the console:
vm.message = 'Trigger component update'
Discovery triggered an update of the component:
6. Life cycle between beforedestroy and destroyed hook functions
The beforeDestroy hook function is called before the instance is destroyed. At this step, the instance is still fully available.
The destroyed hook function is called after the Vue instance is destroyed. After calling, everything indicated by the Vue instance will be unbound, all event listeners will be removed, and all sub instances will be destroyed.
$refs
It can be used to obtain and operate instances of all elements or components with ref attribute;
assembly
What is a component?
The common functions are extracted to form components for subsequent reuse. Usually, an application is represented in the form of a nested component tree 
give an example:
A drop-down menu component: HTML+CSS+JS
Component classification:
Page component, business component and reuse component
Local components:
const Mheader = {
template : '<header> Head: {{ num }}</header>',
}
Global components:
Vue.component('Masider',{
data() {
return {
msg: 'masider'
}
}
template: '<span>{{msg}}</span>'
})
Vue principal introduces a component. The steps are mounting first and then referencing
<div id="app">
<Mheader></Mheader>
</div>
const vm = new Vue({
el: '#app',
// Mount label
components:{
Mheader
}
})
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<localassembly></localassembly>
<globalassembly></globalassembly>
</div>
<script>
// Global components do not need to be mounted
Vue.component('globalassembly',{
template: '<input type="button" value="click me"/>'
})
// Local component
const localassembly = {
template: '<div><span> {{ msg }} </span> <globalassembly></globalassembly></div>',
data() {
return {
msg: 'This is a local component msg Text information'
}
}
}
const vm = new Vue({
el: '#app',
components: {
localassembly
}
})
</script>
</body>
</html>
#####Pass values between components
-Father to son
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<localassembly :xxx="xxx" :clickme="clickmemsg"></localassembly>
<globalassembly clickme="Point me point me point me"></globalassembly>
</div>
<script>
// Global components do not need to be mounted
Vue.component('globalassembly',{
template: '<input type="button" :value="clickme"/>',
props: ['clickme']
})
// Local component
const localassembly = {
template: '<div><span> {{ msg }} ---- [ {{ xxx }}]</span> <globalassembly :clickme="clickme"></globalassembly></div>',
data() {
return {
msg: 'This is the earth',
}
},
props: ['xxx','clickme']
}
const vm = new Vue({
el: '#app',
data() {
return {
xxx: 'An alien visit from the universe',
clickmemsg: 'Do you agree to accept'
}
},
components: {
localassembly
}
})
</script>
</body>
</html>
-Son to father
$emit()
-Parallel component transfer
$on
Use of vue scaffold?
// Initialize vue program vue init webpack day15 // npm installation dependency files npm install // Test environment running npm run dev // Package online environment usage package npm run build
####Element UI develops its own interface automation platform (based on vue)
- layout
- Left menu
- Right iframe