Preface
It's a bit awkward to see some background management systems can't be implemented by themselves.
So I have made up for the front-end knowledge.
Choose a vue framework for learning.
Here are some learning ideas
thinking
1. Learn the properties and methods of Vue objects
2. Learning two-way binding
3. Use of learning template and transfer of data (prop)
4. Learning life cycle, recommended articles The way to explore Vue 2.0 -- some understanding of life cycle and hook function
5. Use of v-bind and v-on
6. Using computational properties and listeners
7. Hook function
8. routing
Other
ps: the code comes from the Internet and is only used for learning and communication
Template rendering of vue
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<meta charset="utf-8"/>
<div id="app">
<my-component class="a b"></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
new Vue({
el: '#app'
})
</script>
</html>
This is a simple template rendering effect. However, it was not successful before. Now I know that it should be placed before the root instance of Vue (above)
The child component transfers data to the parent component. The following example is from rookie. It's very well written!
The basic idea is to register the event of a parent component in the child component, and then activate it internally
The specific effect can refer to here Child passes data to parent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Test case - Rookie tutorial(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div id="counter-event-example">
<p>{{ total }}</p>
<!--increment Event is activated, calling the callback method of the parent component incrementTotal-->
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div>
<script>
Vue.component('button-counter', {
//The subcomponent declares a click event, and changes the incrementHandler method of the click event trigger subcomponent
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
//The incrementHandler method is called, using the event mechanism to activate the increment event
incrementHandler: function () {
this.counter += 1
this.$emit('increment');//Here you can add the data that needs to be passed to the parent component
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
//The parent component declares a callback method
incrementTotal: function () {
this.total += 1
}
}
})
</script>
</body>
</html>Use of instructions
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Test case - Rookie tutorial(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>When the page is loaded, input Elements get focus automatically:</p>
<input v-focus>
</div>
<script>
// Register a global custom instruction v-focus
Vue.directive('focus', {
// When the binding element is inserted into the DOM.
inserted: function (el) {
// Focusing element
el.focus()
}
})
// Create root instance
new Vue({
el: '#app'
})
</script>
</body>
</html>