1. Introduction
1. In fact, like Jquery, VueJs is a Js library, but it is a front-end library, specifically called MVVM (Model-View-ViewModel) library.
2. The most critical sentence to understand Vuejs is called " data-driven view ". For example, using Jquery to make a list, the data of this list is from Laravel, then we need to traverse this data, and then add the html element of the list to the dom Inside, when you want to delete a list item, you must first find the position of the list item in the dom, and then remove the node. Vuejs is not needed. When the data is there, the list is there, the data is reduced by one, and the list item is automatically reduced by one in real time.
In other words, you only need to manipulate the data, regardless of the dom.
This is basically the central idea of Vuejs.
3. Favorite sentence hahahahaha:
friendly reminder
If you think that the front end is really that simple, then I can only tell you, you have already embarked on a road of no return, it doesn't matter, even if there are thousands of pitfalls ahead, there is a brother to accompany you to jump.
2. Basic knowledge
1.v-on:click
<div id="app">
{
{ message }}
<button v-on:click="changeMessage">改变message</button>
</div>Obviously, we added a button element. When we see v-on:clickthis way of writing, it is not difficult to understand. This is the click event defined by vue v-. This way of writing at the beginning is called directive . We will encounter many later. It is the connection point of vue (data) to control html (view). .
v-on:click
click trigger event
2.v-bind:title
<div id="app2"> <span v-bind:title="message">来呀，怕你呀</span> </div> v-bind:title="message" will display the information in the message when the mouse is hovered
3.v-model
<div id="app">
<p>{
{ message }}</p>
<input v-model="message">
</div>Two-way binding, the message content is displayed in the input, when the input changes, the displayed message also changes immediately
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
}) <div id="app">
<ol>
<li v-for="todo in todos">
{
{ todo.text }}
</li>
</ol>
</div>We enter any character, and a wonderful thing happens p. The message in the label also changes. The change of the input value changes the message, so that the view changes accordingly.
In fact, we know that there must be input events behind this, but there is no need to define input events here to synchronize data. This is the two-way binding of value and data.
In the future, when we talk about two-way binding, we refer to form items like input with their own change event.
4.v-for
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
}) <div id="app">
<ol>
<li v-for="todo in todos">
{
{ todo.text }}
</li>
</ol>
</div>Here we see the third directive,
v-for="todo in todos"
, which actually means the same as any loop statement, write it on the element that needs to be looped.
todo.text
Property values can be read in per-object methods.
3. Components
1 Introduction
Components are to separate the interactive modules in the page into independent parts, which are convenient for us to reuse. For example, our common data table is used in many places, and it is a component. The component function is the most powerful feature of Vue. With it, you can develop large and complex applications.
2. Global registration
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})1) In this way, a component is registered globally, which 'my-component'is the name of the component, and {}parameters can be written in the back. We see that a template is written here, which is the html content that the component will render;
2) There is one detail to pay attention to. Vue component registration should be written in the front, and Vue instance initialization should be written in the back, otherwise an error will be reported; obviously, components can only be valid within the scope of Vue and must be written in <div id="example"> ...</div>.
3. Partial registration
var Child = {
template: '<div>A custom component!</div>'
}
var vm = new Vue({
el: '#example',
components: {
'my-component': Child
}
})4. The placement of components in the dom is particular
We know that some positions in html are special. For example , no other code should be written between uland . liFor example table, direct subordinate nodes cannot write divcode such as this. Although you can write it hard, html is not a programming language, it is just a format, so it will not report an error, but js will.
<table><my-row>...</my-row></table>
For example, it is not acceptable to write components like this. The correct way to do this <table></table>is to include it in your components.
If you insist on implementing the above way of writing, vue also provides a way:
<table><tr is="my-row"></tr></table>
We know that some positions in html are special. For example , no other code should be written between uland . liFor example table, direct subordinate nodes cannot write divcode such as this. Although you can write it hard, html is not a programming language, it is just a format, so it will not report an error, but js will.
5. The data attribute of the component
The vue component is an extension of the vue object. In theory, it inherits all the properties of the vue object. Vue originally has a data attribute, so the vue component naturally also has a data attribute. You may think it is written like this:
Vue.component('my-component', {
template: '<span>{
{ message }}</span>',
data: {
message: 'hello'
}
})However, writing Vue in this way will report an error, the correct way to write:
Vue.component('my-component', {
template: '<span>{
{ message }}</span>',
data: function(){
return {message: 'hello'}
}
})Data must be followed by a callback function, and the attribute of date must be returned. Don't ask why, remember to write it like this in the component.
6. An example of data
var data = { counter: 0 }
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{
{ counter }}</button>',
data: function () {
return data
}
})
new Vue({
el: '#example-2'
}) <div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div> data: function () {
return {
counter: 0
}
}The example here on the official website is a bit informative. First of all, we observe that statements such as v-on can be used directly in the template. Second, we noticed that data is passed in from the outside. Finally, we see that <simple-counter>it can be used multiple times, and components are used for reuse.
When you click on any counter, the three components will accumulate 1, because the external object data is directly changed when you click, and this external object is also referenced by the other two components, so all the data is changed.
However, this is not in line with the idea of components, the data of components should be independent, and clicking on one counter should not affect the other two. Correct spelling:
data: function () {
return {
counter: 0
}
}Clicking on a component will only affect its own data.
7. el attribute
Vue.component('simple-counter', {
el:function(){
return '#example'
},
template: '<button v-on:click="counter += 1">{
{ counter }}</button>',
data: function () {
return data
}
})The el attribute in the component should also be written in closure + return. It defines the effective scope of the component.
8. Nested use of components
Of course, more components can be placed in the component, which forms the relationship between parent components and child components.
Since the data defined in the component can only be used in the component, if the child component wants to use the data of the parent component, it needs to pass parameters.
Therefore, we can also understand the component abstraction as a method.
The order of parameter passing is from top to bottom (from parent component down to child component)
Another is the delivery of events. We all know about event bubbling, where events are passed from child nodes to parent nodes, all the way to the top.
Vue components are also based on this principle. As soon as the child component has a little trouble (event), the parent component and the parent parent component will know it immediately layer by layer.
In short, parameters go down and events go up .